@tolle_/tolle-ui 0.0.28-beta → 0.0.30-beta

package/fesm2022/tolle-ui.mjs

@@ -1,15 +1,15 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 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 { Component, Input, forwardRef, ViewChild, Injectable, Optional, HostListener, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector, HostBinding, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
 import { cva } from 'class-variance-authority';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { autoUpdate, computePosition, offset, flip, shift, size } from '@floating-ui/dom';
 import { Subject, Subscription, BehaviorSubject } from 'rxjs';
-import { startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval, subMonths, subYears, addMonths, addYears, isSameMonth, setMonth, setYear, isSameDay, isToday, isBefore, startOfDay, parse, isValid, format, isWithinInterval } from 'date-fns';
+import { format, startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval, subMonths, subYears, addMonths, addYears, setMonth, setYear, isSameDay, isToday, isSameMonth, isBefore, startOfDay, parse, isValid, isWithinInterval } from 'date-fns';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -512,6 +512,8 @@ class SelectItemComponent {
     value;
     class = '';
     selected = false;
+    disabled = false;
+    multiSelect = false; // Will be set by parent component
     hidden = false;
     constructor(selectService, el) {
         this.selectService = selectService;
@@ -519,33 +521,85 @@ class SelectItemComponent {
     }
     // Helper method for the parent to get the searchable text
     getLabel() {
-        return this.el.nativeElement.innerText || '';
+        return this.el.nativeElement.textContent?.trim() || '';
+    }
+    getItemClasses() {
+        return cn(
+        // Base state
+        'focus:bg-accent focus:text-accent-foreground', 
+        // Hover states (only if not disabled)
+        !this.disabled && [
+            'cursor-pointer',
+            'hover:bg-accent hover:text-accent-foreground'
+        ], 
+        // Selected state
+        this.selected && [
+            this.multiSelect
+                ? 'bg-primary/5 text-foreground'
+                : 'bg-accent text-accent-foreground'
+        ], 
+        // Disabled state
+        this.disabled && [
+            'opacity-50',
+            'cursor-not-allowed',
+            'hover:bg-transparent hover:text-foreground'
+        ]);
     }
     onClick(event) {
-        if (this.hidden)
+        if (this.hidden || this.disabled)
             return;
         event.stopPropagation();
         if (this.selectService) {
-            // Get the text content to show in the trigger button
-            const label = this.el.nativeElement.innerText.trim();
+            const label = this.getLabel();
+            if (this.multiSelect) {
+                // For multi-select, toggle selection
+                this.selected = !this.selected;
+            }
+            // For both single and multi-select, notify parent
             this.selectService.registerClick(this.value, label);
         }
     }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectItemComponent, deps: [{ token: SelectService, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectItemComponent, isStandalone: true, selector: "tolle-select-item", inputs: { value: "value", class: "class", selected: "selected" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectItemComponent, isStandalone: true, selector: "tolle-select-item", inputs: { value: "value", class: "class", selected: "selected", disabled: "disabled", multiSelect: "multiSelect" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `
     <div
       *ngIf="!hidden"
       [class]="cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground  transition-colors',
-        selected ? 'bg-accent text-accent-foreground' : '',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        getItemClasses(),
         class
       )"
+      [attr.aria-disabled]="disabled"
+      [attr.aria-selected]="selected"
+      role="option"
     >
-      <span *ngIf="selected" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <!-- Single Select: Checkmark -->
+      <span *ngIf="!multiSelect && selected" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <i class="ri-check-line text-primary"></i>
       </span>
-      <ng-content></ng-content>
+
+      <!-- Multi-Select: Checkbox -->
+      <span *ngIf="multiSelect" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <div [class]="cn(
+          'flex h-4 w-4 items-center justify-center rounded-sm border transition-all duration-200',
+          selected ? 'border-primary bg-primary text-primary-foreground' : 'border-input'
+        )">
+          <i [class]="cn(
+            'ri-check-line text-xs transition-all duration-200',
+            selected ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
+          )"></i>
+        </div>
+      </span>
+
+      <!-- Content -->
+      <span class="flex-1 truncate">
+        <ng-content></ng-content>
+      </span>
+
+      <!-- Disabled indicator -->
+      <span *ngIf="disabled && !selected" class="ml-2 text-xs text-muted-foreground/50">
+        <i class="ri-forbid-line"></i>
+      </span>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
@@ -559,15 +613,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <div
       *ngIf="!hidden"
       [class]="cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground  transition-colors',
-        selected ? 'bg-accent text-accent-foreground' : '',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors',
+        getItemClasses(),
         class
       )"
+      [attr.aria-disabled]="disabled"
+      [attr.aria-selected]="selected"
+      role="option"
     >
-      <span *ngIf="selected" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <!-- Single Select: Checkmark -->
+      <span *ngIf="!multiSelect && selected" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <i class="ri-check-line text-primary"></i>
       </span>
-      <ng-content></ng-content>
+
+      <!-- Multi-Select: Checkbox -->
+      <span *ngIf="multiSelect" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <div [class]="cn(
+          'flex h-4 w-4 items-center justify-center rounded-sm border transition-all duration-200',
+          selected ? 'border-primary bg-primary text-primary-foreground' : 'border-input'
+        )">
+          <i [class]="cn(
+            'ri-check-line text-xs transition-all duration-200',
+            selected ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
+          )"></i>
+        </div>
+      </span>
+
+      <!-- Content -->
+      <span class="flex-1 truncate">
+        <ng-content></ng-content>
+      </span>
+
+      <!-- Disabled indicator -->
+      <span *ngIf="disabled && !selected" class="ml-2 text-xs text-muted-foreground/50">
+        <i class="ri-forbid-line"></i>
+      </span>
     </div>
   `,
                 }]
@@ -579,6 +659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], selected: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], multiSelect: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -618,44 +702,25 @@ class SelectComponent {
             this.close();
         }));
     }
-    // SIMPLIFIED: Zardui-inspired trigger styling
     get computedTriggerClass() {
-        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', 
-        // Focus state - SIMPLE LIKE ZARDUI
-        !(this.readonly || this.disabled) && [
+        return cn('flex w-full items-center justify-between rounded-md border transition-all duration-200', 'bg-background text-foreground', 'border-input shadow-sm', 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', !(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 && [
+        ], !(this.readonly || this.disabled) && 'hover:border-accent', this.disabled && [
             'cursor-not-allowed opacity-50',
             'border-opacity-50'
-        ], 
-        // Readonly state
-        this.readonly && [
+        ], 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() {
-        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]', 
-        // Hide or fade icon when interaction is blocked
-        (this.disabled || this.readonly) && 'opacity-30');
+        return cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', this.isOpen ? 'rotate-180' : '', (this.size === 'xs' || this.size === 'sm') ? 'text-[14px]' : 'text-[18px]', (this.disabled || this.readonly) && 'opacity-30');
     }
     ngAfterContentInit() {
         this.updateItemSelection();
@@ -675,9 +740,7 @@ 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());
     }
     close() {
@@ -692,10 +755,25 @@ class SelectComponent {
             return;
         this.cleanupAutoUpdate = autoUpdate(this.trigger.nativeElement, this.popover.nativeElement, () => {
             computePosition(this.trigger.nativeElement, this.popover.nativeElement, {
+                strategy: 'fixed', // 3. Use fixed strategy
                 placement: 'bottom-start',
-                middleware: [offset(4), flip(), shift({ padding: 8 })],
-            }).then(({ x, y }) => {
+                middleware: [
+                    offset(4),
+                    flip(),
+                    shift({ padding: 8 }),
+                    // 4. Use size middleware to sync width and handle constraints
+                    size({
+                        apply({ rects, elements, availableHeight }) {
+                            Object.assign(elements.floating.style, {
+                                width: `${rects.reference.width}px`,
+                                maxHeight: `${availableHeight}px`
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y, strategy }) => {
                 Object.assign(this.popover.nativeElement.style, {
+                    position: strategy, // 5. Apply strategy to style
                     left: `${x}px`,
                     top: `${y}px`,
                     visibility: 'visible',
@@ -746,7 +824,7 @@ class 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 }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
-    <div [class]="cn('w-full', 'size-' + size)" #container>
+    <div [class]="cn('relative w-full', 'size-' + size)" #container>
       <button
         type="button"
         #trigger
@@ -763,8 +841,7 @@ class SelectComponent {
       <div
         #popover
         *ngIf="isOpen"
-        [ngStyle]="{minWidth: container.clientWidth+'px'}"
-        class="absolute bg-popover z-50 min-w-full max-h-[300px] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
+        class="fixed bg-popover z-[999] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
         style="visibility: hidden; top: 0; left: 0;">
         <div *ngIf="searchable" class="p-2 border-b border-border bg-popover h-auto">
           <tolle-input
@@ -785,7 +862,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", "hideHintOnFocus"] }] });
+  `, 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: 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,
@@ -802,7 +879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-    <div [class]="cn('w-full', 'size-' + size)" #container>
+    <div [class]="cn('relative w-full', 'size-' + size)" #container>
       <button
         type="button"
         #trigger
@@ -819,8 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <div
         #popover
         *ngIf="isOpen"
-        [ngStyle]="{minWidth: container.clientWidth+'px'}"
-        class="absolute bg-popover z-50 min-w-full max-h-[300px] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
+        class="fixed bg-popover z-[999] overflow-auto flex flex-col rounded-md border border-border text-popover-foreground shadow-md"
         style="visibility: hidden; top: 0; left: 0;">
         <div *ngIf="searchable" class="p-2 border-b border-border bg-popover h-auto">
           <tolle-input
@@ -1866,6 +1942,9 @@ class MultiSelectComponent {
     searchable = false;
     disabled = false;
     class = '';
+    maxSelections;
+    maxDisplayItems = 3;
+    error = false; // Added to support error styling
     trigger;
     popover;
     items;
@@ -1882,10 +1961,58 @@ class MultiSelectComponent {
                 this.toggleValue(val);
         });
     }
+    // NEW: Matches InputComponent styles exactly
+    get computedTriggerClass() {
+        return cn(
+        // Base styles
+        'flex min-h-10 w-full items-center justify-between rounded-md border transition-all duration-200 h-auto', 'bg-background text-sm', 
+        // Border and shadow
+        'border-input shadow-sm', 
+        // Padding based on size (aligned with InputComponent logic)
+        this.size === 'xs' && 'px-2 py-1', this.size === 'sm' && 'px-3 py-1.5', this.size === 'default' && 'px-3 py-2', this.size === 'lg' && 'px-4 py-2', 
+        // Focus state - ZARDUI STYLE (Soft ring, no offset)
+        !this.disabled && [
+            'focus:outline-none',
+            'focus:ring-4',
+            'focus:ring-ring/30',
+            'focus:ring-offset-0',
+            'focus:shadow-none',
+            'focus:border-primary/80' // Darkens border on focus
+        ], 
+        // Hover state
+        !this.disabled && 'hover:border-accent', 
+        // Error state
+        this.error && [
+            'border-destructive',
+            !this.disabled && [
+                'focus:border-destructive/80',
+                'focus:ring-destructive/30'
+            ]
+        ], 
+        // Disabled state
+        this.disabled && [
+            'cursor-not-allowed opacity-50',
+            'border-opacity-50'
+        ], this.class);
+    }
     ngAfterContentInit() {
         this.syncItems();
         this.items.changes.subscribe(() => this.syncItems());
     }
+    get displayItems() {
+        return this.selectedItems.slice(0, this.maxDisplayItems);
+    }
+    get exceedsDisplayLimit() {
+        return this.value.length > this.maxDisplayItems;
+    }
+    get selectableItems() {
+        return this.items ? this.items.filter(item => !item.disabled) : [];
+    }
+    get availableSelections() {
+        if (!this.maxSelections)
+            return Infinity;
+        return Math.max(0, this.maxSelections - this.value.length);
+    }
     toggle() {
         if (this.disabled)
             return;
@@ -1897,16 +2024,34 @@ class MultiSelectComponent {
     }
     close() {
         this.isOpen = false;
+        this.searchQuery = '';
+        this.onSearchChange('');
         if (this.cleanup)
             this.cleanup();
     }
     updatePosition() {
+        if (!this.trigger || !this.popover)
+            return;
         this.cleanup = autoUpdate(this.trigger.nativeElement, this.popover.nativeElement, () => {
             computePosition(this.trigger.nativeElement, this.popover.nativeElement, {
+                strategy: 'fixed',
                 placement: 'bottom-start',
-                middleware: [offset(4), flip(), shift({ padding: 8 })],
-            }).then(({ x, y }) => {
+                middleware: [
+                    offset(4),
+                    flip(),
+                    shift({ padding: 8 }),
+                    size({
+                        apply({ rects, elements, availableHeight }) {
+                            Object.assign(elements.floating.style, {
+                                width: `${rects.reference.width}px`,
+                                maxHeight: `${availableHeight}px`
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y, strategy }) => {
                 Object.assign(this.popover.nativeElement.style, {
+                    position: strategy,
                     left: `${x}px`,
                     top: `${y}px`,
                     visibility: 'visible',
@@ -1916,12 +2061,32 @@ class MultiSelectComponent {
     }
     toggleValue(val) {
         const index = this.value.indexOf(val);
-        index > -1 ? this.value.splice(index, 1) : this.value.push(val);
+        if (index > -1) {
+            this.value.splice(index, 1);
+        }
+        else {
+            if (this.maxSelections && this.value.length >= this.maxSelections)
+                return;
+            this.value.push(val);
+        }
         this.syncItems();
-        this.onChange([...this.value]); // Return new array reference for Change Detection
+        this.onChange([...this.value]);
     }
     selectAll() {
-        this.value = this.items.map(i => i.value);
+        if (!this.items)
+            return;
+        let itemsToSelect = [];
+        if (this.maxSelections) {
+            const availableItems = this.items
+                .filter(item => !item.disabled && !this.value.includes(item.value))
+                .slice(0, this.availableSelections)
+                .map(item => item.value);
+            itemsToSelect = [...this.value, ...availableItems];
+        }
+        else {
+            itemsToSelect = this.items.filter(item => !item.disabled).map(item => item.value);
+        }
+        this.value = itemsToSelect;
         this.syncItems();
         this.onChange([...this.value]);
     }
@@ -1940,8 +2105,15 @@ class MultiSelectComponent {
         this.selectedItems = [];
         this.items.forEach(item => {
             item.selected = this.value.includes(item.value);
-            if (item.selected)
+            if (item.selected) {
                 this.selectedItems.push({ label: item.getLabel(), value: item.value });
+            }
+            if (this.maxSelections && this.value.length >= this.maxSelections) {
+                item.disabled = !this.value.includes(item.value);
+            }
+            else if (item.disabled) {
+                item.disabled = false;
+            }
         });
     }
     onSearchChange(q) {
@@ -1963,45 +2135,93 @@ class MultiSelectComponent {
     // ControlValueAccessor
     onChange = () => { };
     onTouched = () => { };
-    writeValue(v) { this.value = Array.isArray(v) ? v : []; this.syncItems(); }
+    writeValue(v) {
+        this.value = Array.isArray(v) ? v : [];
+        this.syncItems();
+    }
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled = isDisabled; }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectComponent, deps: [{ token: SelectService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "tolle-multi-select", inputs: { placeholder: "placeholder", size: "size", searchable: "searchable", disabled: "disabled", class: "class" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiSelectComponent, isStandalone: true, selector: "tolle-multi-select", inputs: { placeholder: "placeholder", size: "size", searchable: "searchable", disabled: "disabled", class: "class", maxSelections: "maxSelections", maxDisplayItems: "maxDisplayItems", error: "error" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
             SelectService,
             { provide: NG_VALUE_ACCESSOR, useExisting: MultiSelectComponent, 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: `
     <div [class]="cn('relative w-full', 'size-' + size)" #container>
-      <button #trigger type="button" (click)="toggle()" [disabled]="disabled"
-              [class]="cn('flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-all h-auto', class)">
+      <button
+        #trigger
+        type="button"
+        (click)="toggle()"
+        [disabled]="disabled"
+        [class]="computedTriggerClass">
+
         <div class="flex flex-wrap gap-1 items-center max-w-[95%]">
           <ng-container *ngIf="value?.length; else placeholderTpl">
-            <tolle-badge *ngFor="let item of selectedItems" size="xs" variant="secondary" [removable]="true" (onRemove)="removeValue($event, item.value)">
+            <tolle-badge *ngFor="let item of displayItems" size="xs" variant="secondary" [removable]="true" (onRemove)="removeValue($event, item.value)">
               {{ item.label }}
             </tolle-badge>
+            <span *ngIf="exceedsDisplayLimit" class="text-xs text-muted-foreground px-1">
+              +{{ value.length - maxDisplayItems }} more
+            </span>
+            <span *ngIf="maxSelections && value.length >= maxSelections" class="text-xs text-muted-foreground px-1">
+              (Max reached)
+            </span>
           </ng-container>
           <ng-template #placeholderTpl><span class="text-muted-foreground">{{ placeholder }}</span></ng-template>
         </div>
-        <i [class]="cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform', isOpen ? 'rotate-180' : '')"></i>
+        <i [class]="cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', isOpen ? 'rotate-180' : '')"></i>
       </button>
 
-      <div #popover *ngIf="isOpen" class="absolute bg-popover z-50 min-w-full rounded-md border border-border shadow-md overflow-hidden" style="visibility: hidden;">
+      <div #popover *ngIf="isOpen"
+           class="fixed bg-popover z-[999] rounded-md border border-border shadow-md overflow-hidden"
+           style="visibility: hidden; top: 0; left: 0;">
 
         <div class="p-2 border-b border-border space-y-2 bg-popover">
+          <div class="flex items-center justify-between px-1 text-xs">
+            <span class="text-muted-foreground">
+              {{ value.length }} selected
+              <span *ngIf="maxSelections">/ {{ maxSelections }} max</span>
+            </span>
+            <span *ngIf="maxSelections && value.length >= maxSelections" class="text-destructive text-xs font-medium">
+              Maximum reached
+            </span>
+          </div>
+
           <tolle-input *ngIf="searchable" size="xs" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="onSearchChange($event)">
             <i prefix class="ri-search-line"></i>
           </tolle-input>
 
           <div class="flex items-center justify-between px-1">
-            <button type="button" (click)="selectAll()" class="text-[10px] font-bold uppercase text-primary hover:underline">Select All</button>
-            <button type="button" (click)="clearAll()" class="text-[10px] font-bold uppercase text-muted-foreground hover:underline">Clear</button>
+            <button type="button"
+                    (click)="selectAll()"
+                    [disabled]="maxSelections && selectableItems.length > maxSelections"
+                    [class]="cn(
+                      'text-[10px] font-bold uppercase transition-colors',
+                      maxSelections && selectableItems.length > maxSelections
+                        ? 'text-muted-foreground cursor-not-allowed'
+                        : 'text-primary hover:underline'
+                    )">
+              Select All
+            </button>
+            <button type="button" (click)="clearAll()" class="text-[10px] font-bold uppercase text-muted-foreground hover:underline">
+              Clear
+            </button>
           </div>
         </div>
 
         <div class="p-1 max-h-60 overflow-y-auto">
           <ng-content></ng-content>
-          <div *ngIf="noResults" class="py-4 text-center text-xs text-muted-foreground">No results found for "{{searchQuery}}"</div>
+          <div *ngIf="noResults" class="py-4 text-center text-xs text-muted-foreground">
+            No results found for "{{searchQuery}}"
+          </div>
+          <div *ngIf="maxSelections && value.length >= maxSelections"
+               class="p-2 text-center border-t border-border bg-muted/20">
+            <span class="text-xs text-destructive">
+              <i class="ri-alert-line mr-1"></i>
+              Maximum selection limit reached ({{maxSelections}})
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -2019,35 +2239,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
     <div [class]="cn('relative w-full', 'size-' + size)" #container>
-      <button #trigger type="button" (click)="toggle()" [disabled]="disabled"
-              [class]="cn('flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-all h-auto', class)">
+      <button
+        #trigger
+        type="button"
+        (click)="toggle()"
+        [disabled]="disabled"
+        [class]="computedTriggerClass">
+
         <div class="flex flex-wrap gap-1 items-center max-w-[95%]">
           <ng-container *ngIf="value?.length; else placeholderTpl">
-            <tolle-badge *ngFor="let item of selectedItems" size="xs" variant="secondary" [removable]="true" (onRemove)="removeValue($event, item.value)">
+            <tolle-badge *ngFor="let item of displayItems" size="xs" variant="secondary" [removable]="true" (onRemove)="removeValue($event, item.value)">
               {{ item.label }}
             </tolle-badge>
+            <span *ngIf="exceedsDisplayLimit" class="text-xs text-muted-foreground px-1">
+              +{{ value.length - maxDisplayItems }} more
+            </span>
+            <span *ngIf="maxSelections && value.length >= maxSelections" class="text-xs text-muted-foreground px-1">
+              (Max reached)
+            </span>
           </ng-container>
           <ng-template #placeholderTpl><span class="text-muted-foreground">{{ placeholder }}</span></ng-template>
         </div>
-        <i [class]="cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform', isOpen ? 'rotate-180' : '')"></i>
+        <i [class]="cn('ri-arrow-down-s-line text-muted-foreground ml-2 transition-transform duration-200', isOpen ? 'rotate-180' : '')"></i>
       </button>
 
-      <div #popover *ngIf="isOpen" class="absolute bg-popover z-50 min-w-full rounded-md border border-border shadow-md overflow-hidden" style="visibility: hidden;">
+      <div #popover *ngIf="isOpen"
+           class="fixed bg-popover z-[999] rounded-md border border-border shadow-md overflow-hidden"
+           style="visibility: hidden; top: 0; left: 0;">
 
         <div class="p-2 border-b border-border space-y-2 bg-popover">
+          <div class="flex items-center justify-between px-1 text-xs">
+            <span class="text-muted-foreground">
+              {{ value.length }} selected
+              <span *ngIf="maxSelections">/ {{ maxSelections }} max</span>
+            </span>
+            <span *ngIf="maxSelections && value.length >= maxSelections" class="text-destructive text-xs font-medium">
+              Maximum reached
+            </span>
+          </div>
+
           <tolle-input *ngIf="searchable" size="xs" placeholder="Search..." [(ngModel)]="searchQuery" (ngModelChange)="onSearchChange($event)">
             <i prefix class="ri-search-line"></i>
           </tolle-input>
 
           <div class="flex items-center justify-between px-1">
-            <button type="button" (click)="selectAll()" class="text-[10px] font-bold uppercase text-primary hover:underline">Select All</button>
-            <button type="button" (click)="clearAll()" class="text-[10px] font-bold uppercase text-muted-foreground hover:underline">Clear</button>
+            <button type="button"
+                    (click)="selectAll()"
+                    [disabled]="maxSelections && selectableItems.length > maxSelections"
+                    [class]="cn(
+                      'text-[10px] font-bold uppercase transition-colors',
+                      maxSelections && selectableItems.length > maxSelections
+                        ? 'text-muted-foreground cursor-not-allowed'
+                        : 'text-primary hover:underline'
+                    )">
+              Select All
+            </button>
+            <button type="button" (click)="clearAll()" class="text-[10px] font-bold uppercase text-muted-foreground hover:underline">
+              Clear
+            </button>
           </div>
         </div>
 
         <div class="p-1 max-h-60 overflow-y-auto">
           <ng-content></ng-content>
-          <div *ngIf="noResults" class="py-4 text-center text-xs text-muted-foreground">No results found for "{{searchQuery}}"</div>
+          <div *ngIf="noResults" class="py-4 text-center text-xs text-muted-foreground">
+            No results found for "{{searchQuery}}"
+          </div>
+          <div *ngIf="maxSelections && value.length >= maxSelections"
+               class="p-2 text-center border-t border-border bg-muted/20">
+            <span class="text-xs text-destructive">
+              <i class="ri-alert-line mr-1"></i>
+              Maximum selection limit reached ({{maxSelections}})
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -2063,6 +2327,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], class: [{
                 type: Input
+            }], maxSelections: [{
+                type: Input
+            }], maxDisplayItems: [{
+                type: Input
+            }], error: [{
+                type: Input
             }], trigger: [{
                 type: ViewChild,
                 args: ['trigger']
@@ -2079,7 +2349,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class CalendarComponent {
     class = '';
+    mode = 'date';
     disablePastDates = false;
+    showQuickActions = true;
+    minDate;
+    maxDate;
+    formatMonthFn;
+    formatYearFn;
+    formatDateFn;
+    dateSelect = new EventEmitter();
     currentView = 'date';
     viewDate = new Date();
     selectedDate = null;
@@ -2087,87 +2365,219 @@ class CalendarComponent {
     daysInMonth = [];
     months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
     years = [];
+    yearRangeStart;
     navBtnClass = cn('h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 border border-input rounded-md flex items-center justify-center hover:bg-accent hover:text-accent-foreground transition-all');
+    quickActionBtnClass = cn('px-3 py-1.5 text-sm rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors');
     onTouched = () => { };
     onChange = () => { };
     cn = cn;
+    constructor() {
+        this.yearRangeStart = new Date().getFullYear() - 6;
+    }
     ngOnInit() {
+        // Initialize based on mode
+        if (this.mode === 'month') {
+            this.currentView = 'month';
+        }
+        else if (this.mode === 'year') {
+            this.currentView = 'year';
+        }
         this.generateDays();
         this.generateYears();
     }
+    // Format helpers
+    formatMonthYear(date, type) {
+        if (type === 'month' && this.formatMonthFn) {
+            return this.formatMonthFn(date);
+        }
+        if (type === 'year' && this.formatYearFn) {
+            return this.formatYearFn(date);
+        }
+        return type === 'month' ? format(date, 'MMMM') : format(date, 'yyyy');
+    }
+    formatDate(date, type) {
+        if (type === 'day' && this.formatDateFn) {
+            return this.formatDateFn(date);
+        }
+        return format(date, type === 'day' ? 'd' : type === 'month' ? 'MMM' : 'yyyy');
+    }
     generateDays() {
+        if (this.mode !== 'date')
+            return;
         const start = startOfWeek(startOfMonth(this.viewDate));
         const end = endOfWeek(endOfMonth(this.viewDate));
         this.daysInMonth = eachDayOfInterval({ start, end });
     }
     generateYears() {
         const currentYear = this.viewDate.getFullYear();
-        // Generates a 16-year window centered roughly on current view
-        this.years = Array.from({ length: 16 }, (_, i) => currentYear - 6 + i);
+        if (this.mode === 'year') {
+            // For year picker, show a 12-year grid
+            this.years = Array.from({ length: 12 }, (_, i) => this.yearRangeStart + i);
+        }
+        else {
+            // For date mode year selector, show 16 years centered on current
+            this.years = Array.from({ length: 16 }, (_, i) => currentYear - 6 + i);
+        }
     }
     setView(view) {
         this.currentView = view;
-        // If switching to year view, ensure the year grid is centered on current view year
         if (view === 'year') {
             this.generateYears();
         }
     }
     prev() {
-        if (this.currentView === 'date') {
-            this.viewDate = subMonths(this.viewDate, 1);
-            this.generateDays();
+        if (this.mode === 'date') {
+            if (this.currentView === 'date') {
+                this.viewDate = subMonths(this.viewDate, 1);
+                this.generateDays();
+            }
+            else if (this.currentView === 'year') {
+                this.viewDate = subYears(this.viewDate, 16);
+                this.generateYears();
+            }
+            else if (this.currentView === 'month') {
+                this.viewDate = subYears(this.viewDate, 1);
+            }
         }
-        else if (this.currentView === 'year') {
-            this.viewDate = subYears(this.viewDate, 16);
+        else if (this.mode === 'month') {
+            this.viewDate = subYears(this.viewDate, 1);
+        }
+        else if (this.mode === 'year') {
+            this.yearRangeStart -= 12;
             this.generateYears();
         }
-        else if (this.currentView === 'month') {
-            this.viewDate = subYears(this.viewDate, 1);
+        else if (this.mode === 'month-year') {
+            if (this.currentView === 'month') {
+                this.viewDate = subYears(this.viewDate, 1);
+            }
+            else {
+                this.yearRangeStart -= 12;
+                this.generateYears();
+            }
         }
     }
     next() {
-        if (this.currentView === 'date') {
-            this.viewDate = addMonths(this.viewDate, 1);
-            this.generateDays();
+        if (this.mode === 'date') {
+            if (this.currentView === 'date') {
+                this.viewDate = addMonths(this.viewDate, 1);
+                this.generateDays();
+            }
+            else if (this.currentView === 'year') {
+                this.viewDate = addYears(this.viewDate, 16);
+                this.generateYears();
+            }
+            else if (this.currentView === 'month') {
+                this.viewDate = addYears(this.viewDate, 1);
+            }
         }
-        else if (this.currentView === 'year') {
-            this.viewDate = addYears(this.viewDate, 16);
+        else if (this.mode === 'month') {
+            this.viewDate = addYears(this.viewDate, 1);
+        }
+        else if (this.mode === 'year') {
+            this.yearRangeStart += 12;
             this.generateYears();
         }
-        else if (this.currentView === 'month') {
-            this.viewDate = addYears(this.viewDate, 1);
+        else if (this.mode === 'month-year') {
+            if (this.currentView === 'month') {
+                this.viewDate = addYears(this.viewDate, 1);
+            }
+            else {
+                this.yearRangeStart += 12;
+                this.generateYears();
+            }
         }
     }
+    prevYears() {
+        this.yearRangeStart -= 12;
+        this.generateYears();
+    }
+    nextYears() {
+        this.yearRangeStart += 12;
+        this.generateYears();
+    }
     selectDate(date) {
         if (this.isDateDisabled(date))
             return;
         this.selectedDate = date;
-        if (!isSameMonth(date, this.viewDate)) {
-            this.viewDate = date;
-            this.generateDays();
-        }
         this.onChange(date);
         this.onTouched();
+        this.dateSelect.emit(date);
     }
     selectMonth(monthIndex) {
-        this.viewDate = setMonth(this.viewDate, monthIndex);
-        this.currentView = 'date';
-        this.generateDays();
+        if (this.mode === 'date') {
+            this.viewDate = setMonth(this.viewDate, monthIndex);
+            this.currentView = 'date';
+            this.generateDays();
+        }
+        else if (this.mode === 'month') {
+            this.viewDate = setMonth(this.viewDate, monthIndex);
+            this.selectedDate = this.viewDate;
+            this.onChange(this.viewDate);
+            this.onTouched();
+            this.dateSelect.emit(this.viewDate);
+        }
     }
     selectYear(year) {
-        this.viewDate = setYear(this.viewDate, year);
-        this.currentView = 'date'; // Jump straight back to date view for efficiency
-        this.generateDays();
+        if (this.mode === 'date') {
+            this.viewDate = setYear(this.viewDate, year);
+            this.currentView = 'date';
+            this.generateDays();
+        }
+        else if (this.mode === 'year' || this.mode === 'month') {
+            this.viewDate = setYear(this.viewDate, year);
+            this.selectedDate = this.viewDate;
+            this.onChange(this.viewDate);
+            this.onTouched();
+            this.dateSelect.emit(this.viewDate);
+        }
     }
     getDayClass(date) {
         const isSelected = this.selectedDate && isSameDay(date, this.selectedDate);
         const isTodayDate = isToday(date);
         const isOutside = !isSameMonth(date, this.viewDate);
         const isDisabled = this.isDateDisabled(date);
-        return cn('h-9 w-9 p-0 font-normal text-sm rounded-md transition-all flex items-center justify-center', !isSelected && !isDisabled && 'hover:bg-accent hover:text-accent-foreground', isSelected && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', !isSelected && isTodayDate && 'bg-accent text-accent-foreground', (isOutside || isDisabled) && 'text-muted-foreground opacity-50', isDisabled && 'cursor-not-allowed');
+        return cn('h-9 w-9 p-0 font-normal text-sm rounded-md transition-all flex items-center justify-center', !isSelected && !isDisabled && 'hover:bg-accent hover:text-accent-foreground', isSelected && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground', !isSelected && isTodayDate && 'bg-accent text-accent-foreground', (isOutside || isDisabled) && 'text-muted-foreground opacity-50', isDisabled && 'cursor-not-allowed');
+    }
+    getMonthClass(monthIndex) {
+        const isSelected = this.selectedDate &&
+            this.selectedDate.getMonth() === monthIndex &&
+            this.selectedDate.getFullYear() === this.viewDate.getFullYear();
+        const isCurrent = new Date().getMonth() === monthIndex &&
+            new Date().getFullYear() === this.viewDate.getFullYear();
+        return cn('text-sm py-2.5 rounded-md transition-colors', isSelected ? 'bg-primary text-primary-foreground hover:bg-primary' :
+            isCurrent ? 'border border-primary/30 text-primary' :
+                'hover:bg-accent hover:text-accent-foreground');
+    }
+    getYearClass(year) {
+        const isSelected = this.selectedDate &&
+            this.selectedDate.getFullYear() === year;
+        const isCurrent = new Date().getFullYear() === year;
+        return cn('text-sm py-2 rounded-md transition-colors', isSelected ? 'bg-primary text-primary-foreground hover:bg-primary' :
+            isCurrent ? 'border border-primary/30 text-primary' :
+                'hover:bg-accent hover:text-accent-foreground');
     }
     isDateDisabled(date) {
-        return this.disablePastDates ? isBefore(date, startOfDay(new Date())) : false;
+        if (this.disablePastDates && isBefore(date, startOfDay(new Date()))) {
+            return true;
+        }
+        if (this.minDate && isBefore(date, this.minDate)) {
+            return true;
+        }
+        return !!(this.maxDate && isBefore(this.maxDate, date));
+    }
+    isTodayDisabled() {
+        return this.isDateDisabled(new Date());
+    }
+    selectToday() {
+        if (!this.isTodayDisabled()) {
+            this.selectDate(new Date());
+        }
+    }
+    clear() {
+        this.selectedDate = null;
+        this.onChange(null);
+        this.onTouched();
+        this.dateSelect.emit(null);
     }
     // CVA Implementation
     writeValue(obj) {
@@ -2184,27 +2594,26 @@ class CalendarComponent {
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CalendarComponent, isStandalone: true, selector: "tolle-calendar", inputs: { class: "class", disablePastDates: "disablePastDates" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CalendarComponent, isStandalone: true, selector: "tolle-calendar", inputs: { class: "class", mode: "mode", disablePastDates: "disablePastDates", showQuickActions: "showQuickActions", minDate: "minDate", maxDate: "maxDate", formatMonthFn: "formatMonthFn", formatYearFn: "formatYearFn", formatDateFn: "formatDateFn" }, outputs: { dateSelect: "dateSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CalendarComponent),
                 multi: true
             }
         ], ngImport: i0, template: `
-    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block w-fit', class)">
-
+    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block min-w-fit', class)">
+      <!-- Header with Navigation -->
       <div class="flex items-center justify-between pt-1 pb-4 gap-2">
-
+        <!-- View Selector -->
         <div class="flex items-center gap-1">
-          <button
+          <button *ngIf="mode !== 'year'"
             type="button"
             (click)="setView('month')"
             [class]="cn(
               'text-sm font-semibold px-2 py-1 rounded transition-colors',
               currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
-            )"
-          >
-            {{ viewDate | date: 'MMMM' }}
+            )">
+            {{ formatMonthYear(viewDate, 'month') }}
           </button>
 
           <button
@@ -2213,12 +2622,12 @@ class CalendarComponent {
             [class]="cn(
               'text-sm font-semibold px-2 py-1 rounded transition-colors',
               currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
-            )"
-          >
-            {{ viewDate | date: 'yyyy' }}
+            )">
+            {{ formatMonthYear(viewDate, 'year') }}
           </button>
         </div>
 
+        <!-- Navigation Buttons -->
         <div class="flex items-center space-x-1">
           <button type="button" (click)="prev()" [class]="navBtnClass">
             <i class="ri-arrow-left-s-line text-lg"></i>
@@ -2229,7 +2638,8 @@ class CalendarComponent {
         </div>
       </div>
 
-      <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+      <!-- DATE MODE -->
+      <div *ngIf="currentView === 'date' && mode === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
         <div class="grid grid-cols-7 gap-1 w-full">
           <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
             {{ day }}
@@ -2243,47 +2653,66 @@ class CalendarComponent {
             [disabled]="isDateDisabled(date)"
             [class]="getDayClass(date)"
           >
-            {{ date | date: 'd' }}
+            {{ formatDate(date, 'day') }}
           </button>
         </div>
       </div>
 
-      <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+      <!-- MONTH SELECTOR (for date mode and month mode) -->
+      <div *ngIf="(currentView === 'month')"
+           class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
         <button
           *ngFor="let month of months; let i = index"
           type="button"
           (click)="selectMonth(i)"
-          [class]="cn(
-            'text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
-            i === viewDate.getMonth() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
-          )"
+          [class]="getMonthClass(i)"
         >
           {{ month }}
         </button>
       </div>
 
-      <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+      <!-- YEAR SELECTOR (for date mode and year mode) -->
+      <div *ngIf="(currentView === 'year') "
+           class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
         <button
           *ngFor="let year of years"
           type="button"
           (click)="selectYear(year)"
-          [class]="cn(
-            'text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
-            year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
-          )"
+          [class]="getYearClass(year)"
         >
           {{ year }}
         </button>
       </div>
+
+      <!-- Quick Actions -->
+      <div *ngIf="showQuickActions" class="border-t pt-3 mt-3">
+        <div class="flex items-center justify-between gap-2">
+          <button
+            type="button"
+            (click)="selectToday()"
+            [class]="quickActionBtnClass"
+            [disabled]="isTodayDisabled()"
+          >
+            Today
+          </button>
+          <button
+            type="button"
+            (click)="clear()"
+            [class]="quickActionBtnClass"
+          >
+            Clear
+          </button>
+        </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: "pipe", type: i1.DatePipe, name: "date" }] });
+  `, 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tolle-calendar',
                     standalone: true,
-                    imports: [CommonModule],
+                    imports: [CommonModule, FormsModule],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -2292,20 +2721,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block w-fit', class)">
-
+    <div [class]="cn('p-3 border rounded-md bg-background text-popover-foreground shadow-sm inline-block min-w-fit', class)">
+      <!-- Header with Navigation -->
       <div class="flex items-center justify-between pt-1 pb-4 gap-2">
-
+        <!-- View Selector -->
         <div class="flex items-center gap-1">
-          <button
+          <button *ngIf="mode !== 'year'"
             type="button"
             (click)="setView('month')"
             [class]="cn(
               'text-sm font-semibold px-2 py-1 rounded transition-colors',
               currentView === 'month' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
-            )"
-          >
-            {{ viewDate | date: 'MMMM' }}
+            )">
+            {{ formatMonthYear(viewDate, 'month') }}
           </button>
 
           <button
@@ -2314,12 +2742,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [class]="cn(
               'text-sm font-semibold px-2 py-1 rounded transition-colors',
               currentView === 'year' ? 'bg-secondary text-secondary-foreground' : 'hover:bg-accent hover:text-accent-foreground'
-            )"
-          >
-            {{ viewDate | date: 'yyyy' }}
+            )">
+            {{ formatMonthYear(viewDate, 'year') }}
           </button>
         </div>
 
+        <!-- Navigation Buttons -->
         <div class="flex items-center space-x-1">
           <button type="button" (click)="prev()" [class]="navBtnClass">
             <i class="ri-arrow-left-s-line text-lg"></i>
@@ -2330,7 +2758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       </div>
 
-      <div *ngIf="currentView === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
+      <!-- DATE MODE -->
+      <div *ngIf="currentView === 'date' && mode === 'date'" class="space-y-2 animate-in fade-in zoom-in-95 duration-200">
         <div class="grid grid-cols-7 gap-1 w-full">
           <span *ngFor="let day of weekDays" class="text-[0.8rem] text-muted-foreground font-normal text-center w-9">
             {{ day }}
@@ -2344,45 +2773,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [disabled]="isDateDisabled(date)"
             [class]="getDayClass(date)"
           >
-            {{ date | date: 'd' }}
+            {{ formatDate(date, 'day') }}
           </button>
         </div>
       </div>
 
-      <div *ngIf="currentView === 'month'" class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+      <!-- MONTH SELECTOR (for date mode and month mode) -->
+      <div *ngIf="(currentView === 'month')"
+           class="grid grid-cols-3 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
         <button
           *ngFor="let month of months; let i = index"
           type="button"
           (click)="selectMonth(i)"
-          [class]="cn(
-            'text-sm py-2.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
-            i === viewDate.getMonth() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
-          )"
+          [class]="getMonthClass(i)"
         >
           {{ month }}
         </button>
       </div>
 
-      <div *ngIf="currentView === 'year'" class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
+      <!-- YEAR SELECTOR (for date mode and year mode) -->
+      <div *ngIf="(currentView === 'year') "
+           class="grid grid-cols-4 gap-2 w-64 animate-in fade-in zoom-in-95 duration-200">
         <button
           *ngFor="let year of years"
           type="button"
           (click)="selectYear(year)"
-          [class]="cn(
-            'text-sm py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors',
-            year === viewDate.getFullYear() ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground' : ''
-          )"
+          [class]="getYearClass(year)"
         >
           {{ year }}
         </button>
       </div>
+
+      <!-- Quick Actions -->
+      <div *ngIf="showQuickActions" class="border-t pt-3 mt-3">
+        <div class="flex items-center justify-between gap-2">
+          <button
+            type="button"
+            (click)="selectToday()"
+            [class]="quickActionBtnClass"
+            [disabled]="isTodayDisabled()"
+          >
+            Today
+          </button>
+          <button
+            type="button"
+            (click)="clear()"
+            [class]="quickActionBtnClass"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
     </div>
   `
                 }]
-        }], propDecorators: { class: [{
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: Input
+            }], mode: [{
                 type: Input
             }], disablePastDates: [{
                 type: Input
+            }], showQuickActions: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], formatMonthFn: [{
+                type: Input
+            }], formatYearFn: [{
+                type: Input
+            }], formatDateFn: [{
+                type: Input
+            }], dateSelect: [{
+                type: Output
             }] } });
 
 class MaskedInputComponent {
@@ -2728,6 +3192,15 @@ class DatePickerComponent {
     disabled = false;
     class = '';
     disablePastDates = false;
+    showClear = true;
+    showQuickActions = true;
+    minDate;
+    maxDate;
+    mode = 'date';
+    formatMonthFn;
+    formatYearFn;
+    // Format functions for display
+    displayFormat;
     triggerContainer;
     popover;
     value = null;
@@ -2737,12 +3210,56 @@ class DatePickerComponent {
     constructor(cdr) {
         this.cdr = cdr;
     }
-    // --- Logic ---
+    getMask() {
+        switch (this.mode) {
+            case 'date': return '00/00/0000';
+            case 'month': return '00/0000';
+            case 'year': return '0000';
+            default: return '00/00/0000';
+        }
+    }
+    getPlaceholder() {
+        switch (this.mode) {
+            case 'date': return 'MM/DD/YYYY';
+            case 'month': return 'MM/YYYY';
+            case 'year': return 'YYYY';
+            default: return 'MM/DD/YYYY';
+        }
+    }
+    getFormatString() {
+        switch (this.mode) {
+            case 'date': return 'MM/dd/yyyy';
+            case 'month': return 'MM/yyyy';
+            case 'year': return 'yyyy';
+            default: return 'MM/dd/yyyy';
+        }
+    }
+    formatDate(date) {
+        if (this.displayFormat) {
+            return this.displayFormat(date, this.mode);
+        }
+        switch (this.mode) {
+            case 'date': return format(date, 'MM/dd/yyyy');
+            case 'month': return format(date, 'MM/yyyy');
+            case 'year': return format(date, 'yyyy');
+            default: return format(date, 'MM/dd/yyyy');
+        }
+    }
+    parseDate(str) {
+        try {
+            const parsed = parse(str, this.getFormatString(), new Date());
+            return isValid(parsed) ? startOfDay(parsed) : null;
+        }
+        catch {
+            return null;
+        }
+    }
     onInputChange(str) {
-        if (str?.length === 10) {
-            const parsed = parse(str, 'MM/dd/yyyy', new Date());
-            if (isValid(parsed)) {
-                this.value = startOfDay(parsed);
+        const expectedLength = this.getFormatString().replace(/[^0]/g, '').length;
+        if (str?.length === expectedLength) {
+            const parsed = this.parseDate(str);
+            if (parsed) {
+                this.value = parsed;
                 this.onChange(this.value);
             }
         }
@@ -2753,12 +3270,17 @@ class DatePickerComponent {
     }
     onCalendarChange(date) {
         this.value = date;
-        this.inputValue = format(date, 'MM/dd/yyyy');
+        if (date) {
+            this.inputValue = this.formatDate(date);
+        }
+        else {
+            this.inputValue = '';
+        }
         this.onChange(this.value);
         this.close();
     }
     togglePopover(event) {
-        event.stopPropagation(); // Prevent bubbling to document
+        event.stopPropagation();
         if (this.disabled)
             return;
         this.isOpen ? this.close() : this.open();
@@ -2773,22 +3295,27 @@ class DatePickerComponent {
             this.cleanupAutoUpdate();
     }
     clear(event) {
-        event.stopPropagation(); // CRITICAL: Stop the calendar from opening
+        event.stopPropagation();
         this.value = null;
         this.inputValue = '';
         this.onChange(null);
         this.cdr.markForCheck();
     }
-    // --- Positioning ---
     updatePosition() {
         if (!this.triggerContainer || !this.popover)
             return;
         this.cleanupAutoUpdate = autoUpdate(this.triggerContainer.nativeElement, this.popover.nativeElement, () => {
             computePosition(this.triggerContainer.nativeElement, this.popover.nativeElement, {
-                placement: 'bottom-end', // Aligned to the right where the icon is
-                middleware: [offset(4), flip(), shift({ padding: 8 })],
-            }).then(({ x, y }) => {
+                strategy: 'fixed', // ADDED: Fixed strategy
+                placement: 'bottom-start', // Changed to bottom-start to align with input left edge
+                middleware: [
+                    offset(4),
+                    flip(),
+                    shift({ padding: 8 })
+                ],
+            }).then(({ x, y, strategy }) => {
                 Object.assign(this.popover.nativeElement.style, {
+                    position: strategy,
                     left: `${x}px`,
                     top: `${y}px`,
                     visibility: 'visible',
@@ -2803,7 +3330,7 @@ class DatePickerComponent {
             this.close();
         }
     }
-    // --- CVA ---
+    // CVA Implementation
     onChange = () => { };
     onTouched = () => { };
     writeValue(val) {
@@ -2811,7 +3338,7 @@ class DatePickerComponent {
             const date = new Date(val);
             if (isValid(date)) {
                 this.value = startOfDay(date);
-                this.inputValue = format(this.value, 'MM/dd/yyyy');
+                this.inputValue = this.formatDate(this.value);
             }
         }
         else {
@@ -2825,7 +3352,7 @@ class DatePickerComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "tolle-date-picker", inputs: { placeholder: "placeholder", disabled: "disabled", class: "class", disablePastDates: "disablePastDates" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "tolle-date-picker", inputs: { placeholder: "placeholder", disabled: "disabled", class: "class", disablePastDates: "disablePastDates", showClear: "showClear", showQuickActions: "showQuickActions", minDate: "minDate", maxDate: "maxDate", mode: "mode", formatMonthFn: "formatMonthFn", formatYearFn: "formatYearFn", displayFormat: "displayFormat" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -2835,8 +3362,8 @@ class DatePickerComponent {
     <div class="relative w-full" #triggerContainer>
       <tolle-masked-input
         #maskInput
-        [mask]="'00/00/0000'"
-        [placeholder]="placeholder"
+        [mask]="getMask()"
+        [placeholder]="getPlaceholder()"
         [disabled]="disabled"
         [(ngModel)]="inputValue"
         (ngModelChange)="onInputChange($event)"
@@ -2844,14 +3371,17 @@ class DatePickerComponent {
       >
         <div suffix class="flex items-center gap-1.5 cursor-pointer">
           <i
-            *ngIf="value && !disabled"
+            *ngIf="value && !disabled && showClear"
             (click)="clear($event)"
             class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
           ></i>
 
           <i
             (click)="togglePopover($event)"
-            class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+            [class]="cn(
+              'cursor-pointer text-muted-foreground transition-colors',
+              'ri-calendar-line'
+            )"
           ></i>
         </div>
       </tolle-masked-input>
@@ -2859,17 +3389,23 @@ class DatePickerComponent {
       <div
         #popover
         *ngIf="isOpen"
-        class="absolute z-50 max-w-max left-0 right-0 overflow-hidden rounded-md border border-border text-popover-foreground bg-background shadow-md"
+        class="fixed z-[50]"
         style="visibility: hidden; top: 0; left: 0;"
       >
-        <tolle-calendar
+        <tolle-calendar class="shadow-lg"
           [(ngModel)]="value"
           (ngModelChange)="onCalendarChange($event)"
+          [mode]="mode"
           [disablePastDates]="disablePastDates"
+          [minDate]="minDate"
+          [maxDate]="maxDate"
+          [showQuickActions]="showQuickActions"
+          [formatMonthFn]="formatMonthFn"
+          [formatYearFn]="formatYearFn"
         ></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", "hideHintOnFocus"] }, { 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", "mode", "disablePastDates", "showQuickActions", "minDate", "maxDate", "formatMonthFn", "formatYearFn", "formatDateFn"], outputs: ["dateSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2888,8 +3424,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <div class="relative w-full" #triggerContainer>
       <tolle-masked-input
         #maskInput
-        [mask]="'00/00/0000'"
-        [placeholder]="placeholder"
+        [mask]="getMask()"
+        [placeholder]="getPlaceholder()"
         [disabled]="disabled"
         [(ngModel)]="inputValue"
         (ngModelChange)="onInputChange($event)"
@@ -2897,14 +3433,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       >
         <div suffix class="flex items-center gap-1.5 cursor-pointer">
           <i
-            *ngIf="value && !disabled"
+            *ngIf="value && !disabled && showClear"
             (click)="clear($event)"
             class="ri-close-line cursor-pointer text-muted-foreground hover:text-foreground transition-colors"
           ></i>
 
           <i
             (click)="togglePopover($event)"
-            class="ri-calendar-line cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+            [class]="cn(
+              'cursor-pointer text-muted-foreground transition-colors',
+              'ri-calendar-line'
+            )"
           ></i>
         </div>
       </tolle-masked-input>
@@ -2912,13 +3451,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <div
         #popover
         *ngIf="isOpen"
-        class="absolute z-50 max-w-max left-0 right-0 overflow-hidden rounded-md border border-border text-popover-foreground bg-background shadow-md"
+        class="fixed z-[50]"
         style="visibility: hidden; top: 0; left: 0;"
       >
-        <tolle-calendar
+        <tolle-calendar class="shadow-lg"
           [(ngModel)]="value"
           (ngModelChange)="onCalendarChange($event)"
+          [mode]="mode"
           [disablePastDates]="disablePastDates"
+          [minDate]="minDate"
+          [maxDate]="maxDate"
+          [showQuickActions]="showQuickActions"
+          [formatMonthFn]="formatMonthFn"
+          [formatYearFn]="formatYearFn"
         ></tolle-calendar>
       </div>
     </div>
@@ -2932,6 +3477,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], disablePastDates: [{
                 type: Input
+            }], showClear: [{
+                type: Input
+            }], showQuickActions: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], formatMonthFn: [{
+                type: Input
+            }], formatYearFn: [{
+                type: Input
+            }], displayFormat: [{
+                type: Input
             }], triggerContainer: [{
                 type: ViewChild,
                 args: ['triggerContainer']
@@ -3113,7 +3674,7 @@ class PaginationComponent {
         </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: SelectComponent, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size", "readonly"] }, { kind: "component", type: SelectItemComponent, selector: "tolle-select-item", inputs: ["value", "class", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: SelectComponent, selector: "tolle-select", inputs: ["placeholder", "class", "disabled", "searchable", "size", "readonly"] }, { kind: "component", type: SelectItemComponent, selector: "tolle-select-item", inputs: ["value", "class", "selected", "disabled", "multiSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -4248,7 +4809,6 @@ class DateRangePickerComponent {
     placeholder = 'Pick a date range';
     class = '';
     disablePastDates = false;
-    // Standardized Sizes
     size = 'default';
     triggerContainer;
     popover;
@@ -4261,7 +4821,7 @@ class DateRangePickerComponent {
     get displayValue() {
         if (!this.value.start)
             return '';
-        const startStr = format(this.value.start, 'MMM dd, yyyy'); // Using date-fns format
+        const startStr = format(this.value.start, 'MMM dd, yyyy');
         if (!this.value.end)
             return startStr;
         const endStr = format(this.value.end, 'MMM dd, yyyy');
@@ -4272,12 +4832,11 @@ class DateRangePickerComponent {
         this.onChange(this.value);
         // Close only if range is complete
         if (range.start && range.end) {
-            this.onChange(this.value);
-            // Small delay for UX
             setTimeout(() => this.close(), 150);
         }
     }
-    togglePopover(_) {
+    togglePopover(event) {
+        event.stopPropagation();
         if (this.disabled)
             return;
         this.isOpen ? this.close() : this.open();
@@ -4288,39 +4847,75 @@ class DateRangePickerComponent {
     }
     close() {
         this.isOpen = false;
-        if (this.cleanupAutoUpdate)
+        if (this.cleanupAutoUpdate) {
             this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
     }
     clear(event) {
-        event.stopPropagation(); // Stop button click
+        event.stopPropagation();
         this.value = { start: null, end: null };
         this.onChange(this.value);
+        this.cdr.markForCheck();
     }
-    // --- Floating UI Positioning ---
+    // --- Floating UI Positioning with Fixed Strategy ---
     updatePosition() {
         if (!this.triggerContainer || !this.popover)
             return;
         this.cleanupAutoUpdate = autoUpdate(this.triggerContainer.nativeElement, this.popover.nativeElement, () => {
             computePosition(this.triggerContainer.nativeElement, this.popover.nativeElement, {
-                placement: 'bottom-start', // Aligned to the right where the icon is
-                middleware: [offset(4), flip(), shift({ padding: 8 })],
-            }).then(({ x, y }) => {
+                placement: 'bottom-end',
+                strategy: 'fixed', // Use fixed to escape column layout
+                middleware: [
+                    offset(4),
+                    flip({
+                        fallbackAxisSideDirection: 'start',
+                        padding: 8
+                    }),
+                    shift({ padding: 8 }),
+                    size({
+                        apply({ rects, elements, availableHeight }) {
+                            // Constrain popover to available space
+                            Object.assign(elements.floating.style, {
+                                maxHeight: `${Math.min(400, availableHeight)}px`,
+                                minWidth: `${Math.max(rects.reference.width, 320)}px`, // Calendar minimum width
+                            });
+                        }
+                    })
+                ],
+            }).then(({ x, y, placement }) => {
                 Object.assign(this.popover.nativeElement.style, {
                     left: `${x}px`,
                     top: `${y}px`,
                     visibility: 'visible',
                 });
+                // Optional: Add placement class for styling
+                this.popover.nativeElement.classList.remove('calendar-top', 'calendar-bottom');
+                if (placement.includes('top')) {
+                    this.popover.nativeElement.classList.add('calendar-top');
+                }
+                else {
+                    this.popover.nativeElement.classList.add('calendar-bottom');
+                }
             });
         });
     }
     onClickOutside(event) {
         if (this.isOpen &&
             !this.triggerContainer.nativeElement.contains(event.target) &&
-            !this.popover.nativeElement.contains(event.target)) {
+            !this.popover?.nativeElement.contains(event.target)) {
             this.close();
         }
     }
-    // CVA
+    onWindowResize() {
+        if (this.isOpen) {
+            this.close(); // Close on resize for simplicity
+        }
+    }
+    onWindowScroll() {
+        // Floating-UI's autoUpdate handles scroll repositioning
+    }
+    // --- Control Value Accessor ---
     onChange = () => { };
     onTouched = () => { };
     writeValue(val) {
@@ -4337,7 +4932,7 @@ class DateRangePickerComponent {
     setDisabledState(isDisabled) { this.disabled = isDisabled; }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateRangePickerComponent, isStandalone: true, selector: "tolle-date-range-picker", inputs: { disabled: "disabled", placeholder: "placeholder", class: "class", disablePastDates: "disablePastDates", size: "size" }, host: { listeners: { "document:mousedown": "onClickOutside($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateRangePickerComponent, isStandalone: true, selector: "tolle-date-range-picker", inputs: { disabled: "disabled", placeholder: "placeholder", class: "class", disablePastDates: "disablePastDates", size: "size" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
@@ -4345,7 +4940,12 @@ class DateRangePickerComponent {
             }
         ], viewQueries: [{ propertyName: "triggerContainer", first: true, predicate: ["triggerContainer"], descendants: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: `
     <div class="relative w-full" #triggerContainer>
-      <tolle-input [placeholder]="placeholder" [disabled]="disabled" [ngModel]="displayValue">
+      <tolle-input
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [ngModel]="displayValue"
+        [class]="class"
+      >
         <div suffix class="flex items-center gap-1.5 cursor-pointer">
           <i
             *ngIf="(value.start || value.end) && !disabled"
@@ -4359,13 +4959,14 @@ class DateRangePickerComponent {
           ></i>
         </div>
       </tolle-input>
+
       <div
         #popover
         *ngIf="isOpen"
-        class="absolute z-50 min-w-72"
-        style="visibility: hidden; top: 0; left: 0;"
+        class="fixed z-50"
+        style="visibility: hidden;"
       >
-        <tolle-range-calendar
+        <tolle-range-calendar class="shadow-lg"
           [ngModel]="value"
           (rangeSelect)="onCalendarSelect($event)"
           [disablePastDates]="disablePastDates"
@@ -4389,7 +4990,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
     <div class="relative w-full" #triggerContainer>
-      <tolle-input [placeholder]="placeholder" [disabled]="disabled" [ngModel]="displayValue">
+      <tolle-input
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [ngModel]="displayValue"
+        [class]="class"
+      >
         <div suffix class="flex items-center gap-1.5 cursor-pointer">
           <i
             *ngIf="(value.start || value.end) && !disabled"
@@ -4403,13 +5009,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           ></i>
         </div>
       </tolle-input>
+
       <div
         #popover
         *ngIf="isOpen"
-        class="absolute z-50 min-w-72"
-        style="visibility: hidden; top: 0; left: 0;"
+        class="fixed z-50"
+        style="visibility: hidden;"
       >
-        <tolle-range-calendar
+        <tolle-range-calendar class="shadow-lg"
           [ngModel]="value"
           (rangeSelect)="onCalendarSelect($event)"
           [disablePastDates]="disablePastDates"
@@ -4437,6 +5044,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:mousedown', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
             }] } });
 
 class DropdownItemComponent {
@@ -5831,6 +6444,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+class SegmentedComponent {
+    cdr;
+    items = [];
+    class = '';
+    disabled = false;
+    itemTemplate; // Allow custom content
+    value = null;
+    gliderLeft = 0;
+    gliderWidth = 0;
+    hasValue = false;
+    itemElements;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.updateGlider());
+    }
+    ngOnChanges(changes) {
+        // Recalculate if items change or if value changes externally
+        if (changes['items'] && !changes['items'].firstChange) {
+            setTimeout(() => this.updateGlider());
+        }
+    }
+    select(val) {
+        if (this.disabled)
+            return;
+        const item = this.items.find(i => i.value === val);
+        if (item?.disabled)
+            return;
+        this.value = val;
+        this.onChange(val);
+        this.onTouched();
+        this.updateGlider();
+    }
+    updateGlider() {
+        if (!this.itemElements || !this.items.length)
+            return;
+        const index = this.items.findIndex(i => i.value === this.value);
+        if (index === -1) {
+            this.hasValue = false;
+            this.gliderWidth = 0;
+            return;
+        }
+        const activeElement = this.itemElements.get(index)?.nativeElement;
+        if (activeElement) {
+            this.hasValue = true;
+            this.gliderLeft = activeElement.offsetLeft;
+            this.gliderWidth = activeElement.offsetWidth;
+            this.cdr.detectChanges();
+        }
+    }
+    // CVA Implementation
+    writeValue(val) {
+        this.value = val;
+        setTimeout(() => this.updateGlider());
+    }
+    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: SegmentedComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SegmentedComponent, isStandalone: true, selector: "tolle-segment", inputs: { items: "items", class: "class", disabled: "disabled", itemTemplate: "itemTemplate" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SegmentedComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "itemElements", predicate: ["itemEls"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      #container
+      [class]="cn(
+        'relative flex items-center p-1 bg-muted rounded-lg select-none w-full gap-1',
+        class
+      )"
+      role="tablist"
+    >
+      <div
+        class="absolute top-1 bottom-1 bg-background shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        [style.left.px]="gliderLeft"
+        [style.width.px]="gliderWidth"
+        [class.opacity-0]="!hasValue"
+      ></div>
+
+      <button
+        *ngFor="let item of items"
+        #itemEls
+        type="button"
+        role="tab"
+        [disabled]="item.disabled || disabled"
+        [attr.aria-selected]="value === item.value"
+        (click)="select(item.value)"
+        [class]="cn(
+          'relative z-10 flex-1 px-3 py-1.5 text-sm font-medium transition-colors duration-200 rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'flex items-center justify-center gap-2',
+          value === item.value
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground/70',
+          item.disabled && 'opacity-50 cursor-not-allowed',
+          item.class
+        )"
+      >
+        <ng-container *ngIf="itemTemplate; else defaultContent">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, selected: value === item.value }">
+          </ng-container>
+        </ng-container>
+
+        <ng-template #defaultContent>
+          <i *ngIf="item.icon" [class]="item.icon"></i>
+          <span class="truncate">{{ item.label }}</span>
+        </ng-template>
+      </button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-segment', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SegmentedComponent),
+                            multi: true
+                        }
+                    ], template: `
+    <div
+      #container
+      [class]="cn(
+        'relative flex items-center p-1 bg-muted rounded-lg select-none w-full gap-1',
+        class
+      )"
+      role="tablist"
+    >
+      <div
+        class="absolute top-1 bottom-1 bg-background shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        [style.left.px]="gliderLeft"
+        [style.width.px]="gliderWidth"
+        [class.opacity-0]="!hasValue"
+      ></div>
+
+      <button
+        *ngFor="let item of items"
+        #itemEls
+        type="button"
+        role="tab"
+        [disabled]="item.disabled || disabled"
+        [attr.aria-selected]="value === item.value"
+        (click)="select(item.value)"
+        [class]="cn(
+          'relative z-10 flex-1 px-3 py-1.5 text-sm font-medium transition-colors duration-200 rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'flex items-center justify-center gap-2',
+          value === item.value
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground/70',
+          item.disabled && 'opacity-50 cursor-not-allowed',
+          item.class
+        )"
+      >
+        <ng-container *ngIf="itemTemplate; else defaultContent">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, selected: value === item.value }">
+          </ng-container>
+        </ng-container>
+
+        <ng-template #defaultContent>
+          <i *ngIf="item.icon" [class]="item.icon"></i>
+          <span class="truncate">{{ item.label }}</span>
+        </ng-template>
+      </button>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemElements: [{
+                type: ViewChildren,
+                args: ['itemEls']
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -5839,5 +6638,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle-ui.mjs.map