@sonny-ui/core 0.1.0-alpha.12 → 0.1.0-alpha.14

package/fesm2022/sonny-ui-core.mjs

@@ -3,8 +3,8 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 export { cva } from 'class-variance-authority';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, effect, forwardRef, HostListener, Injector, afterNextRender, Renderer2, output, contentChildren } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, forwardRef, HostListener, TemplateRef, output, contentChildren, contentChild, effect, untracked, Injector, afterNextRender, Renderer2 } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { createGlobalPositionStrategy } from '@angular/cdk/overlay';
@@ -107,7 +107,7 @@ class SnyButtonDirective {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.loading() && 'relative cursor-wait', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.loading() && 'cursor-wait opacity-70', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyButtonDirective, isStandalone: true, selector: "button[snyBtn], a[snyBtn]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.aria-disabled": "disabled() || loading() || null", "attr.disabled": "disabled() || loading() || null", "attr.tabindex": "(disabled() || loading()) ? -1 : null" } }, ngImport: i0 });
 }
@@ -1079,19 +1079,7 @@ class SnyComboboxComponent {
     resizeHandler = null;
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? '');
     }
     registerOnChange(fn) {
@@ -1186,6 +1174,7 @@ class SnyComboboxComponent {
     }
     select(opt) {
         this.value.set(opt.value);
+        this._onChange(opt.value);
         this.close();
     }
     onKeydown(event) {
@@ -1258,7 +1247,7 @@ class SnyComboboxComponent {
 
         <!-- Options list -->
         @if (filtered().length > 0) {
-          <ul role="listbox" class="max-h-60 overflow-auto p-1">
+          <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
             @for (opt of filtered(); track opt.value; let i = $index) {
               <li
                 role="option"
@@ -1336,7 +1325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
         <!-- Options list -->
         @if (filtered().length > 0) {
-          <ul role="listbox" class="max-h-60 overflow-auto p-1">
+          <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
             @for (opt of filtered(); track opt.value; let i = $index) {
               <li
                 role="option"
@@ -1362,7 +1351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -1469,19 +1458,7 @@ class SnySwitchComponent {
     isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.checked();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.checked.set(val ?? false);
     }
     registerOnChange(fn) {
@@ -1493,6 +1470,11 @@ class SnySwitchComponent {
     setDisabledState(isDisabled) {
         this._disabledByCva.set(isDisabled);
     }
+    toggle() {
+        const newVal = !this.checked();
+        this.checked.set(newVal);
+        this._onChange(newVal);
+    }
     trackClass = computed(() => cn(switchTrackVariants({ size: this.size() }), this.checked() ? 'bg-primary' : 'bg-input', this.class()), ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
     thumbClass = computed(() => cn('pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform', switchThumbSize[this.size()], this.checked() ? switchThumbTranslate[this.size()] : 'translate-x-0'), ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1505,7 +1487,7 @@ class SnySwitchComponent {
       [attr.aria-checked]="checked()"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      (click)="checked.set(!checked())"
+      (click)="toggle()"
       (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
@@ -1529,14 +1511,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       [attr.aria-checked]="checked()"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      (click)="checked.set(!checked())"
+      (click)="toggle()"
       (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
     </button>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const toggleVariants = cva('inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
     variants: {
@@ -1565,19 +1547,7 @@ class SnyToggleDirective {
     isDisabled = computed(() => this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.pressed();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.pressed.set(val ?? false);
     }
     registerOnChange(fn) {
@@ -1592,7 +1562,9 @@ class SnyToggleDirective {
     toggle() {
         if (this.isDisabled())
             return;
-        this.pressed.set(!this.pressed());
+        const newVal = !this.pressed();
+        this.pressed.set(newVal);
+        this._onChange(newVal);
     }
     computedClass = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.pressed() ? 'bg-accent text-accent-foreground' : '', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1616,7 +1588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         '(blur)': 'onTouched()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const sliderTrackVariants = cva('relative w-full rounded-full bg-secondary cursor-pointer', {
     variants: {
@@ -1651,19 +1623,7 @@ class SnySliderComponent {
     upHandler = null;
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? 0);
     }
     registerOnChange(fn) {
@@ -1693,7 +1653,9 @@ class SnySliderComponent {
         const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
         const raw = this.min() + percent * (this.max() - this.min());
         const stepped = Math.round(raw / this.step()) * this.step();
-        this.value.set(Math.max(this.min(), Math.min(this.max(), stepped)));
+        const clamped = Math.max(this.min(), Math.min(this.max(), stepped));
+        this.value.set(clamped);
+        this._onChange(clamped);
     }
     onTrackMousedown(event) {
         if (this.isDisabled())
@@ -1730,26 +1692,31 @@ class SnySliderComponent {
         if (this.isDisabled())
             return;
         const step = this.step();
+        let newVal;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowUp':
                 event.preventDefault();
-                this.value.set(Math.min(this.max(), this.value() + step));
+                newVal = Math.min(this.max(), this.value() + step);
                 break;
             case 'ArrowLeft':
             case 'ArrowDown':
                 event.preventDefault();
-                this.value.set(Math.max(this.min(), this.value() - step));
+                newVal = Math.max(this.min(), this.value() - step);
                 break;
             case 'Home':
                 event.preventDefault();
-                this.value.set(this.min());
+                newVal = this.min();
                 break;
             case 'End':
                 event.preventDefault();
-                this.value.set(this.max());
+                newVal = this.max();
                 break;
         }
+        if (newVal !== undefined) {
+            this.value.set(newVal);
+            this._onChange(newVal);
+        }
     }
     removeListeners() {
         if (this.moveHandler) {
@@ -1828,7 +1795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }] } });
 
 const loaderVariants = cva('inline-flex items-center justify-center text-current', {
     variants: {
@@ -2074,19 +2041,7 @@ class SnySelectComponent {
     resizeHandler = null;
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? '');
     }
     registerOnChange(fn) {
@@ -2164,6 +2119,7 @@ class SnySelectComponent {
     }
     select(opt) {
         this.value.set(opt.value);
+        this._onChange(opt.value);
         this.close();
     }
     onTriggerKeydown(event) {
@@ -2228,7 +2184,7 @@ class SnySelectComponent {
         #dropdownEl
         class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
       >
-        <ul role="listbox" class="max-h-60 overflow-auto p-1">
+        <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
           @for (opt of options(); track opt.value; let i = $index) {
             <li
               role="option"
@@ -2286,7 +2242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         #dropdownEl
         class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
       >
-        <ul role="listbox" class="max-h-60 overflow-auto p-1">
+        <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
           @for (opt of options(); track opt.value; let i = $index) {
             <li
               role="option"
@@ -2308,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -2461,226 +2417,1366 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class SnySheetRef {
-    cdkRef;
-    constructor(cdkRef) {
-        this.cdkRef = cdkRef;
-    }
-    close(result) {
-        this.cdkRef.close(result);
-    }
-    get closed() {
-        return this.cdkRef.closed;
-    }
-}
-
-const DEFAULT_SHEET_CONFIG = {
-    side: 'right',
-    closeOnBackdrop: true,
-    closeOnEsc: true,
-};
-const SHEET_PANEL_CLASS = {
-    right: 'sny-sheet-right',
-    left: 'sny-sheet-left',
-    top: 'sny-sheet-top',
-    bottom: 'sny-sheet-bottom',
-};
-
-const SNY_SHEET_DATA = new InjectionToken('SNY_SHEET_DATA');
-class SnySheetService {
-    cdkDialog = inject(Dialog);
-    injector = inject(Injector);
-    open(component, config = {}) {
-        const merged = { ...DEFAULT_SHEET_CONFIG, ...config };
-        const side = merged.side ?? 'right';
-        const disableClose = !merged.closeOnBackdrop || !merged.closeOnEsc;
-        const overlay = this._getOverlayConfig(side);
-        const cdkRef = this.cdkDialog.open(component, {
-            disableClose,
-            hasBackdrop: true,
-            backdropClass: 'sny-dialog-backdrop',
-            panelClass: ['sny-sheet-panel', SHEET_PANEL_CLASS[side]],
-            positionStrategy: overlay.positionStrategy,
-            width: overlay.width,
-            maxWidth: overlay.maxWidth,
-            height: overlay.height,
-            maxHeight: overlay.maxHeight,
-            ariaLabelledBy: merged.ariaLabelledBy,
-            ariaDescribedBy: merged.ariaDescribedBy,
-            data: merged.data,
-            providers: merged.data != null
-                ? [{ provide: SNY_SHEET_DATA, useValue: merged.data }]
-                : [],
-        });
-        if (disableClose) {
-            if (merged.closeOnBackdrop) {
-                const sub = cdkRef.backdropClick.subscribe(() => cdkRef.close());
-                cdkRef.closed.subscribe(() => sub.unsubscribe());
-            }
-            if (merged.closeOnEsc) {
-                const sub = cdkRef.keydownEvents.subscribe(event => {
-                    if (event.key === 'Escape')
-                        cdkRef.close();
-                });
-                cdkRef.closed.subscribe(() => sub.unsubscribe());
-            }
-        }
-        return new SnySheetRef(cdkRef);
-    }
-    closeAll() {
-        this.cdkDialog.closeAll();
-    }
-    _getOverlayConfig(side) {
-        const strategy = createGlobalPositionStrategy(this.injector);
-        switch (side) {
-            case 'right':
-                return {
-                    positionStrategy: strategy.top('0').right('0'),
-                    width: '75%',
-                    maxWidth: '24rem',
-                    height: '100vh',
-                    maxHeight: '100vh',
-                };
-            case 'left':
-                return {
-                    positionStrategy: strategy.top('0').left('0'),
-                    width: '75%',
-                    maxWidth: '24rem',
-                    height: '100vh',
-                    maxHeight: '100vh',
-                };
-            case 'top':
-                return {
-                    positionStrategy: strategy.top('0').centerHorizontally(),
-                    width: '100vw',
-                    maxWidth: '100vw',
-                };
-            case 'bottom':
-                return {
-                    positionStrategy: strategy.bottom('0').centerHorizontally(),
-                    width: '100vw',
-                    maxWidth: '100vw',
-                };
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class SnySheetHeaderDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('flex flex-col space-y-2', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetHeaderDirective, isStandalone: true, selector: "[snySheetHeader]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snySheetHeader]',
-                    standalone: true,
-                    host: { '[class]': 'computedClass()' },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnySheetTitleDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('text-lg font-semibold text-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetTitleDirective, isStandalone: true, selector: "[snySheetTitle]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snySheetTitle]',
-                    standalone: true,
-                    host: { '[class]': 'computedClass()' },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnySheetDescriptionDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetDescriptionDirective, isStandalone: true, selector: "[snySheetDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetDescriptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snySheetDescription]',
-                    standalone: true,
-                    host: { '[class]': 'computedClass()' },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnySheetContentDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('py-4', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetContentDirective, isStandalone: true, selector: "[snySheetContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snySheetContent]',
-                    standalone: true,
-                    host: { '[class]': 'computedClass()' },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnySheetCloseDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    dialogRef = inject(DialogRef, { optional: true });
-    onClick() {
-        this.dialogRef?.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetCloseDirective, isStandalone: true, selector: "[snySheetClose]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snySheetClose]',
-                    standalone: true,
-                    host: {
-                        '[class]': 'computedClass()',
-                        '(click)': 'onClick()',
-                    },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-const alertVariants = cva('relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', {
+const paginationItemVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', {
     variants: {
         variant: {
-            default: 'bg-background text-foreground border-border',
-            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10',
-            success: 'border-green-500/50 text-green-700 dark:text-green-400 dark:border-green-500 [&>svg]:text-green-600 bg-green-50 dark:bg-green-950/30',
-            warning: 'border-yellow-500/50 text-yellow-700 dark:text-yellow-400 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-50 dark:bg-yellow-950/30',
-            info: 'border-blue-500/50 text-blue-700 dark:text-blue-400 dark:border-blue-500 [&>svg]:text-blue-600 bg-blue-50 dark:bg-blue-950/30',
+            default: 'bg-background hover:bg-accent hover:text-accent-foreground',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+        },
+        size: {
+            sm: 'h-8 w-8 text-xs',
+            md: 'h-9 w-9',
+            lg: 'h-10 w-10',
+        },
+        active: {
+            true: 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
+            false: '',
         },
     },
     defaultVariants: {
         variant: 'default',
+        size: 'md',
+        active: false,
     },
 });
 
-class SnyAlertDirective {
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    role = computed(() => {
-        const v = this.variant();
-        return v === 'destructive' || v === 'warning' || v === 'info' ? 'alert' : 'status';
-    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    ariaLive = computed(() => {
-        const v = this.variant();
-        return v === 'destructive' || v === 'warning' ? 'assertive' : 'polite';
-    }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(alertVariants({ variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    dismiss() {
-        this.visible.set(false);
-    }
+function computePageRange(totalPages, currentPage, siblingCount, boundaryCount) {
+    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    const startPages = range(1, Math.min(boundaryCount, totalPages));
+    const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+    const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+    const result = [...startPages];
+    if (siblingsStart > boundaryCount + 2) {
+        result.push('ellipsis');
+    }
+    else if (boundaryCount + 1 < totalPages - boundaryCount) {
+        result.push(boundaryCount + 1);
+    }
+    result.push(...range(siblingsStart, siblingsEnd));
+    if (siblingsEnd < totalPages - boundaryCount - 1) {
+        result.push('ellipsis');
+    }
+    else if (totalPages - boundaryCount > boundaryCount) {
+        result.push(totalPages - boundaryCount);
+    }
+    result.push(...endPages);
+    return [...new Set(result)].sort((a, b) => {
+        if (a === 'ellipsis')
+            return 0;
+        if (b === 'ellipsis')
+            return 0;
+        return a - b;
+    });
+}
+class SnyPaginationComponent {
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    pages = computed(() => computePageRange(this.totalPages(), this.currentPage(), this.siblingCount(), this.boundaryCount()), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    hasPrev = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
+    hasNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    goToPage(page) {
+        if (page === 'ellipsis')
+            return;
+        this.currentPage.set(page);
+    }
+    prev() {
+        if (this.hasPrev())
+            this.currentPage.update((p) => p - 1);
+    }
+    next() {
+        if (this.hasNext())
+            this.currentPage.update((p) => p + 1);
+    }
+    pageClass(page) {
+        return cn(paginationItemVariants({
+            variant: this.variant(),
+            size: this.size(),
+            active: page === this.currentPage(),
+        }));
+    }
+    navBtnClass() {
+        return cn(paginationItemVariants({ variant: this.variant(), size: this.size(), active: false }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyPaginationComponent, isStandalone: true, selector: "sny-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange" }, host: { attributes: { "role": "navigation", "aria-label": "Pagination" } }, ngImport: i0, template: `
+    <div class="flex items-center gap-1">
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasPrev()"
+        [attr.aria-label]="'Go to previous page'"
+        (click)="prev()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+      </button>
+
+      @for (page of pages(); track $index) {
+        @if (page === 'ellipsis') {
+          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
+        } @else {
+          <button
+            [class]="pageClass(page)"
+            [attr.aria-label]="'Page ' + page"
+            [attr.aria-current]="page === currentPage() ? 'page' : null"
+            (click)="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        }
+      }
+
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasNext()"
+        [attr.aria-label]="'Go to next page'"
+        (click)="next()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-pagination',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'role': 'navigation',
+                        'aria-label': 'Pagination',
+                    },
+                    template: `
+    <div class="flex items-center gap-1">
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasPrev()"
+        [attr.aria-label]="'Go to previous page'"
+        (click)="prev()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+      </button>
+
+      @for (page of pages(); track $index) {
+        @if (page === 'ellipsis') {
+          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
+        } @else {
+          <button
+            [class]="pageClass(page)"
+            [attr.aria-label]="'Page ' + page"
+            [attr.aria-current]="page === currentPage() ? 'page' : null"
+            (click)="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        }
+      }
+
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasNext()"
+        [attr.aria-label]="'Go to next page'"
+        (click)="next()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const dropdownContentVariants = cva('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', {
+    variants: {},
+    defaultVariants: {},
+});
+const dropdownItemVariants = cva('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[active]:bg-accent data-[active]:text-accent-foreground', {
+    variants: {
+        variant: {
+            default: '',
+            destructive: 'text-destructive data-[active]:bg-destructive/10 data-[active]:text-destructive',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+const SNY_DROPDOWN = new InjectionToken('SnyDropdown');
+class SnyDropdownDirective {
+    elementRef = inject(ElementRef);
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    toggle() { this.isOpen.update((v) => !v); }
+    open() { this.isOpen.set(true); }
+    close() { this.isOpen.set(false); }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyDropdownDirective, isStandalone: true, selector: "[snyDropdown]", host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, properties: { "class": "\"relative inline-block\"" } }, providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }], exportAs: ["snyDropdown"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDropdown]',
+                    standalone: true,
+                    exportAs: 'snyDropdown',
+                    providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
+                    host: {
+                        '[class]': '"relative inline-block"',
+                    },
+                }]
+        }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+class SnyDropdownTriggerDirective {
+    dropdown = inject(SNY_DROPDOWN);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyDropdownTriggerDirective, isStandalone: true, selector: "[snyDropdownTrigger]", host: { listeners: { "click": "dropdown.toggle()" }, properties: { "attr.aria-expanded": "dropdown.isOpen()", "attr.aria-haspopup": "\"menu\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDropdownTrigger]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'dropdown.toggle()',
+                        '[attr.aria-expanded]': 'dropdown.isOpen()',
+                        '[attr.aria-haspopup]': '"menu"',
+                    },
+                }]
+        }] });
+class SnyDropdownContentDirective {
+    dropdown = inject(SNY_DROPDOWN);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(dropdownContentVariants(), 'absolute mt-1 left-0 animate-in fade-in-0 zoom-in-95', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDropdownContentDirective, isStandalone: true, selector: "[snyDropdownContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu" }, properties: { "class": "computedClass()", "style.display": "dropdown.isOpen() ? \"\" : \"none\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDropdownContent]',
+                    standalone: true,
+                    host: {
+                        'role': 'menu',
+                        '[class]': 'computedClass()',
+                        '[style.display]': 'dropdown.isOpen() ? "" : "none"',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(dropdownContentVariants(), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuContentDirective, isStandalone: true, selector: "[snyMenuContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuItemDirective {
+    dropdown = inject(SNY_DROPDOWN, { optional: true });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(dropdownItemVariants({ variant: this.variant() }), 'cursor-pointer hover:bg-accent hover:text-accent-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.dropdown?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuItemDirective, isStandalone: true, selector: "[snyMenuItem]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick()" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuItem]',
+                    standalone: true,
+                    host: {
+                        'role': 'menuitem',
+                        '[class]': 'computedClass()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuSeparatorDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuSeparatorDirective, isStandalone: true, selector: "[snyMenuSeparator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuSeparator]',
+                    standalone: true,
+                    host: {
+                        'role': 'separator',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuLabelDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('px-2 py-1.5 text-sm font-semibold', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuLabelDirective, isStandalone: true, selector: "[snyMenuLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuLabel]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SnyCellDefDirective {
+    snyCell = input.required(...(ngDevMode ? [{ debugName: "snyCell" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyCellDefDirective, isStandalone: true, selector: "[snyCell]", inputs: { snyCell: { classPropertyName: "snyCell", publicName: "snyCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { snyCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyCell", required: true }] }] } });
+class SnyHeaderCellDefDirective {
+    snyHeaderCell = input.required(...(ngDevMode ? [{ debugName: "snyHeaderCell" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyHeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyHeaderCellDefDirective, isStandalone: true, selector: "[snyHeaderCell]", inputs: { snyHeaderCell: { classPropertyName: "snyHeaderCell", publicName: "snyHeaderCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyHeaderCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyHeaderCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { snyHeaderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyHeaderCell", required: true }] }] } });
+class SnyBulkActionsDefDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyBulkActionsDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyBulkActionsDefDirective, isStandalone: true, selector: "[snyBulkActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyBulkActionsDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyBulkActions]',
+                    standalone: true,
+                }]
+        }] });
+class SnyRowExpandDefDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRowExpandDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyRowExpandDefDirective, isStandalone: true, selector: "[snyRowExpand]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRowExpandDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyRowExpand]',
+                    standalone: true,
+                }]
+        }] });
+
+const DEFAULT_PAGINATION = {
+    pageSize: 10,
+    pageSizeOptions: [5, 10, 25, 50],
+};
+class SnyDataTableComponent {
+    // Inputs
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    density = input('normal', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    paginated = input(true, ...(ngDevMode ? [{ debugName: "paginated" }] : /* istanbul ignore next */ []));
+    filterable = input(true, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    showExport = input(false, ...(ngDevMode ? [{ debugName: "showExport" }] : /* istanbul ignore next */ []));
+    showColumnToggle = input(false, ...(ngDevMode ? [{ debugName: "showColumnToggle" }] : /* istanbul ignore next */ []));
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loadingRows = input(5, ...(ngDevMode ? [{ debugName: "loadingRows" }] : /* istanbul ignore next */ []));
+    paginationConfig = input(DEFAULT_PAGINATION, ...(ngDevMode ? [{ debugName: "paginationConfig" }] : /* istanbul ignore next */ []));
+    trackBy = input('', ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    noDataText = input('No data available', ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
+    // Model
+    selectedRows = model([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
+    // Outputs
+    sortChanged = output();
+    rowClicked = output();
+    dataExported = output();
+    // Content queries
+    cellDefs = contentChildren(SnyCellDefDirective, ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
+    headerCellDefs = contentChildren(SnyHeaderCellDefDirective, ...(ngDevMode ? [{ debugName: "headerCellDefs" }] : /* istanbul ignore next */ []));
+    bulkActionsDef = contentChild(SnyBulkActionsDefDirective, ...(ngDevMode ? [{ debugName: "bulkActionsDef" }] : /* istanbul ignore next */ []));
+    rowExpandDef = contentChild(SnyRowExpandDefDirective, ...(ngDevMode ? [{ debugName: "rowExpandDef" }] : /* istanbul ignore next */ []));
+    // Internal state
+    sortState = signal({ key: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    hiddenColumns = signal(new Set(), ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
+    // Template def maps
+    cellDefMap = computed(() => {
+        const map = new Map();
+        for (const def of this.cellDefs()) {
+            map.set(def.snyCell(), def.template);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "cellDefMap" }] : /* istanbul ignore next */ []));
+    headerCellDefMap = computed(() => {
+        const map = new Map();
+        for (const def of this.headerCellDefs()) {
+            map.set(def.snyHeaderCell(), def.template);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "headerCellDefMap" }] : /* istanbul ignore next */ []));
+    // Visible columns
+    visibleColumns = computed(() => this.columns().filter((col) => col.visible !== false && !this.hiddenColumns().has(col.key)), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    // Page size options
+    pageSizeOptions = computed(() => this.paginationConfig().pageSizeOptions.map((n) => ({
+        value: String(n),
+        label: String(n),
+    })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageSizeValue = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeValue" }] : /* istanbul ignore next */ []));
+    // Skeleton rows
+    skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    // Bulk actions visibility
+    showBulkActions = computed(() => this.selectable() &&
+        this.selectedRows().length > 0 &&
+        this.bulkActionsDef() != null, ...(ngDevMode ? [{ debugName: "showBulkActions" }] : /* istanbul ignore next */ []));
+    // Data pipeline (filter uses all columns, not just visible)
+    filteredData = computed(() => {
+        const text = this.filterText().toLowerCase().trim();
+        const rows = this.data();
+        if (!text)
+            return rows;
+        const cols = this.columns().filter((c) => c.filterable !== false);
+        return rows.filter((row) => cols.some((col) => String(row[col.key] ?? '').toLowerCase().includes(text)));
+    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    sortedData = computed(() => {
+        const { key, direction } = this.sortState();
+        const rows = this.filteredData();
+        if (!key || !direction)
+            return rows;
+        return [...rows].sort((a, b) => {
+            const aVal = a[key];
+            const bVal = b[key];
+            if (aVal == null && bVal == null)
+                return 0;
+            if (aVal == null)
+                return direction === 'asc' ? -1 : 1;
+            if (bVal == null)
+                return direction === 'asc' ? 1 : -1;
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                return direction === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            const cmp = String(aVal).localeCompare(String(bVal));
+            return direction === 'asc' ? cmp : -cmp;
+        });
+    }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => Math.max(1, Math.ceil(this.filteredData().length / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    paginatedData = computed(() => {
+        if (!this.paginated())
+            return this.sortedData();
+        const start = (this.currentPage() - 1) * this.pageSize();
+        return this.sortedData().slice(start, start + this.pageSize());
+    }, ...(ngDevMode ? [{ debugName: "paginatedData" }] : /* istanbul ignore next */ []));
+    totalColSpan = computed(() => this.visibleColumns().length +
+        (this.selectable() ? 1 : 0) +
+        (this.expandable() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColSpan" }] : /* istanbul ignore next */ []));
+    // Selection computed
+    allSelected = computed(() => {
+        const page = this.paginatedData();
+        if (page.length === 0)
+            return false;
+        const selected = this.selectedRows();
+        return page.every((row) => this.isRowInList(row, selected));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => {
+        const page = this.paginatedData();
+        const selected = this.selectedRows();
+        return page.some((row) => this.isRowInList(row, selected));
+    }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const config = this.paginationConfig();
+            untracked(() => this.pageSize.set(config.pageSize));
+        });
+        effect(() => {
+            this.filterText();
+            this.pageSize();
+            this.data();
+            untracked(() => this.currentPage.set(1));
+        });
+    }
+    // Sort
+    toggleSort(key) {
+        const current = this.sortState();
+        let direction;
+        if (current.key !== key) {
+            direction = 'asc';
+        }
+        else if (current.direction === 'asc') {
+            direction = 'desc';
+        }
+        else if (current.direction === 'desc') {
+            direction = null;
+        }
+        else {
+            direction = 'asc';
+        }
+        const next = { key: direction ? key : '', direction };
+        this.sortState.set(next);
+        this.sortChanged.emit(next);
+    }
+    // Filter
+    onFilterInput(event) {
+        this.filterText.set(event.target.value);
+    }
+    // Page size
+    onPageSizeChange(value) {
+        this.pageSize.set(Number(value));
+    }
+    // Selection
+    toggleSelectAll() {
+        if (this.allSelected()) {
+            const page = this.paginatedData();
+            this.selectedRows.update((sel) => sel.filter((r) => !page.some((p) => this.rowsEqual(r, p))));
+        }
+        else {
+            const page = this.paginatedData();
+            this.selectedRows.update((sel) => {
+                const newSel = [...sel];
+                for (const row of page) {
+                    if (!this.isRowInList(row, newSel))
+                        newSel.push(row);
+                }
+                return newSel;
+            });
+        }
+    }
+    toggleRowSelection(row) {
+        this.selectedRows.update((sel) => this.isRowInList(row, sel)
+            ? sel.filter((r) => !this.rowsEqual(r, row))
+            : [...sel, row]);
+    }
+    // Row click
+    onRowClick(row) {
+        this.rowClicked.emit(row);
+    }
+    // Export
+    onExport() {
+        this.dataExported.emit(this.filteredData());
+    }
+    // Column visibility
+    toggleColumnVisibility(key) {
+        this.hiddenColumns.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    // Expansion
+    toggleRowExpansion(row) {
+        const key = this.trackBy() ? row[this.trackBy()] : row;
+        this.expandedRows.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    isExpanded(row) {
+        const key = this.trackBy() ? row[this.trackBy()] : row;
+        return this.expandedRows().has(key);
+    }
+    // Helpers
+    isSelected(row) {
+        return this.isRowInList(row, this.selectedRows());
+    }
+    trackByFn(row, index) {
+        const key = this.trackBy();
+        return key ? row[key] : index;
+    }
+    isRowInList(row, list) {
+        return list.some((r) => this.rowsEqual(r, row));
+    }
+    rowsEqual(a, b) {
+        const key = this.trackBy();
+        if (key)
+            return a[key] === b[key];
+        return a === b;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDataTableComponent, isStandalone: true, selector: "sny-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showColumnToggle: { classPropertyName: "showColumnToggle", publicName: "showColumnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortChanged: "sortChanged", rowClicked: "rowClicked", dataExported: "dataExported" }, queries: [{ propertyName: "cellDefs", predicate: SnyCellDefDirective, isSignal: true }, { propertyName: "headerCellDefs", predicate: SnyHeaderCellDefDirective, isSignal: true }, { propertyName: "bulkActionsDef", first: true, predicate: SnyBulkActionsDefDirective, descendants: true, isSignal: true }, { propertyName: "rowExpandDef", first: true, predicate: SnyRowExpandDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Toolbar -->
+    @if (filterable() || showExport() || showColumnToggle()) {
+      <div class="flex items-center justify-between gap-4 mb-4 flex-wrap">
+        @if (filterable()) {
+          <input
+            snyInput
+            [value]="filterText()"
+            (input)="onFilterInput($event)"
+            placeholder="Filter..."
+            class="w-full sm:max-w-sm"
+          />
+        }
+        <div class="flex items-center gap-2">
+          @if (showExport()) {
+            <button snyBtn variant="outline" size="sm" (click)="onExport()">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>
+              <span class="hidden sm:inline">Export</span>
+            </button>
+          }
+          @if (showColumnToggle()) {
+            <div snyDropdown class="relative">
+              <button snyBtn variant="outline" size="sm" snyDropdownTrigger>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
+                <span class="hidden sm:inline">Columns</span>
+              </button>
+              <div snyDropdownContent class="w-48 right-0 left-auto">
+                @for (col of columns(); track col.key) {
+                  <label snyMenuItem class="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="!hiddenColumns().has(col.key)"
+                      (change)="toggleColumnVisibility(col.key)"
+                      (click)="$event.stopPropagation()"
+                    />
+                    {{ col.label }}
+                  </label>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- Bulk Actions Bar -->
+    @if (showBulkActions()) {
+      @let selected = selectedRows();
+      <div class="flex items-center gap-2 mb-4 p-3 bg-muted/50 rounded-sm border border-border flex-wrap">
+        <span class="text-sm font-medium text-muted-foreground mr-2">
+          {{ selected.length }} selected
+        </span>
+        <ng-container
+          [ngTemplateOutlet]="bulkActionsDef()!.template"
+          [ngTemplateOutletContext]="{ $implicit: selected }"
+        />
+        <button
+          snyBtn variant="ghost" size="sm" class="ml-auto"
+          (click)="selectedRows.set([])"
+        >
+          Clear
+        </button>
+      </div>
+    }
+
+    <!-- Table -->
+    <div class="overflow-auto border border-border rounded-sm">
+      <table
+        snyTable
+        [variant]="variant()"
+        [density]="density()"
+        [hoverable]="hoverable()"
+        [stickyHeader]="stickyHeader()"
+      >
+        <thead snyTableHeader>
+          <tr snyTableRow>
+            @if (selectable()) {
+              <th snyTableHead class="w-12">
+                <input
+                  type="checkbox"
+                  snyCheckbox
+                  [checked]="allSelected()"
+                  [indeterminate]="someSelected() && !allSelected()"
+                  (change)="toggleSelectAll()"
+                />
+              </th>
+            }
+            @if (expandable()) {
+              <th snyTableHead class="w-10"></th>
+            }
+            @let sort = sortState();
+            @let headerDefs = headerCellDefMap();
+            @for (col of visibleColumns(); track col.key) {
+              <th
+                snyTableHead
+                [style.width]="col.width ?? null"
+                [class]="col.sortable ? 'cursor-pointer select-none' : ''"
+                (click)="col.sortable ? toggleSort(col.key) : null"
+              >
+                @if (headerDefs.has(col.key)) {
+                  <ng-container
+                    [ngTemplateOutlet]="headerDefs.get(col.key)!"
+                    [ngTemplateOutletContext]="{ $implicit: col }"
+                  />
+                } @else {
+                  <div class="flex items-center gap-1">
+                    <span>{{ col.label }}</span>
+                    @if (col.sortable) {
+                      @let isActive = sort.key === col.key;
+                      @if (isActive && sort.direction === 'asc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/></svg>
+                      } @else if (isActive && sort.direction === 'desc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 12-7 7-7-7"/></svg>
+                      } @else {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-30"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+                      }
+                    }
+                  </div>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody snyTableBody>
+          @if (loading()) {
+            @for (i of skeletonRows(); track i) {
+              <tr snyTableRow>
+                @if (selectable()) {
+                  <td snyTableCell class="w-12"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @for (col of visibleColumns(); track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    <div snySkeleton class="w-full h-4 rounded"></div>
+                  </td>
+                }
+              </tr>
+            }
+          } @else if (paginatedData().length === 0) {
+            <tr snyTableRow>
+              <td
+                snyTableCell
+                [attr.colspan]="totalColSpan()"
+                class="text-center text-muted-foreground py-8"
+              >
+                {{ noDataText() }}
+              </td>
+            </tr>
+          } @else {
+            @let cellDefs = cellDefMap();
+            @let cols = visibleColumns();
+            @let expandTpl = rowExpandDef();
+            @for (row of paginatedData(); track trackByFn(row, $index)) {
+              <tr
+                snyTableRow
+                [attr.data-state]="isSelected(row) ? 'selected' : null"
+                (click)="onRowClick(row)"
+                class="cursor-pointer"
+              >
+                @if (selectable()) {
+                  <td snyTableCell class="w-12">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="isSelected(row)"
+                      (change)="toggleRowSelection(row)"
+                      (click)="$event.stopPropagation()"
+                    />
+                  </td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10">
+                    <button
+                      class="p-0.5 rounded hover:bg-accent transition-transform duration-150"
+                      [class.rotate-90]="isExpanded(row)"
+                      (click)="toggleRowExpansion(row); $event.stopPropagation()"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                    </button>
+                  </td>
+                }
+                @for (col of cols; track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    @if (cellDefs.has(col.key)) {
+                      <ng-container
+                        [ngTemplateOutlet]="cellDefs.get(col.key)!"
+                        [ngTemplateOutletContext]="{ $implicit: row[col.key], row: row }"
+                      />
+                    } @else {
+                      {{ row[col.key] }}
+                    }
+                  </td>
+                }
+              </tr>
+              @if (expandable() && isExpanded(row) && expandTpl) {
+                <tr snyTableRow>
+                  <td snyTableCell [attr.colspan]="totalColSpan()" class="bg-muted/30">
+                    <ng-container
+                      [ngTemplateOutlet]="expandTpl.template"
+                      [ngTemplateOutletContext]="{ $implicit: row }"
+                    />
+                  </td>
+                </tr>
+              }
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer -->
+    @if (paginated()) {
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4 gap-3 sm:gap-4">
+        <span class="text-sm text-muted-foreground">
+          @if (selectable()) {
+            {{ selectedRows().length }} of {{ filteredData().length }} row(s) selected
+          } @else {
+            {{ filteredData().length }} row(s)
+          }
+        </span>
+        <div class="flex items-center gap-3 sm:gap-4 flex-wrap">
+          <div class="flex items-center gap-2">
+            <span class="hidden sm:inline text-sm text-muted-foreground whitespace-nowrap">Rows per page</span>
+            <sny-select
+              [options]="pageSizeOptions()"
+              [value]="pageSizeValue()"
+              (valueChange)="onPageSizeChange($event)"
+              size="sm"
+              class="w-20"
+            />
+          </div>
+          <sny-pagination
+            [currentPage]="currentPage()"
+            (currentPageChange)="currentPage.set($event)"
+            [totalPages]="totalPages()"
+          />
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SnyTableDirective, selector: "table[snyTable]", inputs: ["variant", "density", "hoverable", "stickyHeader", "class"] }, { kind: "directive", type: SnyTableHeaderDirective, selector: "thead[snyTableHeader]", inputs: ["class"] }, { kind: "directive", type: SnyTableBodyDirective, selector: "tbody[snyTableBody]", inputs: ["class"] }, { kind: "directive", type: SnyTableRowDirective, selector: "tr[snyTableRow]", inputs: ["class"] }, { kind: "directive", type: SnyTableHeadDirective, selector: "th[snyTableHead]", inputs: ["class"] }, { kind: "directive", type: SnyTableCellDirective, selector: "td[snyTableCell]", inputs: ["class"] }, { kind: "component", type: SnyPaginationComponent, selector: "sny-pagination", inputs: ["currentPage", "totalPages", "siblingCount", "boundaryCount", "size", "variant", "class"], outputs: ["currentPageChange"] }, { kind: "directive", type: SnyCheckboxDirective, selector: "input[type=\"checkbox\"][snyCheckbox]", inputs: ["size", "class"] }, { kind: "directive", type: SnyInputDirective, selector: "input[snyInput], textarea[snyInput]", inputs: ["variant", "inputSize", "class", "ariaDescribedBy"] }, { kind: "directive", type: SnyButtonDirective, selector: "button[snyBtn], a[snyBtn]", inputs: ["variant", "size", "disabled", "loading", "class"] }, { kind: "component", type: SnySelectComponent, selector: "sny-select", inputs: ["options", "placeholder", "size", "disabled", "class", "value"], outputs: ["valueChange"] }, { kind: "directive", type: SnySkeletonDirective, selector: "[snySkeleton]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: SnyDropdownDirective, selector: "[snyDropdown]", exportAs: ["snyDropdown"] }, { kind: "directive", type: SnyDropdownTriggerDirective, selector: "[snyDropdownTrigger]" }, { kind: "directive", type: SnyDropdownContentDirective, selector: "[snyDropdownContent]", inputs: ["class"] }, { kind: "directive", type: SnyMenuItemDirective, selector: "[snyMenuItem]", inputs: ["variant", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDataTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-data-table',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgTemplateOutlet,
+                        SnyTableDirective,
+                        SnyTableHeaderDirective,
+                        SnyTableBodyDirective,
+                        SnyTableRowDirective,
+                        SnyTableHeadDirective,
+                        SnyTableCellDirective,
+                        SnyPaginationComponent,
+                        SnyCheckboxDirective,
+                        SnyInputDirective,
+                        SnyButtonDirective,
+                        SnySelectComponent,
+                        SnySkeletonDirective,
+                        SnyDropdownDirective,
+                        SnyDropdownTriggerDirective,
+                        SnyDropdownContentDirective,
+                        SnyMenuItemDirective,
+                    ],
+                    template: `
+    <!-- Toolbar -->
+    @if (filterable() || showExport() || showColumnToggle()) {
+      <div class="flex items-center justify-between gap-4 mb-4 flex-wrap">
+        @if (filterable()) {
+          <input
+            snyInput
+            [value]="filterText()"
+            (input)="onFilterInput($event)"
+            placeholder="Filter..."
+            class="w-full sm:max-w-sm"
+          />
+        }
+        <div class="flex items-center gap-2">
+          @if (showExport()) {
+            <button snyBtn variant="outline" size="sm" (click)="onExport()">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>
+              <span class="hidden sm:inline">Export</span>
+            </button>
+          }
+          @if (showColumnToggle()) {
+            <div snyDropdown class="relative">
+              <button snyBtn variant="outline" size="sm" snyDropdownTrigger>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
+                <span class="hidden sm:inline">Columns</span>
+              </button>
+              <div snyDropdownContent class="w-48 right-0 left-auto">
+                @for (col of columns(); track col.key) {
+                  <label snyMenuItem class="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="!hiddenColumns().has(col.key)"
+                      (change)="toggleColumnVisibility(col.key)"
+                      (click)="$event.stopPropagation()"
+                    />
+                    {{ col.label }}
+                  </label>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- Bulk Actions Bar -->
+    @if (showBulkActions()) {
+      @let selected = selectedRows();
+      <div class="flex items-center gap-2 mb-4 p-3 bg-muted/50 rounded-sm border border-border flex-wrap">
+        <span class="text-sm font-medium text-muted-foreground mr-2">
+          {{ selected.length }} selected
+        </span>
+        <ng-container
+          [ngTemplateOutlet]="bulkActionsDef()!.template"
+          [ngTemplateOutletContext]="{ $implicit: selected }"
+        />
+        <button
+          snyBtn variant="ghost" size="sm" class="ml-auto"
+          (click)="selectedRows.set([])"
+        >
+          Clear
+        </button>
+      </div>
+    }
+
+    <!-- Table -->
+    <div class="overflow-auto border border-border rounded-sm">
+      <table
+        snyTable
+        [variant]="variant()"
+        [density]="density()"
+        [hoverable]="hoverable()"
+        [stickyHeader]="stickyHeader()"
+      >
+        <thead snyTableHeader>
+          <tr snyTableRow>
+            @if (selectable()) {
+              <th snyTableHead class="w-12">
+                <input
+                  type="checkbox"
+                  snyCheckbox
+                  [checked]="allSelected()"
+                  [indeterminate]="someSelected() && !allSelected()"
+                  (change)="toggleSelectAll()"
+                />
+              </th>
+            }
+            @if (expandable()) {
+              <th snyTableHead class="w-10"></th>
+            }
+            @let sort = sortState();
+            @let headerDefs = headerCellDefMap();
+            @for (col of visibleColumns(); track col.key) {
+              <th
+                snyTableHead
+                [style.width]="col.width ?? null"
+                [class]="col.sortable ? 'cursor-pointer select-none' : ''"
+                (click)="col.sortable ? toggleSort(col.key) : null"
+              >
+                @if (headerDefs.has(col.key)) {
+                  <ng-container
+                    [ngTemplateOutlet]="headerDefs.get(col.key)!"
+                    [ngTemplateOutletContext]="{ $implicit: col }"
+                  />
+                } @else {
+                  <div class="flex items-center gap-1">
+                    <span>{{ col.label }}</span>
+                    @if (col.sortable) {
+                      @let isActive = sort.key === col.key;
+                      @if (isActive && sort.direction === 'asc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/></svg>
+                      } @else if (isActive && sort.direction === 'desc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 12-7 7-7-7"/></svg>
+                      } @else {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-30"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+                      }
+                    }
+                  </div>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody snyTableBody>
+          @if (loading()) {
+            @for (i of skeletonRows(); track i) {
+              <tr snyTableRow>
+                @if (selectable()) {
+                  <td snyTableCell class="w-12"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @for (col of visibleColumns(); track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    <div snySkeleton class="w-full h-4 rounded"></div>
+                  </td>
+                }
+              </tr>
+            }
+          } @else if (paginatedData().length === 0) {
+            <tr snyTableRow>
+              <td
+                snyTableCell
+                [attr.colspan]="totalColSpan()"
+                class="text-center text-muted-foreground py-8"
+              >
+                {{ noDataText() }}
+              </td>
+            </tr>
+          } @else {
+            @let cellDefs = cellDefMap();
+            @let cols = visibleColumns();
+            @let expandTpl = rowExpandDef();
+            @for (row of paginatedData(); track trackByFn(row, $index)) {
+              <tr
+                snyTableRow
+                [attr.data-state]="isSelected(row) ? 'selected' : null"
+                (click)="onRowClick(row)"
+                class="cursor-pointer"
+              >
+                @if (selectable()) {
+                  <td snyTableCell class="w-12">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="isSelected(row)"
+                      (change)="toggleRowSelection(row)"
+                      (click)="$event.stopPropagation()"
+                    />
+                  </td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10">
+                    <button
+                      class="p-0.5 rounded hover:bg-accent transition-transform duration-150"
+                      [class.rotate-90]="isExpanded(row)"
+                      (click)="toggleRowExpansion(row); $event.stopPropagation()"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                    </button>
+                  </td>
+                }
+                @for (col of cols; track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    @if (cellDefs.has(col.key)) {
+                      <ng-container
+                        [ngTemplateOutlet]="cellDefs.get(col.key)!"
+                        [ngTemplateOutletContext]="{ $implicit: row[col.key], row: row }"
+                      />
+                    } @else {
+                      {{ row[col.key] }}
+                    }
+                  </td>
+                }
+              </tr>
+              @if (expandable() && isExpanded(row) && expandTpl) {
+                <tr snyTableRow>
+                  <td snyTableCell [attr.colspan]="totalColSpan()" class="bg-muted/30">
+                    <ng-container
+                      [ngTemplateOutlet]="expandTpl.template"
+                      [ngTemplateOutletContext]="{ $implicit: row }"
+                    />
+                  </td>
+                </tr>
+              }
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer -->
+    @if (paginated()) {
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4 gap-3 sm:gap-4">
+        <span class="text-sm text-muted-foreground">
+          @if (selectable()) {
+            {{ selectedRows().length }} of {{ filteredData().length }} row(s) selected
+          } @else {
+            {{ filteredData().length }} row(s)
+          }
+        </span>
+        <div class="flex items-center gap-3 sm:gap-4 flex-wrap">
+          <div class="flex items-center gap-2">
+            <span class="hidden sm:inline text-sm text-muted-foreground whitespace-nowrap">Rows per page</span>
+            <sny-select
+              [options]="pageSizeOptions()"
+              [value]="pageSizeValue()"
+              (valueChange)="onPageSizeChange($event)"
+              size="sm"
+              class="w-20"
+            />
+          </div>
+          <sny-pagination
+            [currentPage]="currentPage()"
+            (currentPageChange)="currentPage.set($event)"
+            [totalPages]="totalPages()"
+          />
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], showColumnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnToggle", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], paginationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationConfig", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], dataExported: [{ type: i0.Output, args: ["dataExported"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyCellDefDirective), { isSignal: true }] }], headerCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyHeaderCellDefDirective), { isSignal: true }] }], bulkActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SnyBulkActionsDefDirective), { isSignal: true }] }], rowExpandDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SnyRowExpandDefDirective), { isSignal: true }] }] } });
+
+class SnySheetRef {
+    cdkRef;
+    constructor(cdkRef) {
+        this.cdkRef = cdkRef;
+    }
+    close(result) {
+        this.cdkRef.close(result);
+    }
+    get closed() {
+        return this.cdkRef.closed;
+    }
+}
+
+const DEFAULT_SHEET_CONFIG = {
+    side: 'right',
+    closeOnBackdrop: true,
+    closeOnEsc: true,
+};
+const SHEET_PANEL_CLASS = {
+    right: 'sny-sheet-right',
+    left: 'sny-sheet-left',
+    top: 'sny-sheet-top',
+    bottom: 'sny-sheet-bottom',
+};
+
+const SNY_SHEET_DATA = new InjectionToken('SNY_SHEET_DATA');
+class SnySheetService {
+    cdkDialog = inject(Dialog);
+    injector = inject(Injector);
+    open(component, config = {}) {
+        const merged = { ...DEFAULT_SHEET_CONFIG, ...config };
+        const side = merged.side ?? 'right';
+        const disableClose = !merged.closeOnBackdrop || !merged.closeOnEsc;
+        const overlay = this._getOverlayConfig(side);
+        const cdkRef = this.cdkDialog.open(component, {
+            disableClose,
+            hasBackdrop: true,
+            backdropClass: 'sny-dialog-backdrop',
+            panelClass: ['sny-sheet-panel', SHEET_PANEL_CLASS[side]],
+            positionStrategy: overlay.positionStrategy,
+            width: overlay.width,
+            maxWidth: overlay.maxWidth,
+            height: overlay.height,
+            maxHeight: overlay.maxHeight,
+            ariaLabelledBy: merged.ariaLabelledBy,
+            ariaDescribedBy: merged.ariaDescribedBy,
+            data: merged.data,
+            providers: merged.data != null
+                ? [{ provide: SNY_SHEET_DATA, useValue: merged.data }]
+                : [],
+        });
+        if (disableClose) {
+            if (merged.closeOnBackdrop) {
+                const sub = cdkRef.backdropClick.subscribe(() => cdkRef.close());
+                cdkRef.closed.subscribe(() => sub.unsubscribe());
+            }
+            if (merged.closeOnEsc) {
+                const sub = cdkRef.keydownEvents.subscribe(event => {
+                    if (event.key === 'Escape')
+                        cdkRef.close();
+                });
+                cdkRef.closed.subscribe(() => sub.unsubscribe());
+            }
+        }
+        return new SnySheetRef(cdkRef);
+    }
+    closeAll() {
+        this.cdkDialog.closeAll();
+    }
+    _getOverlayConfig(side) {
+        const strategy = createGlobalPositionStrategy(this.injector);
+        switch (side) {
+            case 'right':
+                return {
+                    positionStrategy: strategy.top('0').right('0'),
+                    width: '75%',
+                    maxWidth: '24rem',
+                    height: '100vh',
+                    maxHeight: '100vh',
+                };
+            case 'left':
+                return {
+                    positionStrategy: strategy.top('0').left('0'),
+                    width: '75%',
+                    maxWidth: '24rem',
+                    height: '100vh',
+                    maxHeight: '100vh',
+                };
+            case 'top':
+                return {
+                    positionStrategy: strategy.top('0').centerHorizontally(),
+                    width: '100vw',
+                    maxWidth: '100vw',
+                };
+            case 'bottom':
+                return {
+                    positionStrategy: strategy.bottom('0').centerHorizontally(),
+                    width: '100vw',
+                    maxWidth: '100vw',
+                };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SnySheetHeaderDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex flex-col space-y-2', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetHeaderDirective, isStandalone: true, selector: "[snySheetHeader]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snySheetHeader]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnySheetTitleDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-lg font-semibold text-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetTitleDirective, isStandalone: true, selector: "[snySheetTitle]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snySheetTitle]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnySheetDescriptionDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetDescriptionDirective, isStandalone: true, selector: "[snySheetDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snySheetDescription]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnySheetContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('py-4', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetContentDirective, isStandalone: true, selector: "[snySheetContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snySheetContent]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnySheetCloseDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    dialogRef = inject(DialogRef, { optional: true });
+    onClick() {
+        this.dialogRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySheetCloseDirective, isStandalone: true, selector: "[snySheetClose]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snySheetClose]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const alertVariants = cva('relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', {
+    variants: {
+        variant: {
+            default: 'bg-background text-foreground border-border',
+            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10',
+            success: 'border-green-500/50 text-green-700 dark:text-green-400 dark:border-green-500 [&>svg]:text-green-600 bg-green-50 dark:bg-green-950/30',
+            warning: 'border-yellow-500/50 text-yellow-700 dark:text-yellow-400 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-50 dark:bg-yellow-950/30',
+            info: 'border-blue-500/50 text-blue-700 dark:text-blue-400 dark:border-blue-500 [&>svg]:text-blue-600 bg-blue-50 dark:bg-blue-950/30',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+class SnyAlertDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        const v = this.variant();
+        return v === 'destructive' || v === 'warning' || v === 'info' ? 'alert' : 'status';
+    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    ariaLive = computed(() => {
+        const v = this.variant();
+        return v === 'destructive' || v === 'warning' ? 'assertive' : 'polite';
+    }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(alertVariants({ variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    dismiss() {
+        this.visible.set(false);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAlertDirective, isStandalone: true, selector: "[snyAlert]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.role": "role()", "attr.aria-live": "ariaLive()", "style.display": "visible() ? null : \"none\"" } }, exportAs: ["snyAlert"], ngImport: i0 });
 }
@@ -2966,200 +4062,39 @@ class SnyTooltipDirective {
                 top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
                 left = hostRect.left - tooltipRect.width - gap;
                 break;
-            case 'right':
-                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-                left = hostRect.right + gap;
-                break;
-        }
-        this.tooltipEl.style.top = `${top}px`;
-        this.tooltipEl.style.left = `${left}px`;
-    }
-    destroyTooltip() {
-        if (this.tooltipEl) {
-            this.tooltipEl.remove();
-            this.tooltipEl = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTooltipDirective, isStandalone: true, selector: "[snyTooltip]", inputs: { snyTooltip: { classPropertyName: "snyTooltip", publicName: "snyTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()", "keydown.escape": "hide()" }, properties: { "attr.aria-describedby": "isOpen() ? tooltipId : null" } }, exportAs: ["snyTooltip"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyTooltip]',
-                    standalone: true,
-                    exportAs: 'snyTooltip',
-                    host: {
-                        '(mouseenter)': 'show()',
-                        '(mouseleave)': 'hide()',
-                        '(focus)': 'show()',
-                        '(blur)': 'hide()',
-                        '(keydown.escape)': 'hide()',
-                        '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { snyTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelay", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-const dropdownContentVariants = cva('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', {
-    variants: {},
-    defaultVariants: {},
-});
-const dropdownItemVariants = cva('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[active]:bg-accent data-[active]:text-accent-foreground', {
-    variants: {
-        variant: {
-            default: '',
-            destructive: 'text-destructive data-[active]:bg-destructive/10 data-[active]:text-destructive',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-
-const SNY_DROPDOWN = new InjectionToken('SnyDropdown');
-class SnyDropdownDirective {
-    elementRef = inject(ElementRef);
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    toggle() { this.isOpen.update((v) => !v); }
-    open() { this.isOpen.set(true); }
-    close() { this.isOpen.set(false); }
-    onDocumentClick(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.close();
-        }
-    }
-    onEscape() {
-        this.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyDropdownDirective, isStandalone: true, selector: "[snyDropdown]", host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, properties: { "class": "\"relative inline-block\"" } }, providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }], exportAs: ["snyDropdown"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyDropdown]',
-                    standalone: true,
-                    exportAs: 'snyDropdown',
-                    providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
-                    host: {
-                        '[class]': '"relative inline-block"',
-                    },
-                }]
-        }], propDecorators: { onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], onEscape: [{
-                type: HostListener,
-                args: ['keydown.escape']
-            }] } });
-class SnyDropdownTriggerDirective {
-    dropdown = inject(SNY_DROPDOWN);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyDropdownTriggerDirective, isStandalone: true, selector: "[snyDropdownTrigger]", host: { listeners: { "click": "dropdown.toggle()" }, properties: { "attr.aria-expanded": "dropdown.isOpen()", "attr.aria-haspopup": "\"menu\"" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyDropdownTrigger]',
-                    standalone: true,
-                    host: {
-                        '(click)': 'dropdown.toggle()',
-                        '[attr.aria-expanded]': 'dropdown.isOpen()',
-                        '[attr.aria-haspopup]': '"menu"',
-                    },
-                }]
-        }] });
-class SnyDropdownContentDirective {
-    dropdown = inject(SNY_DROPDOWN);
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(dropdownContentVariants(), 'absolute mt-1 left-0 animate-in fade-in-0 zoom-in-95', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDropdownContentDirective, isStandalone: true, selector: "[snyDropdownContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu" }, properties: { "class": "computedClass()", "style.display": "dropdown.isOpen() ? \"\" : \"none\"" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyDropdownContent]',
-                    standalone: true,
-                    host: {
-                        'role': 'menu',
-                        '[class]': 'computedClass()',
-                        '[style.display]': 'dropdown.isOpen() ? "" : "none"',
-                    },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnyMenuContentDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(dropdownContentVariants(), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuContentDirective, isStandalone: true, selector: "[snyMenuContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyMenuContent]',
-                    standalone: true,
-                    host: {
-                        '[class]': 'computedClass()',
-                    },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnyMenuItemDirective {
-    dropdown = inject(SNY_DROPDOWN, { optional: true });
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn(dropdownItemVariants({ variant: this.variant() }), 'cursor-pointer hover:bg-accent hover:text-accent-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    onClick() {
-        this.dropdown?.close();
+            case 'right':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.right + gap;
+                break;
+        }
+        this.tooltipEl.style.top = `${top}px`;
+        this.tooltipEl.style.left = `${left}px`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuItemDirective, isStandalone: true, selector: "[snyMenuItem]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick()" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyMenuItem]',
-                    standalone: true,
-                    host: {
-                        'role': 'menuitem',
-                        '[class]': 'computedClass()',
-                        '(click)': 'onClick()',
-                    },
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnyMenuSeparatorDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuSeparatorDirective, isStandalone: true, selector: "[snyMenuSeparator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuSeparatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[snyMenuSeparator]',
-                    standalone: true,
-                    host: {
-                        'role': 'separator',
-                        '[class]': 'computedClass()',
-                    },
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class SnyMenuLabelDirective {
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    computedClass = computed(() => cn('px-2 py-1.5 text-sm font-semibold', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuLabelDirective, isStandalone: true, selector: "[snyMenuLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+    destroyTooltip() {
+        if (this.tooltipEl) {
+            this.tooltipEl.remove();
+            this.tooltipEl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTooltipDirective, isStandalone: true, selector: "[snyTooltip]", inputs: { snyTooltip: { classPropertyName: "snyTooltip", publicName: "snyTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()", "keydown.escape": "hide()" }, properties: { "attr.aria-describedby": "isOpen() ? tooltipId : null" } }, exportAs: ["snyTooltip"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[snyMenuLabel]',
+                    selector: '[snyTooltip]',
                     standalone: true,
+                    exportAs: 'snyTooltip',
                     host: {
-                        '[class]': 'computedClass()',
+                        '(mouseenter)': 'show()',
+                        '(mouseleave)': 'hide()',
+                        '(focus)': 'show()',
+                        '(blur)': 'hide()',
+                        '(keydown.escape)': 'hide()',
+                        '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
                     },
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { snyTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelay", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const fileInputVariants = cva('flex w-full cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', {
     variants: {
@@ -3197,19 +4132,7 @@ class SnyFileInputComponent {
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? null);
     }
     registerOnChange(fn) {
@@ -3255,6 +4178,7 @@ class SnyFileInputComponent {
     }
     clear() {
         this.value.set(null);
+        this._onChange(null);
         const inputEl = this.fileInputRef()?.nativeElement;
         if (inputEl)
             inputEl.value = '';
@@ -3270,6 +4194,7 @@ class SnyFileInputComponent {
             }
         }
         this.value.set(files);
+        this._onChange(files);
         this.fileChange.emit(files);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3333,7 +4258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </label>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], error: [{ type: i0.Output, args: ["error"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], error: [{ type: i0.Output, args: ["error"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 const fieldsetVariants = cva('space-y-4', {
     variants: {
@@ -3426,19 +4351,7 @@ class SnyRatingComponent {
     hoverValue = signal(null, ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? 0);
     }
     registerOnChange(fn) {
@@ -3484,6 +4397,7 @@ class SnyRatingComponent {
         if (this.isDisabled())
             return;
         this.value.set(index);
+        this._onChange(index);
     }
     onStarHover(index) {
         if (this.isDisabled())
@@ -3497,26 +4411,31 @@ class SnyRatingComponent {
         if (this.isDisabled())
             return;
         const step = this.half() ? 0.5 : 1;
+        let newVal;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowUp':
                 event.preventDefault();
-                this.value.update((v) => Math.min(this.max(), v + step));
+                newVal = Math.min(this.max(), this.value() + step);
                 break;
             case 'ArrowLeft':
             case 'ArrowDown':
                 event.preventDefault();
-                this.value.update((v) => Math.max(0, v - step));
+                newVal = Math.max(0, this.value() - step);
                 break;
             case 'Home':
                 event.preventDefault();
-                this.value.set(0);
+                newVal = 0;
                 break;
             case 'End':
                 event.preventDefault();
-                this.value.set(this.max());
+                newVal = this.max();
                 break;
         }
+        if (newVal !== undefined) {
+            this.value.set(newVal);
+            this._onChange(newVal);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyRatingComponent, isStandalone: true, selector: "sny-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ratingVariant: { classPropertyName: "ratingVariant", publicName: "ratingVariant", isSignal: true, isRequired: false, transformFunction: null }, half: { classPropertyName: "half", publicName: "half", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "mouseleave": "onMouseLeave()", "blur": "onTouched()" }, properties: { "attr.aria-valuenow": "value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-label": "\"Rating\"", "attr.aria-readonly": "readonly() || null", "class": "computedClass()" } }, providers: [
@@ -3579,7 +4498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingVariant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingVariant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SnyNavbarDirective {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -3744,180 +4663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const paginationItemVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', {
-    variants: {
-        variant: {
-            default: 'bg-background hover:bg-accent hover:text-accent-foreground',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-        },
-        size: {
-            sm: 'h-8 w-8 text-xs',
-            md: 'h-9 w-9',
-            lg: 'h-10 w-10',
-        },
-        active: {
-            true: 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
-            false: '',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'md',
-        active: false,
-    },
-});
-
-function computePageRange(totalPages, currentPage, siblingCount, boundaryCount) {
-    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    const startPages = range(1, Math.min(boundaryCount, totalPages));
-    const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
-    const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
-    const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
-    const result = [...startPages];
-    if (siblingsStart > boundaryCount + 2) {
-        result.push('ellipsis');
-    }
-    else if (boundaryCount + 1 < totalPages - boundaryCount) {
-        result.push(boundaryCount + 1);
-    }
-    result.push(...range(siblingsStart, siblingsEnd));
-    if (siblingsEnd < totalPages - boundaryCount - 1) {
-        result.push('ellipsis');
-    }
-    else if (totalPages - boundaryCount > boundaryCount) {
-        result.push(totalPages - boundaryCount);
-    }
-    result.push(...endPages);
-    return [...new Set(result)].sort((a, b) => {
-        if (a === 'ellipsis')
-            return 0;
-        if (b === 'ellipsis')
-            return 0;
-        return a - b;
-    });
-}
-class SnyPaginationComponent {
-    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
-    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
-    boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    pages = computed(() => computePageRange(this.totalPages(), this.currentPage(), this.siblingCount(), this.boundaryCount()), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
-    hasPrev = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
-    hasNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
-    goToPage(page) {
-        if (page === 'ellipsis')
-            return;
-        this.currentPage.set(page);
-    }
-    prev() {
-        if (this.hasPrev())
-            this.currentPage.update((p) => p - 1);
-    }
-    next() {
-        if (this.hasNext())
-            this.currentPage.update((p) => p + 1);
-    }
-    pageClass(page) {
-        return cn(paginationItemVariants({
-            variant: this.variant(),
-            size: this.size(),
-            active: page === this.currentPage(),
-        }));
-    }
-    navBtnClass() {
-        return cn(paginationItemVariants({ variant: this.variant(), size: this.size(), active: false }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyPaginationComponent, isStandalone: true, selector: "sny-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange" }, host: { attributes: { "role": "navigation", "aria-label": "Pagination" } }, ngImport: i0, template: `
-    <div class="flex items-center gap-1">
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasPrev()"
-        [attr.aria-label]="'Go to previous page'"
-        (click)="prev()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
-      </button>
-
-      @for (page of pages(); track $index) {
-        @if (page === 'ellipsis') {
-          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
-        } @else {
-          <button
-            [class]="pageClass(page)"
-            [attr.aria-label]="'Page ' + page"
-            [attr.aria-current]="page === currentPage() ? 'page' : null"
-            (click)="goToPage(page)"
-          >
-            {{ page }}
-          </button>
-        }
-      }
-
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasNext()"
-        [attr.aria-label]="'Go to next page'"
-        (click)="next()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-      </button>
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sny-pagination',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'role': 'navigation',
-                        'aria-label': 'Pagination',
-                    },
-                    template: `
-    <div class="flex items-center gap-1">
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasPrev()"
-        [attr.aria-label]="'Go to previous page'"
-        (click)="prev()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
-      </button>
-
-      @for (page of pages(); track $index) {
-        @if (page === 'ellipsis') {
-          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
-        } @else {
-          <button
-            [class]="pageClass(page)"
-            [attr.aria-label]="'Page ' + page"
-            [attr.aria-current]="page === currentPage() ? 'page' : null"
-            (click)="goToPage(page)"
-          >
-            {{ page }}
-          </button>
-        }
-      }
-
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasNext()"
-        [attr.aria-label]="'Go to next page'"
-        (click)="next()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-      </button>
-    </div>
-  `,
-                }]
-        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 const dividerVariants = cva('shrink-0 bg-border', {
     variants: {
         orientation: {
@@ -5104,19 +5849,7 @@ class SnyCalendarComponent {
     weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
     _onChange = () => { };
     onTouched = () => { };
-    _writing = false;
-    constructor() {
-        effect(() => {
-            const val = this.value();
-            if (this._writing) {
-                this._writing = false;
-                return;
-            }
-            this._onChange(val);
-        });
-    }
     writeValue(val) {
-        this._writing = true;
         this.value.set(val ?? null);
         if (val) {
             this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
@@ -5174,6 +5907,7 @@ class SnyCalendarComponent {
     }
     selectDate(date) {
         this.value.set(date);
+        this._onChange(date);
         this.onTouched();
     }
     onKeydown(event) {
@@ -5205,6 +5939,7 @@ class SnyCalendarComponent {
         const next = new Date(current);
         next.setDate(next.getDate() + offset);
         this.value.set(next);
+        this._onChange(next);
         this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
     }
     createDay(date, isCurrentMonth, today, selected, minDate, maxDate) {
@@ -5311,7 +6046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SnyValidatorDirective {
     control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
@@ -5372,5 +6107,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyComboboxComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyPaginationComponent, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, comboboxTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, inputVariants, kbdVariants, labelVariants, linkVariants, loaderVariants, paginationItemVariants, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
+export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyBulkActionsDefDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyCellDefDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyComboboxComponent, SnyDataTableComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyPaginationComponent, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, comboboxTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, inputVariants, kbdVariants, labelVariants, linkVariants, loaderVariants, paginationItemVariants, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
 //# sourceMappingURL=sonny-ui-core.mjs.map