angular-tailwind-components 1.7.0 → 1.8.0

package/fesm2022/angular-tailwind-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, TemplateRef, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, Injector, DestroyRef, afterNextRender, createComponent, output, model, forwardRef, viewChildren, effect, contentChildren, contentChild, Injectable, booleanAttribute, makeEnvironmentProviders, provideAppInitializer, PLATFORM_ID } from '@angular/core';
+import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, ChangeDetectionStrategy, Component, ViewContainerRef, HostListener, TemplateRef, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, Injector, DestroyRef, afterNextRender, createComponent, output, model, forwardRef, viewChildren, ChangeDetectorRef, effect, contentChild, contentChildren, Injectable, booleanAttribute, makeEnvironmentProviders, provideAppInitializer, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule, isPlatformBrowser } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -464,57 +464,99 @@ class TailwindTooltip extends TailwindComponent {
         window.removeEventListener('resize', this.scrollListener, true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTooltip, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindTooltip, isStandalone: true, selector: "tailwind-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipEl", first: true, predicate: ["tooltipEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #tooltipEl role=\"tooltip\" [class]=\"tooltipClasses()\" \n     [style.top.px]=\"topPos()\" \n     [style.left.px]=\"leftPos()\">\n  {{ text() }}\n  <!-- Arrow -->\n  <div [class]=\"arrowClasses()\"></div>\n</div>\n", styles: [":host{display:inline-flex}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindTooltip, isStandalone: true, selector: "tailwind-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipEl", first: true, predicate: ["tooltipEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #tooltipEl role=\"tooltip\" [class]=\"tooltipClasses()\" [style.top.px]=\"topPos()\" [style.left.px]=\"leftPos()\">\n  {{ text() }}\n  <!-- Arrow -->\n  <div [class]=\"arrowClasses()\"></div>\n</div>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTooltip, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-tooltip', template: "<div #tooltipEl role=\"tooltip\" [class]=\"tooltipClasses()\" \n     [style.top.px]=\"topPos()\" \n     [style.left.px]=\"leftPos()\">\n  {{ text() }}\n  <!-- Arrow -->\n  <div [class]=\"arrowClasses()\"></div>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: 'tailwind-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tooltipEl role=\"tooltip\" [class]=\"tooltipClasses()\" [style.top.px]=\"topPos()\" [style.left.px]=\"leftPos()\">\n  {{ text() }}\n  <!-- Arrow -->\n  <div [class]=\"arrowClasses()\"></div>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], tooltipEl: [{ type: i0.ViewChild, args: ['tooltipEl', { isSignal: true }] }] } });
 
 class TailwindTooltipDirective {
-    text;
-    tooltipPosition = 'top';
+    /** Tooltip text */
+    tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    /** Position relative to the trigger */
+    tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     showTimeout = null;
     hideTimeout = null;
     componentRef = null;
     viewContainerRef = inject(ViewContainerRef);
     el = inject(ElementRef);
+    get host() {
+        return this.el.nativeElement;
+    }
     show() {
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
-        }
+        this.clearHideTimeout();
         if (this.componentRef) {
+            this.updateTooltipComponent();
+            this.componentRef.instance.show();
+            return;
+        }
+        if (this.showTimeout) {
             return;
         }
         this.showTimeout = setTimeout(() => {
+            this.showTimeout = null;
             this.createComponent();
         }, 200);
     }
-    hide() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = null;
+    hideFromPointer() {
+        this.hide();
+    }
+    hideFromFocus(event) {
+        const related = event.relatedTarget;
+        if (related && this.host.contains(related)) {
+            return;
         }
+        queueMicrotask(() => {
+            if (!this.host.contains(document.activeElement)) {
+                this.hide();
+            }
+        });
+    }
+    hide() {
+        this.clearShowTimeout();
         if (!this.componentRef) {
             return;
         }
         this.componentRef.instance.hide();
         this.hideTimeout = setTimeout(() => {
+            this.hideTimeout = null;
             this.destroyComponent();
         }, 150);
     }
+    clearShowTimeout() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
     createComponent() {
+        if (this.componentRef) {
+            this.destroyComponent();
+        }
         this.componentRef = this.viewContainerRef.createComponent(TailwindTooltip);
-        this.componentRef.setInput('text', this.text);
-        this.componentRef.setInput('position', this.tooltipPosition);
-        this.componentRef.instance.setTarget(this.el.nativeElement);
+        this.updateTooltipComponent();
         setTimeout(() => {
             if (this.componentRef) {
                 this.componentRef.instance.show();
             }
         });
     }
+    updateTooltipComponent() {
+        if (!this.componentRef) {
+            return;
+        }
+        this.componentRef.setInput('text', this.tooltip());
+        this.componentRef.setInput('position', this.tooltipPosition());
+        this.componentRef.instance.setTarget(this.host);
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
     destroyComponent() {
         if (this.componentRef) {
             this.componentRef.destroy();
@@ -522,37 +564,31 @@ class TailwindTooltipDirective {
         }
     }
     ngOnDestroy() {
-        if (this.showTimeout)
-            clearTimeout(this.showTimeout);
-        if (this.hideTimeout)
-            clearTimeout(this.hideTimeout);
+        this.clearShowTimeout();
+        this.clearHideTimeout();
         this.destroyComponent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.12", type: TailwindTooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { text: ["tooltip", "text"], tooltipPosition: "tooltipPosition" }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide()", "focusout": "hide()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindTooltipDirective, isStandalone: true, selector: "[tooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hideFromPointer()", "focusout": "hideFromFocus($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tooltip]'
+                    selector: '[tooltip]',
+                    standalone: true
                 }]
-        }], propDecorators: { text: [{
-                type: Input,
-                args: ['tooltip']
-            }], tooltipPosition: [{
-                type: Input
-            }], show: [{
+        }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], show: [{
                 type: HostListener,
                 args: ['mouseenter']
             }, {
                 type: HostListener,
                 args: ['focusin']
-            }], hide: [{
+            }], hideFromPointer: [{
                 type: HostListener,
                 args: ['mouseleave']
-            }, {
+            }], hideFromFocus: [{
                 type: HostListener,
-                args: ['focusout']
+                args: ['focusout', ['$event']]
             }] } });
 
 /**
@@ -601,14 +637,22 @@ class TailwindIcon extends TailwindComponent {
     size = input(clampIconSize(this.iconSize ?? 24), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     src = computed(() => `/tailwind-icons/${this.icon()}.svg`, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     pixelSize = computed(() => clampIconSize(this.size()), ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* istanbul ignore next */ []));
+    /** Layout-only; custom `class` is applied to the inner glyph (color, spacing, etc.). */
+    hostClasses = computed(() => 'inline-flex shrink-0 items-center justify-center', ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    /** Tailwind classes from `class` input, merged with the masked glyph base. */
+    glyphClasses = computed(() => {
+        const custom = this.class();
+        return custom ? `tailwind-icon-glyph ${custom}` : 'tailwind-icon-glyph';
+    }, ...(ngDevMode ? [{ debugName: "glyphClasses" }] : /* istanbul ignore next */ []));
+    maskImage = computed(() => `url("${this.src()}")`, ...(ngDevMode ? [{ debugName: "maskImage" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindIcon, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindIcon, isStandalone: true, selector: "tailwind-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex shrink-0 items-center justify-center" }, usesInheritance: true, ngImport: i0, template: "<img\r\n  class=\"block shrink-0\"\r\n  [src]=\"src()\"\r\n  [attr.width]=\"pixelSize()\"\r\n  [attr.height]=\"pixelSize()\"\r\n  [attr.alt]=\"icon()\"\r\n  [attr.aria-hidden]=\"true\"\r\n  decoding=\"async\" />\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindIcon, isStandalone: true, selector: "tailwind-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, usesInheritance: true, ngImport: i0, template: "<span\n  [class]=\"glyphClasses()\"\n  [style.width.px]=\"pixelSize()\"\n  [style.height.px]=\"pixelSize()\"\n  [style.mask-image]=\"maskImage()\"\n  [style.-webkit-mask-image]=\"maskImage()\"\n  [attr.aria-hidden]=\"true\"\n  [attr.aria-label]=\"icon()\"></span>\n", styles: [".tailwind-icon-glyph{display:block;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindIcon, decorators: [{
             type: Component,
             args: [{ selector: 'tailwind-icon', host: {
-                        class: 'inline-flex shrink-0 items-center justify-center'
-                    }, template: "<img\r\n  class=\"block shrink-0\"\r\n  [src]=\"src()\"\r\n  [attr.width]=\"pixelSize()\"\r\n  [attr.height]=\"pixelSize()\"\r\n  [attr.alt]=\"icon()\"\r\n  [attr.aria-hidden]=\"true\"\r\n  decoding=\"async\" />\r\n" }]
+                        '[class]': 'hostClasses()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [class]=\"glyphClasses()\"\n  [style.width.px]=\"pixelSize()\"\n  [style.height.px]=\"pixelSize()\"\n  [style.mask-image]=\"maskImage()\"\n  [style.-webkit-mask-image]=\"maskImage()\"\n  [attr.aria-hidden]=\"true\"\n  [attr.aria-label]=\"icon()\"></span>\n", styles: [".tailwind-icon-glyph{display:block;flex-shrink:0;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /** Host attributes on `<tailwind-table>`; kept in sync for sort-header observers. */
@@ -704,12 +748,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: true }] }] } });
 
+const iconPixelSizeMap = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22
+};
+/** Always transparent background; no tint on hover, focus, or active. */
+const transparentColorClasses = 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent border-transparent shadow-none text-neutral-500 focus-visible:outline-neutral-400';
 class TailwindButton extends TailwindComponent {
     defaultKind = inject(TAILWIND_BUTTON_KIND, { optional: true });
     /** Visual color */
     color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /**
-     * Visual kind: `flat` = filled like `solid` without border or shadow;
+     * Visual kind: `flat` = filled like `solid` without border, shadow, or hover/active background change;
      * `ghost` = transparent with hover tint; `text` = text color only, no hover background.
      * Default from {@link TAILWIND_BUTTON_KIND} or `'solid'`.
      */
@@ -720,12 +773,21 @@ class TailwindButton extends TailwindComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** HTML button type attribute */
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** ARIA role attribute */
+    role = input('button', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Optional Heroicons outline icon inside the button */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Icon placement when both icon and label are shown */
+    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /** Accessible name for icon-only buttons */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Emitted when the button is clicked (not disabled). */
     onClick = output();
+    iconPixelSize = computed(() => iconPixelSizeMap[this.size()], ...(ngDevMode ? [{ debugName: "iconPixelSize" }] : /* istanbul ignore next */ []));
     /** Computed Tailwind classes based on color, kind, size, and state */
     computedClasses = computed(() => {
         const base = [
-            'inline-flex items-center justify-center gap-2',
+            'inline-flex items-center justify-center',
             'font-medium',
             'transition-all duration-150 ease-in-out',
             'focus-visible:outline-2 focus-visible:outline-offset-2',
@@ -739,16 +801,18 @@ class TailwindButton extends TailwindComponent {
             danger: 'bg-danger-600 text-on-danger-600 hover:bg-danger-700 hover:text-on-danger-700 active:bg-danger-800 active:text-on-danger-800 border-transparent focus-visible:outline-danger-600 shadow-sm',
             success: 'bg-success-600 text-on-success-600 hover:bg-success-700 hover:text-on-success-700 active:bg-success-800 active:text-on-success-800 border-transparent focus-visible:outline-success-600 shadow-sm',
             warning: 'bg-warning-500 text-on-warning-500 hover:bg-warning-600 hover:text-on-warning-600 active:bg-warning-700 active:text-on-warning-700 border-transparent focus-visible:outline-warning-500 shadow-sm',
-            info: 'bg-info-600 text-on-info-600 hover:bg-info-700 hover:text-on-info-700 active:bg-info-800 active:text-on-info-800 border-transparent focus-visible:outline-info-600 shadow-sm'
+            info: 'bg-info-600 text-on-info-600 hover:bg-info-700 hover:text-on-info-700 active:bg-info-800 active:text-on-info-800 border-transparent focus-visible:outline-info-600 shadow-sm',
+            transparent: transparentColorClasses
         };
-        /** Filled surface like `solid`, without box shadow or visible border. */
+        /** Filled surface like `solid`, without box shadow, border, or hover/active tint. */
         const flatMap = {
-            primary: 'bg-primary-600 text-on-primary-600 hover:bg-primary-700 hover:text-on-primary-700 active:bg-primary-800 active:text-on-primary-800 border-0 shadow-none focus-visible:outline-primary-600',
-            secondary: 'bg-neutral-100 text-neutral-800 hover:bg-neutral-200 active:bg-neutral-300 border-0 shadow-none focus-visible:outline-neutral-500',
-            danger: 'bg-danger-600 text-on-danger-600 hover:bg-danger-700 hover:text-on-danger-700 active:bg-danger-800 active:text-on-danger-800 border-0 shadow-none focus-visible:outline-danger-600',
-            success: 'bg-success-600 text-on-success-600 hover:bg-success-700 hover:text-on-success-700 active:bg-success-800 active:text-on-success-800 border-0 shadow-none focus-visible:outline-success-600',
-            warning: 'bg-warning-500 text-on-warning-500 hover:bg-warning-600 hover:text-on-warning-600 active:bg-warning-700 active:text-on-warning-700 border-0 shadow-none focus-visible:outline-warning-500',
-            info: 'bg-info-600 text-on-info-600 hover:bg-info-700 hover:text-on-info-700 active:bg-info-800 active:text-on-info-800 border-0 shadow-none focus-visible:outline-info-600'
+            primary: 'bg-primary-600 text-on-primary-600 border-0 shadow-none focus-visible:outline-primary-600',
+            secondary: 'bg-neutral-100 text-neutral-800 border-0 shadow-none focus-visible:outline-neutral-500',
+            danger: 'bg-danger-600 text-on-danger-600 border-0 shadow-none focus-visible:outline-danger-600',
+            success: 'bg-success-600 text-on-success-600 border-0 shadow-none focus-visible:outline-success-600',
+            warning: 'bg-warning-500 text-on-warning-500 border-0 shadow-none focus-visible:outline-warning-500',
+            info: 'bg-info-600 text-on-info-600 border-0 shadow-none focus-visible:outline-info-600',
+            transparent: transparentColorClasses
         };
         const outlinedMap = {
             primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
@@ -756,7 +820,8 @@ class TailwindButton extends TailwindComponent {
             danger: 'bg-transparent text-danger-600 border-danger-600 hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
             success: 'bg-transparent text-success-600 border-success-600 hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
             warning: 'bg-transparent text-warning-600 border-warning-500 hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-500',
-            info: 'bg-transparent text-info-600 border-info-600 hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600'
+            info: 'bg-transparent text-info-600 border-info-600 hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600',
+            transparent: transparentColorClasses
         };
         /** Transparent + hover/active background tint (former `text` look). */
         const ghostMap = {
@@ -765,7 +830,8 @@ class TailwindButton extends TailwindComponent {
             danger: 'bg-transparent text-danger-600 border-transparent hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
             success: 'bg-transparent text-success-600 border-transparent hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
             warning: 'bg-transparent text-warning-600 border-transparent hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-500',
-            info: 'bg-transparent text-info-600 border-transparent hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600'
+            info: 'bg-transparent text-info-600 border-transparent hover:bg-info-50 active:bg-info-100 focus-visible:outline-info-600',
+            transparent: transparentColorClasses
         };
         /** Text color from severity only; background stays transparent on hover/active. */
         const textMap = {
@@ -774,7 +840,8 @@ class TailwindButton extends TailwindComponent {
             danger: 'bg-transparent text-danger-600 border-transparent focus-visible:outline-danger-600',
             success: 'bg-transparent text-success-600 border-transparent focus-visible:outline-success-600',
             warning: 'bg-transparent text-warning-600 border-transparent focus-visible:outline-warning-500',
-            info: 'bg-transparent text-info-600 border-transparent focus-visible:outline-info-600'
+            info: 'bg-transparent text-info-600 border-transparent focus-visible:outline-info-600',
+            transparent: transparentColorClasses
         };
         const styleMap = {
             solid: solidMap,
@@ -790,14 +857,17 @@ class TailwindButton extends TailwindComponent {
             lg: 'text-base px-5 py-2.5 rounded-lg',
             xl: 'text-base px-6 py-3 rounded-lg'
         };
-        const iconSizeMap = {
-            xs: 'p-1 rounded-sm',
-            sm: 'p-1.5 rounded-md',
-            md: 'p-2 rounded-md',
-            lg: 'p-2.5 rounded-lg',
-            xl: 'p-3 rounded-lg'
+        /** Square padding when `icon` is set and projected label is empty (icon-only). */
+        const iconOnlySizeMap = {
+            xs: 'has-[.tailwind-button-label:empty]:p-1 has-[.tailwind-button-label:empty]:px-1',
+            sm: 'has-[.tailwind-button-label:empty]:p-1.5 has-[.tailwind-button-label:empty]:px-1.5',
+            md: 'has-[.tailwind-button-label:empty]:p-2 has-[.tailwind-button-label:empty]:px-2',
+            lg: 'has-[.tailwind-button-label:empty]:p-2.5 has-[.tailwind-button-label:empty]:px-2.5',
+            xl: 'has-[.tailwind-button-label:empty]:p-3 has-[.tailwind-button-label:empty]:px-3'
         };
-        return [...base, styleMap[this.kind()][this.color()] || styleMap['solid']['primary'], sizeMap[this.size()]].join(' ');
+        const size = this.size();
+        const sizeClasses = [sizeMap[size], this.icon() ? iconOnlySizeMap[size] : ''].filter(Boolean).join(' ');
+        return [...base, styleMap[this.kind()][this.color()] || styleMap['solid']['primary'], sizeClasses].join(' ');
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     handleClick(event) {
         if (!this.disabled()) {
@@ -805,12 +875,12 @@ class TailwindButton extends TailwindComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindButton, isStandalone: true, selector: "tailwind-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: "<button\n  [ngClass]=\"computedClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"handleClick($event)\">\n  <ng-content />\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindButton, isStandalone: true, selector: "tailwind-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: "<button\n  [ngClass]=\"computedClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.role]=\"role()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"handleClick($event)\">\n  <span class=\"inline-flex min-w-0 items-center justify-center gap-2\">\n    @if (icon() && iconPosition() === 'left') {\n      <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n    }\n    <span class=\"tailwind-button-label inline-flex min-w-0 items-center empty:hidden\">\n      <ng-content />\n    </span>\n    @if (icon() && iconPosition() === 'right') {\n      <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n    }\n  </span>\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindButton, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-button', imports: [NgClass], template: "<button\n  [ngClass]=\"computedClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"handleClick($event)\">\n  <ng-content />\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+            args: [{ imports: [NgClass, TailwindIcon], selector: 'tailwind-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [ngClass]=\"computedClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.role]=\"role()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"handleClick($event)\">\n  <span class=\"inline-flex min-w-0 items-center justify-center gap-2\">\n    @if (icon() && iconPosition() === 'left') {\n      <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n    }\n    <span class=\"tailwind-button-label inline-flex min-w-0 items-center empty:hidden\">\n      <ng-content />\n    </span>\n    @if (icon() && iconPosition() === 'right') {\n      <tailwind-icon [icon]=\"icon()!\" [size]=\"iconPixelSize()\" class=\"shrink-0\" />\n    }\n  </span>\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 class TailwindInput extends TailwindComponent {
     /** Label text */
@@ -884,7 +954,7 @@ class TailwindInput extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindInput),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInput, decorators: [{
             type: Component,
@@ -894,7 +964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindInput),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindTextarea extends TailwindComponent {
@@ -980,7 +1050,7 @@ class TailwindTextarea extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindTextarea),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <textarea\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [placeholder]=\"placeholder()\"\n    [rows]=\"rows()\"\n    [attr.cols]=\"cols() ?? null\"\n    [attr.maxlength]=\"maxlength() ?? null\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"textareaClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"></textarea>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTextarea, decorators: [{
             type: Component,
@@ -990,7 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindTextarea),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <textarea\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [placeholder]=\"placeholder()\"\n    [rows]=\"rows()\"\n    [attr.cols]=\"cols() ?? null\"\n    [attr.maxlength]=\"maxlength() ?? null\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"textareaClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"></textarea>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindUpload extends TailwindComponent {
@@ -1203,7 +1273,7 @@ class TailwindUpload extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindUpload),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type"], outputs: ["onClick"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [attr.id]=\"fileInputId()\"\n    [accept]=\"accept() ?? null\"\n    [attr.multiple]=\"multiple() ? '' : null\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\n    (change)=\"onNativeChange($event)\"\n    (blur)=\"blurHost()\" />\n\n  @if (variant() === 'button') {\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <tailwind-button\n        type=\"button\"\n        color=\"primary\"\n        kind=\"solid\"\n        [size]=\"size()\"\n        [disabled]=\"isDisabled()\"\n        (onClick)=\"triggerPicker($event)\">\n        {{ buttonLabel() }}\n      </tailwind-button>\n      @if (showClear() && value()) {\n        <tailwind-button\n          kind=\"text\"\n          color=\"primary\"\n          size=\"sm\"\n          [disabled]=\"isDisabled()\"\n          (onClick)=\"clear($event)\">\n          {{ clearText() }}\n        </tailwind-button>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col gap-2\">\n      <div\n        role=\"button\"\n        tabindex=\"0\"\n        [class]=\"areaClasses()\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        (click)=\"triggerPicker($event)\"\n        (keydown)=\"onKeydownArea($event)\"\n        (dragenter)=\"onDragEnter($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (dragover)=\"onDragOver($event)\"\n        (drop)=\"onDrop($event)\">\n        <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\n        <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\n      </div>\n      @if (showClear() && value()) {\n        <tailwind-button\n          kind=\"text\"\n          color=\"primary\"\n          size=\"sm\"\n          class=\"self-start\"\n          [disabled]=\"isDisabled()\"\n          (onClick)=\"clear($event)\">\n          {{ clearText() }}\n        </tailwind-button>\n      }\n    </div>\n  }\n\n  @if (selectedNames().length) {\n    <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\n      {{ selectedNames().join(', ') }}\n    </p>\n  }\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, decorators: [{
             type: Component,
@@ -1213,7 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindUpload),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"sr-only\"\n    [attr.id]=\"fileInputId()\"\n    [accept]=\"accept() ?? null\"\n    [attr.multiple]=\"multiple() ? '' : null\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\n    (change)=\"onNativeChange($event)\"\n    (blur)=\"blurHost()\" />\n\n  @if (variant() === 'button') {\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <tailwind-button\n        type=\"button\"\n        color=\"primary\"\n        kind=\"solid\"\n        [size]=\"size()\"\n        [disabled]=\"isDisabled()\"\n        (onClick)=\"triggerPicker($event)\">\n        {{ buttonLabel() }}\n      </tailwind-button>\n      @if (showClear() && value()) {\n        <tailwind-button\n          kind=\"text\"\n          color=\"primary\"\n          size=\"sm\"\n          [disabled]=\"isDisabled()\"\n          (onClick)=\"clear($event)\">\n          {{ clearText() }}\n        </tailwind-button>\n      }\n    </div>\n  } @else {\n    <div class=\"flex flex-col gap-2\">\n      <div\n        role=\"button\"\n        tabindex=\"0\"\n        [class]=\"areaClasses()\"\n        [attr.aria-disabled]=\"isDisabled() || null\"\n        (click)=\"triggerPicker($event)\"\n        (keydown)=\"onKeydownArea($event)\"\n        (dragenter)=\"onDragEnter($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (dragover)=\"onDragOver($event)\"\n        (drop)=\"onDrop($event)\">\n        <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\n        <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\n      </div>\n      @if (showClear() && value()) {\n        <tailwind-button\n          kind=\"text\"\n          color=\"primary\"\n          size=\"sm\"\n          class=\"self-start\"\n          [disabled]=\"isDisabled()\"\n          (onClick)=\"clear($event)\">\n          {{ clearText() }}\n        </tailwind-button>\n      }\n    </div>\n  }\n\n  @if (selectedNames().length) {\n    <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\n      {{ selectedNames().join(', ') }}\n    </p>\n  }\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], areaTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaTitle", required: false }] }], areaHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaHint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
 
 class TailwindInputOtp extends TailwindComponent {
@@ -1436,7 +1506,7 @@ class TailwindInputOtp extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindInputOtp),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+        ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\n    @for (idx of slotIndexes(); track idx) {\n      <input\n        #otpDigit\n        [attr.id]=\"cellId(idx)\"\n        [type]=\"inputType()\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n        maxlength=\"1\"\n        spellcheck=\"false\"\n        [class]=\"cellClasses()\"\n        [value]=\"digitAt(idx)\"\n        (input)=\"onInput($event, idx)\"\n        (keydown)=\"onKeydown($event, idx)\"\n        (paste)=\"onPaste($event, idx)\"\n        (focus)=\"onSlotFocus(idx)\" />\n      @if (showSeparatorAfter(idx)) {\n        <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\n      }\n    }\n  </div>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, decorators: [{
             type: Component,
@@ -1446,7 +1516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindInputOtp),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\n    @for (idx of slotIndexes(); track idx) {\n      <input\n        #otpDigit\n        [attr.id]=\"cellId(idx)\"\n        [type]=\"inputType()\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-invalid]=\"hasError() || null\"\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n        maxlength=\"1\"\n        spellcheck=\"false\"\n        [class]=\"cellClasses()\"\n        [value]=\"digitAt(idx)\"\n        (input)=\"onInput($event, idx)\"\n        (keydown)=\"onKeydown($event, idx)\"\n        (paste)=\"onPaste($event, idx)\"\n        (focus)=\"onSlotFocus(idx)\" />\n      @if (showSeparatorAfter(idx)) {\n        <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\n      }\n    }\n  </div>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorAfterIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorAfterIndex", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], otpInputs: [{ type: i0.ViewChildren, args: ['otpDigit', { isSignal: true }] }] } });
 
 class TailwindCheckbox extends TailwindComponent {
@@ -1472,6 +1542,16 @@ class TailwindCheckbox extends TailwindComponent {
         };
         return sizeMap[this.size()];
     }, ...(ngDevMode ? [{ debugName: "boxSizeClass" }] : /* istanbul ignore next */ []));
+    checkIconSize = computed(() => {
+        const sizeMap = {
+            xs: 16,
+            sm: 16,
+            md: 20,
+            lg: 24,
+            xl: 28
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "checkIconSize" }] : /* istanbul ignore next */ []));
     // CVA
     onChange = () => { };
     onTouched = () => { };
@@ -1500,17 +1580,17 @@ class TailwindCheckbox extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindCheckbox),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-neutral-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M13.5 4.5L6.5 11.5L3 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 flex items-center justify-center peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-neutral-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <tailwind-icon icon=\"check\" [size]=\"checkIconSize()\" class=\"text-white shrink-0\" />\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-checkbox', providers: [
+            args: [{ imports: [TailwindIcon], selector: 'tailwind-checkbox', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TailwindCheckbox),
                             multi: true
                         }
-                    ], template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-neutral-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M13.5 4.5L6.5 11.5L3 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 flex items-center justify-center peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-neutral-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <tailwind-icon icon=\"check\" [size]=\"checkIconSize()\" class=\"text-white shrink-0\" />\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class TailwindRadioGroup extends TailwindComponent {
@@ -1579,7 +1659,7 @@ class TailwindRadioGroup extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindRadioGroup),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-neutral-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-neutral-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindRadioGroup, decorators: [{
             type: Component,
@@ -1589,7 +1669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindRadioGroup),
                             multi: true
                         }
-                    ], template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-neutral-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-neutral-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindSelect extends TailwindComponent {
@@ -1876,19 +1956,376 @@ class TailwindSelect extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-neutral-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-neutral-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <svg\n            class=\"w-4 h-4 text-primary-600 shrink-0\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] });
+        ], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-neutral-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <tailwind-icon\n      icon=\"chevron-down\"\n      [size]=\"16\"\n      class=\"shrink-0 ml-2 text-neutral-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      aria-hidden=\"true\" />\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-select', providers: [
+            args: [{ imports: [TailwindIcon], selector: 'tailwind-select', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TailwindSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-neutral-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-neutral-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <svg\n            class=\"w-4 h-4 text-primary-600 shrink-0\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-neutral-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <tailwind-icon\n      icon=\"chevron-down\"\n      [size]=\"16\"\n      class=\"shrink-0 ml-2 text-neutral-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      aria-hidden=\"true\" />\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+class TailwindAutocomplete extends TailwindComponent {
+    static nextId = 0;
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    elRef = inject((ElementRef));
+    cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
+    panelTemplate = viewChild.required('panelTemplate');
+    constructor() {
+        super();
+        effect(() => {
+            const opts = this.filteredOptions();
+            if (!this.isOpen())
+                return;
+            const v = this.value();
+            let initial = -1;
+            if (v != null) {
+                initial = opts.findIndex(o => this.optionValueEquals(o.value, v));
+            }
+            else if (opts.length > 0) {
+                initial = 0;
+            }
+            this.activeIndex.set(initial >= 0 ? initial : -1);
+            this.cdr.detectChanges();
+        });
+    }
+    overlayRef = null;
+    outsideSub = null;
+    searchDebounceTimer = null;
+    instanceListboxId = `tailwind-autocomplete-listbox-${++TailwindAutocomplete.nextId}`;
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Available options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Helper text */
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error text */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    /** Whether in error state */
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Filter options locally by label when typing */
+    filterLocally = input(true, ...(ngDevMode ? [{ debugName: "filterLocally" }] : /* istanbul ignore next */ []));
+    /** Minimum query length before opening panel and emitting onSearch */
+    minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : /* istanbul ignore next */ []));
+    /** Debounce delay (ms) for onSearch emission only */
+    debounceMs = input(0, ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    /** On blur, reset input to selected option label or clear invalid text */
+    forceSelection = input(true, ...(ngDevMode ? [{ debugName: "forceSelection" }] : /* istanbul ignore next */ []));
+    /** Selected value (form control) — set only when an option is chosen */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the current search query (after debounce / minSearchLength) */
+    onSearch = output();
+    /** Custom option row template (`ng-template` with `#item`) */
+    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /** Text shown in the input */
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    listboxId = computed(() => (this.id() ? `${this.id()}-listbox` : this.instanceListboxId), ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => {
+        const v = this.value();
+        if (v == null)
+            return null;
+        return this.options().find(o => this.optionValueEquals(o.value, v)) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const opts = this.options();
+        if (!this.filterLocally())
+            return opts;
+        const q = this.searchQuery().trim().toLowerCase();
+        if (!q)
+            return opts;
+        return opts.filter(o => o.label.toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    inputClasses = computed(() => {
+        const sizeMap = {
+            xs: 'text-xs px-2 py-1 rounded-sm',
+            sm: 'text-sm px-2.5 py-1.5 rounded-md',
+            md: 'text-sm px-3 py-2 rounded-md',
+            lg: 'text-base px-3.5 py-2.5 rounded-lg',
+            xl: 'text-base px-4 py-3 rounded-lg'
+        };
+        const stateClass = this.hasError()
+            ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
+            : 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
+        return [
+            'block w-full bg-white border transition-colors duration-150',
+            'placeholder:text-neutral-400',
+            'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
+            'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed',
+            sizeMap[this.size()],
+            stateClass
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? null);
+        const opt = this.options().find(o => this.optionValueEquals(o.value, value));
+        this.searchQuery.set(opt?.label ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    ngOnDestroy() {
+        if (this.searchDebounceTimer != null) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        this.closePanel();
+    }
+    isOptionSelected(option) {
+        const v = this.value();
+        if (v == null)
+            return false;
+        return this.optionValueEquals(option.value, v);
+    }
+    optionClasses(index, option) {
+        const isSelected = this.isOptionSelected(option);
+        const isActive = this.activeIndex() === index;
+        const isDisabled = !!option.disabled;
+        return [
+            'flex items-center justify-between px-3 py-2 text-sm cursor-pointer select-none',
+            isDisabled
+                ? 'text-neutral-400 cursor-not-allowed'
+                : isSelected
+                    ? 'bg-primary-50 text-primary-700 font-medium'
+                    : isActive
+                        ? 'bg-neutral-100 text-neutral-900'
+                        : 'text-neutral-800 hover:bg-neutral-50'
+        ].join(' ');
+    }
+    itemContext(option, index) {
+        return {
+            $implicit: option,
+            option,
+            index,
+            selected: this.isOptionSelected(option),
+            active: this.activeIndex() === index
+        };
+    }
+    onInputChange(event) {
+        const query = event.target.value;
+        this.searchQuery.set(query);
+        this.cdr.markForCheck();
+        const selected = this.selectedOption();
+        if (selected && query !== selected.label) {
+            this.value.set(null);
+            this.onChange(null);
+        }
+        this.emitSearch(query);
+        if (query.length >= this.minSearchLength()) {
+            this.openPanel();
+        }
+        else {
+            this.closePanel();
+        }
+    }
+    onFocus() {
+        if (this.isDisabled())
+            return;
+        if (this.searchQuery().length >= this.minSearchLength()) {
+            this.openPanel();
+        }
+    }
+    onBlur() {
+        this.onTouched();
+        queueMicrotask(() => this.applyForceSelectionOnBlur());
+    }
+    applyForceSelectionOnBlur() {
+        if (!this.forceSelection() || this.isOpen())
+            return;
+        const active = document.activeElement;
+        const host = this.elRef.nativeElement;
+        const pane = this.overlayRef?.overlayElement;
+        if (active && (host.contains(active) || pane?.contains(active)))
+            return;
+        const selected = this.selectedOption();
+        const query = this.searchQuery();
+        if (selected) {
+            if (query !== selected.label) {
+                this.searchQuery.set(selected.label);
+            }
+            return;
+        }
+        if (query) {
+            this.searchQuery.set('');
+        }
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value.set(option.value);
+        this.searchQuery.set(option.label);
+        this.onChange(option.value);
+        this.onTouched();
+        this.closePanel();
+    }
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const opts = this.filteredOptions();
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openPanel();
+                    return;
+                }
+                let next = this.activeIndex() + 1;
+                while (next < opts.length && opts[next].disabled)
+                    next++;
+                if (next < opts.length)
+                    this.activeIndex.set(next);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openPanel();
+                    return;
+                }
+                let prev = this.activeIndex() - 1;
+                while (prev >= 0 && opts[prev].disabled)
+                    prev--;
+                if (prev >= 0)
+                    this.activeIndex.set(prev);
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openPanel();
+                    return;
+                }
+                const active = this.activeIndex();
+                if (active >= 0 && active < opts.length) {
+                    this.selectOption(opts[active]);
+                }
+                break;
+            }
+            case 'Escape':
+            case 'Tab': {
+                this.closePanel();
+                break;
+            }
+        }
+    }
+    optionValueEquals(a, b) {
+        return Object.is(a, b);
+    }
+    emitSearch(query) {
+        if (query.length < this.minSearchLength())
+            return;
+        const debounce = this.debounceMs();
+        if (this.searchDebounceTimer != null) {
+            clearTimeout(this.searchDebounceTimer);
+            this.searchDebounceTimer = null;
+        }
+        if (debounce <= 0) {
+            this.onSearch.emit(query);
+            return;
+        }
+        this.searchDebounceTimer = setTimeout(() => {
+            this.ngZone.run(() => {
+                this.onSearch.emit(query);
+                this.cdr.markForCheck();
+            });
+            this.searchDebounceTimer = null;
+        }, debounce);
+    }
+    openPanel() {
+        if (this.overlayRef || this.isDisabled())
+            return;
+        if (this.searchQuery().length < this.minSearchLength())
+            return;
+        const trigger = this.elRef.nativeElement.querySelector('input[role="combobox"]');
+        if (!trigger)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(trigger)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+        ])
+            .withFlexibleDimensions(false)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            width: trigger.offsetWidth
+        });
+        const portal = new TemplatePortal(this.panelTemplate(), this.vcr);
+        this.overlayRef.attach(portal);
+        const pane = this.overlayRef.overlayElement;
+        this.outsideSub = new Subscription();
+        this.outsideSub.add(fromEvent(document, 'pointerdown', { capture: true }).subscribe(ev => {
+            const t = ev.target;
+            if (this.elRef.nativeElement.contains(t) || pane.contains(t))
+                return;
+            this.closePanel();
+        }));
+        this.outsideSub.add(fromEvent(document, 'keydown').subscribe(ev => {
+            if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this.closePanel();
+            }
+        }));
+        this.isOpen.set(true);
+        const opts = this.filteredOptions();
+        const v = this.value();
+        let initial = -1;
+        if (v != null) {
+            initial = opts.findIndex(o => this.optionValueEquals(o.value, v));
+        }
+        this.activeIndex.set(initial >= 0 ? initial : -1);
+    }
+    closePanel() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.outsideSub?.unsubscribe();
+        this.outsideSub = null;
+        this.isOpen.set(false);
+        this.activeIndex.set(-1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAutocomplete, isStandalone: true, selector: "tailwind-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindAutocomplete),
+                multi: true
+            }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-activedescendant]=\"\r\n      isOpen() && activeIndex() >= 0 ? listboxId() + '-option-' + activeIndex() : null\r\n    \"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"isDisabled()\"\r\n    [value]=\"searchQuery()\"\r\n    [class]=\"inputClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur()\"\r\n    (keydown)=\"onKeydown($event)\" />\r\n\r\n  <ng-content />\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\r\n  }\r\n</div>\r\n\r\n<ng-template #panelTemplate>\r\n  <ul\r\n    role=\"listbox\"\r\n    [attr.id]=\"listboxId()\"\r\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\r\n    @for (option of filteredOptions(); track option.value; let i = $index) {\r\n      <li\r\n        role=\"option\"\r\n        [attr.id]=\"listboxId() + '-option-' + i\"\r\n        [attr.aria-selected]=\"isOptionSelected(option)\"\r\n        [attr.aria-disabled]=\"option.disabled || null\"\r\n        [class]=\"optionClasses(i, option)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (click)=\"selectOption(option)\"\r\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\r\n        @if (itemTemplate()) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate()!; context: itemContext(option, i)\" />\r\n        } @else {\r\n          <span>{{ option.label }}</span>\r\n          @if (isOptionSelected(option)) {\r\n            <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\r\n          }\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\r\n        {{ placeholder() || 'Nessun risultato' }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAutocomplete, decorators: [{
+            type: Component,
+            args: [{ imports: [NgTemplateOutlet, TailwindIcon], selector: 'tailwind-autocomplete', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindAutocomplete),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-activedescendant]=\"\r\n      isOpen() && activeIndex() >= 0 ? listboxId() + '-option-' + activeIndex() : null\r\n    \"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"isDisabled()\"\r\n    [value]=\"searchQuery()\"\r\n    [class]=\"inputClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur()\"\r\n    (keydown)=\"onKeydown($event)\" />\r\n\r\n  <ng-content />\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\r\n  }\r\n</div>\r\n\r\n<ng-template #panelTemplate>\r\n  <ul\r\n    role=\"listbox\"\r\n    [attr.id]=\"listboxId()\"\r\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\r\n    @for (option of filteredOptions(); track option.value; let i = $index) {\r\n      <li\r\n        role=\"option\"\r\n        [attr.id]=\"listboxId() + '-option-' + i\"\r\n        [attr.aria-selected]=\"isOptionSelected(option)\"\r\n        [attr.aria-disabled]=\"option.disabled || null\"\r\n        [class]=\"optionClasses(i, option)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (click)=\"selectOption(option)\"\r\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\r\n        @if (itemTemplate()) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate()!; context: itemContext(option, i)\" />\r\n        } @else {\r\n          <span>{{ option.label }}</span>\r\n          @if (isOptionSelected(option)) {\r\n            <tailwind-icon icon=\"check\" [size]=\"16\" class=\"text-primary-600 shrink-0\" aria-hidden=\"true\" />\r\n          }\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\r\n        {{ placeholder() || 'Nessun risultato' }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], filterLocally: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocally", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
 class TailwindToggle extends TailwindComponent {
     /** Label text */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1983,7 +2420,7 @@ class TailwindToggle extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindToggle),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, decorators: [{
             type: Component,
@@ -1993,7 +2430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindToggle),
                             multi: true
                         }
-                    ], template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class TailwindBadge extends TailwindComponent {
@@ -2028,11 +2465,11 @@ class TailwindBadge extends TailwindComponent {
         return [...base, variantMap[this.variant()] ?? variantMap['primary'], sizeMap[this.size()], shape].join(' ');
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBadge, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBadge, isStandalone: true, selector: "tailwind-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<span [class]=\"computedClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  @if (dot()) {\n    <span class=\"w-1.5 h-1.5 rounded-full bg-current\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBadge, isStandalone: true, selector: "tailwind-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<span [class]=\"computedClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  @if (dot()) {\n    <span class=\"w-1.5 h-1.5 rounded-full bg-current\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-badge', template: "<span [class]=\"computedClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  @if (dot()) {\n    <span class=\"w-1.5 h-1.5 rounded-full bg-current\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'tailwind-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"computedClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  @if (dot()) {\n    <span class=\"w-1.5 h-1.5 rounded-full bg-current\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class TailwindTitle extends TailwindComponent {
@@ -2070,11 +2507,11 @@ class TailwindTitle extends TailwindComponent {
         return size[tag];
     }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTitle, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTitle, isStandalone: true, selector: "tailwind-title", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, titleTag: { classPropertyName: "titleTag", publicName: "titleTag", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@switch (titleTag()) {\r\n  @case ('h1') {\r\n    <h1 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h1>\r\n  }\r\n  @case ('h2') {\r\n    <h2 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h2>\r\n  }\r\n  @case ('h3') {\r\n    <h3 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h3>\r\n  }\r\n  @case ('h4') {\r\n    <h4 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h4>\r\n  }\r\n  @case ('h5') {\r\n    <h5 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h5>\r\n  }\r\n  @case ('h6') {\r\n    <h6 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h6>\r\n  }\r\n}\r\n\r\n<ng-template #titleBody>\r\n  @if (icon()) {\r\n    <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\r\n  }\r\n  <span class=\"min-w-0\">{{ text() }}</span>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTitle, isStandalone: true, selector: "tailwind-title", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, titleTag: { classPropertyName: "titleTag", publicName: "titleTag", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@switch (titleTag()) {\n  @case ('h1') {\n    <h1 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h3>\n  }\n  @case ('h4') {\n    <h4 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h4>\n  }\n  @case ('h5') {\n    <h5 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h5>\n  }\n  @case ('h6') {\n    <h6 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h6>\n  }\n}\n\n<ng-template #titleBody>\n  @if (icon()) {\n    <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\n  }\n  <span class=\"min-w-0\">{{ text() }}</span>\n</ng-template>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTitle, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-title', imports: [NgTemplateOutlet, TailwindIcon], template: "@switch (titleTag()) {\r\n  @case ('h1') {\r\n    <h1 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h1>\r\n  }\r\n  @case ('h2') {\r\n    <h2 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h2>\r\n  }\r\n  @case ('h3') {\r\n    <h3 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h3>\r\n  }\r\n  @case ('h4') {\r\n    <h4 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h4>\r\n  }\r\n  @case ('h5') {\r\n    <h5 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h5>\r\n  }\r\n  @case ('h6') {\r\n    <h6 [class]=\"headingClasses()\">\r\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\r\n    </h6>\r\n  }\r\n}\r\n\r\n<ng-template #titleBody>\r\n  @if (icon()) {\r\n    <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\r\n  }\r\n  <span class=\"min-w-0\">{{ text() }}</span>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'tailwind-title', imports: [NgTemplateOutlet, TailwindIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (titleTag()) {\n  @case ('h1') {\n    <h1 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h3>\n  }\n  @case ('h4') {\n    <h4 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h4>\n  }\n  @case ('h5') {\n    <h5 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h5>\n  }\n  @case ('h6') {\n    <h6 [class]=\"headingClasses()\">\n      <ng-container [ngTemplateOutlet]=\"titleBody\" />\n    </h6>\n  }\n}\n\n<ng-template #titleBody>\n  @if (icon()) {\n    <tailwind-icon [icon]=\"icon()!\" [size]=\"iconSize()\" />\n  }\n  <span class=\"min-w-0\">{{ text() }}</span>\n</ng-template>\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], titleTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTag", required: false }] }] } });
 
 class TailwindCard extends TailwindComponent {
@@ -2089,11 +2526,11 @@ class TailwindCard extends TailwindComponent {
     /** Whether the card has a footer */
     hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-card', template: "<div\n  class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], headerBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBg", required: false }] }], hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }] } });
 
 class TailwindAlert extends TailwindComponent {
@@ -2125,11 +2562,11 @@ class TailwindAlert extends TailwindComponent {
         this.onDismiss.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAlert, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAlert, isStandalone: true, selector: "tailwind-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "@if (!dismissed()) {\r\n  <div [class]=\"computedClasses()\" role=\"alert\" [attr.aria-live]=\"severity() === 'danger' ? 'assertive' : 'polite'\">\r\n    <!-- Icon -->\r\n    <div class=\"shrink-0 mt-0.5\">\r\n      @switch (severity()) {\r\n        @case ('success') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n        @case ('warning') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n        @case ('danger') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n        @case ('info') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div class=\"flex-1 min-w-0\">\r\n      @if (title()) {\r\n        <h3 class=\"text-sm font-semibold mb-0.5\">{{ title() }}</h3>\r\n      }\r\n      <div class=\"text-sm\">\r\n        <ng-content />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Dismiss button -->\r\n    @if (dismissible()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"shrink-0 -m-1 p-1 rounded-md opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 cursor-pointer\"\r\n        [attr.aria-label]=\"'Dismiss alert'\"\r\n        (click)=\"dismiss()\">\r\n        <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n          <path\r\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAlert, isStandalone: true, selector: "tailwind-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "@if (!dismissed()) {\n  <div [class]=\"computedClasses()\" role=\"alert\" [attr.aria-live]=\"severity() === 'danger' ? 'assertive' : 'polite'\">\n    <!-- Icon -->\n    <div class=\"shrink-0 mt-0.5\">\n      @switch (severity()) {\n        @case ('success') {\n          <tailwind-icon icon=\"check-circle\" [size]=\"20\" />\n        }\n        @case ('warning') {\n          <tailwind-icon icon=\"exclamation-triangle\" [size]=\"20\" />\n        }\n        @case ('danger') {\n          <tailwind-icon icon=\"x-circle\" [size]=\"20\" />\n        }\n        @case ('info') {\n          <tailwind-icon icon=\"information-circle\" [size]=\"20\" />\n        }\n      }\n    </div>\n\n    <!-- Content -->\n    <div class=\"flex-1 min-w-0\">\n      @if (title()) {\n        <h3 class=\"text-sm font-semibold mb-0.5\">{{ title() }}</h3>\n      }\n      <div class=\"text-sm\">\n        <ng-content />\n      </div>\n    </div>\n\n    <!-- Dismiss button -->\n    @if (dismissible()) {\n      <tailwind-button\n        kind=\"ghost\"\n        color=\"transparent\"\n        size=\"sm\"\n        icon=\"x-mark\"\n        class=\"shrink-0 -m-1 opacity-70 hover:opacity-100\"\n        ariaLabel=\"Dismiss alert\"\n        (onClick)=\"dismiss()\" />\n    }\n  </div>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-alert', template: "@if (!dismissed()) {\r\n  <div [class]=\"computedClasses()\" role=\"alert\" [attr.aria-live]=\"severity() === 'danger' ? 'assertive' : 'polite'\">\r\n    <!-- Icon -->\r\n    <div class=\"shrink-0 mt-0.5\">\r\n      @switch (severity()) {\r\n        @case ('success') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n        @case ('warning') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n        @case ('danger') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n        @case ('info') {\r\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\r\n              clip-rule=\"evenodd\" />\r\n          </svg>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div class=\"flex-1 min-w-0\">\r\n      @if (title()) {\r\n        <h3 class=\"text-sm font-semibold mb-0.5\">{{ title() }}</h3>\r\n      }\r\n      <div class=\"text-sm\">\r\n        <ng-content />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Dismiss button -->\r\n    @if (dismissible()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"shrink-0 -m-1 p-1 rounded-md opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 cursor-pointer\"\r\n        [attr.aria-label]=\"'Dismiss alert'\"\r\n        (click)=\"dismiss()\">\r\n        <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n          <path\r\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [TailwindIcon, TailwindButton], selector: 'tailwind-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!dismissed()) {\n  <div [class]=\"computedClasses()\" role=\"alert\" [attr.aria-live]=\"severity() === 'danger' ? 'assertive' : 'polite'\">\n    <!-- Icon -->\n    <div class=\"shrink-0 mt-0.5\">\n      @switch (severity()) {\n        @case ('success') {\n          <tailwind-icon icon=\"check-circle\" [size]=\"20\" />\n        }\n        @case ('warning') {\n          <tailwind-icon icon=\"exclamation-triangle\" [size]=\"20\" />\n        }\n        @case ('danger') {\n          <tailwind-icon icon=\"x-circle\" [size]=\"20\" />\n        }\n        @case ('info') {\n          <tailwind-icon icon=\"information-circle\" [size]=\"20\" />\n        }\n      }\n    </div>\n\n    <!-- Content -->\n    <div class=\"flex-1 min-w-0\">\n      @if (title()) {\n        <h3 class=\"text-sm font-semibold mb-0.5\">{{ title() }}</h3>\n      }\n      <div class=\"text-sm\">\n        <ng-content />\n      </div>\n    </div>\n\n    <!-- Dismiss button -->\n    @if (dismissible()) {\n      <tailwind-button\n        kind=\"ghost\"\n        color=\"transparent\"\n        size=\"sm\"\n        icon=\"x-mark\"\n        class=\"shrink-0 -m-1 opacity-70 hover:opacity-100\"\n        ariaLabel=\"Dismiss alert\"\n        (onClick)=\"dismiss()\" />\n    }\n  </div>\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
 
 class TailwindSpinner extends TailwindComponent {
@@ -2148,24 +2585,28 @@ class TailwindSpinner extends TailwindComponent {
         const orient = this.orientation() === 'vertical' ? 'flex-col' : '';
         return `${base} ${orient}`;
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
-    spinnerClasses = computed(() => {
+    iconPixelSize = computed(() => {
         const sizeMap = {
-            xs: 'w-3 h-3',
-            sm: 'w-4 h-4',
-            md: 'w-6 h-6',
-            lg: 'w-8 h-8',
-            xl: 'w-12 h-12'
+            xs: 16,
+            sm: 16,
+            md: 24,
+            lg: 32,
+            xl: 48
         };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconPixelSize" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => {
         const colorMap = {
             primary: 'text-primary-600',
             secondary: 'text-secondary-600',
             success: 'text-success-600',
             warning: 'text-warning-600',
             danger: 'text-danger-600',
-            info: 'text-info-600'
+            info: 'text-info-600',
+            transparent: 'text-neutral-400'
         };
-        return `tailwind-spinner-svg ${sizeMap[this.size()]} ${colorMap[this.color()]}`;
-    }, ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
+        return `animate-spin ${colorMap[this.color()]}`;
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
     labelClasses = computed(() => {
         const sizeMap = {
             xs: 'text-xs',
@@ -2177,11 +2618,11 @@ class TailwindSpinner extends TailwindComponent {
         return `${sizeMap[this.size()]} ${this.color()} font-medium`;
     }, ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSpinner, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindSpinner, isStandalone: true, selector: "tailwind-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n    <circle class=\"opacity-20\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n    <path\n      class=\"opacity-80\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n  </svg>\n\n  @if (label()) {\n    <span [class]=\"labelClasses()\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-flex}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tailwind-spinner-svg{animation:tailwind-spin .75s linear infinite}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindSpinner, isStandalone: true, selector: "tailwind-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  <tailwind-icon icon=\"arrow-path\" [size]=\"iconPixelSize()\" [class]=\"iconClasses()\" />\n\n  @if (label()) {\n    <span [class]=\"labelClasses()\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSpinner, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-spinner', template: "<div [class]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n    <circle class=\"opacity-20\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n    <path\n      class=\"opacity-80\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n  </svg>\n\n  @if (label()) {\n    <span [class]=\"labelClasses()\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-flex}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tailwind-spinner-svg{animation:tailwind-spin .75s linear infinite}\n"] }]
+            args: [{ imports: [TailwindIcon], selector: 'tailwind-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  <tailwind-icon icon=\"arrow-path\" [size]=\"iconPixelSize()\" [class]=\"iconClasses()\" />\n\n  @if (label()) {\n    <span [class]=\"labelClasses()\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 class TailwindModal extends TailwindComponent {
@@ -2236,11 +2677,11 @@ class TailwindModal extends TailwindComponent {
         }, 200);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindModal, isStandalone: true, selector: "tailwind-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\r\n  <!-- Backdrop -->\r\n  <div\r\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n    [class.opacity-100]=\"isVisible()\"\r\n    [class.opacity-0]=\"!isVisible()\"\r\n    (click)=\"closeOnBackdrop() && close()\"\r\n    aria-hidden=\"true\"></div>\r\n\r\n  <!-- Modal -->\r\n  <div\r\n    role=\"dialog\"\r\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    [attr.aria-modal]=\"true\"\r\n    (keydown.escape)=\"closeOnEscape() && close()\">\r\n    <div class=\"flex min-h-full items-center justify-center p-4\">\r\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\r\n          <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\r\n            <ng-content />\r\n          </h2>\r\n          @if (showCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors cursor-pointer\"\r\n              aria-label=\"Close\"\r\n              (click)=\"close()\">\r\n              <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div class=\"px-6 py-5\">\r\n          <ng-content select=\"[tailwind-modal-content]\" />\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"border-t border-neutral-200 px-6 py-4\">\r\n          <ng-content select=\"[tailwind-modal-footer]\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindModal, isStandalone: true, selector: "tailwind-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Modal -->\n  <div\n    role=\"dialog\"\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\n    [attr.aria-modal]=\"true\"\n    (keydown.escape)=\"closeOnEscape() && close()\">\n    <div class=\"flex min-h-full items-center justify-center p-4\">\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\n        <!-- Header -->\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n          <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\n            <ng-content />\n          </h2>\n          @if (showCloseButton()) {\n            <tailwind-button\n              kind=\"ghost\"\n              color=\"transparent\"\n              size=\"sm\"\n              icon=\"x-mark\"\n              class=\"shrink-0 -m-1.5\"\n              ariaLabel=\"Close\"\n              (onClick)=\"close()\" />\n          }\n        </div>\n\n        <!-- Body -->\n        <div class=\"px-6 py-5\">\n          <ng-content select=\"[tailwind-modal-content]\" />\n        </div>\n\n        <!-- Footer -->\n        <div class=\"border-t border-neutral-200 px-6 py-4\">\n          <ng-content select=\"[tailwind-modal-footer]\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModal, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-modal', template: "@if (isOpen()) {\r\n  <!-- Backdrop -->\r\n  <div\r\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n    [class.opacity-100]=\"isVisible()\"\r\n    [class.opacity-0]=\"!isVisible()\"\r\n    (click)=\"closeOnBackdrop() && close()\"\r\n    aria-hidden=\"true\"></div>\r\n\r\n  <!-- Modal -->\r\n  <div\r\n    role=\"dialog\"\r\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    [attr.aria-modal]=\"true\"\r\n    (keydown.escape)=\"closeOnEscape() && close()\">\r\n    <div class=\"flex min-h-full items-center justify-center p-4\">\r\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\r\n          <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\r\n            <ng-content />\r\n          </h2>\r\n          @if (showCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors cursor-pointer\"\r\n              aria-label=\"Close\"\r\n              (click)=\"close()\">\r\n              <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div class=\"px-6 py-5\">\r\n          <ng-content select=\"[tailwind-modal-content]\" />\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"border-t border-neutral-200 px-6 py-4\">\r\n          <ng-content select=\"[tailwind-modal-footer]\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ imports: [TailwindButton], selector: 'tailwind-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Modal -->\n  <div\n    role=\"dialog\"\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\n    [attr.aria-modal]=\"true\"\n    (keydown.escape)=\"closeOnEscape() && close()\">\n    <div class=\"flex min-h-full items-center justify-center p-4\">\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\n        <!-- Header -->\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n          <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\n            <ng-content />\n          </h2>\n          @if (showCloseButton()) {\n            <tailwind-button\n              kind=\"ghost\"\n              color=\"transparent\"\n              size=\"sm\"\n              icon=\"x-mark\"\n              class=\"shrink-0 -m-1.5\"\n              ariaLabel=\"Close\"\n              (onClick)=\"close()\" />\n          }\n        </div>\n\n        <!-- Body -->\n        <div class=\"px-6 py-5\">\n          <ng-content select=\"[tailwind-modal-content]\" />\n        </div>\n\n        <!-- Footer -->\n        <div class=\"border-t border-neutral-200 px-6 py-4\">\n          <ng-content select=\"[tailwind-modal-footer]\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], modalPanel: [{ type: i0.ViewChild, args: ['modalPanel', { isSignal: true }] }] } });
 
 class TailwindTab extends TailwindComponent {
@@ -2253,11 +2694,11 @@ class TailwindTab extends TailwindComponent {
     /** Whether this tab is the currently active one (set by parent) */
     isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTab, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTab, isStandalone: true, selector: "tailwind-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isActive()) {\n  <div role=\"tabpanel\" [attr.aria-labelledby]=\"id() ? 'tab-' + id() : null\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTab, isStandalone: true, selector: "tailwind-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isActive()) {\n  <div role=\"tabpanel\" [attr.aria-labelledby]=\"id() ? 'tab-' + id() : null\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTab, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-tab', template: "@if (isActive()) {\n  <div role=\"tabpanel\" [attr.aria-labelledby]=\"id() ? 'tab-' + id() : null\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n  <div role=\"tabpanel\" [attr.aria-labelledby]=\"id() ? 'tab-' + id() : null\">\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class TailwindTabGroup extends TailwindComponent {
@@ -2281,11 +2722,11 @@ class TailwindTabGroup extends TailwindComponent {
         this.activeIndex.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-neutral-500]=\"activeIndex() !== i\"\n        [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-neutral-500]=\"activeIndex() !== i\"\n        [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-tab-group', template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-neutral-500]=\"activeIndex() !== i\"\n        [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-neutral-500]=\"activeIndex() !== i\"\n        [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindTab), { isSignal: true }] }] } });
 
 class TailwindProgressBar extends TailwindComponent {
@@ -2337,11 +2778,11 @@ class TailwindProgressBar extends TailwindComponent {
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "barClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindProgressBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindProgressBar, isStandalone: true, selector: "tailwind-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindProgressBar, isStandalone: true, selector: "tailwind-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindProgressBar, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-progress-bar', template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] }]
+            args: [{ selector: 'tailwind-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }] } });
 
 /** Matches previous `min-w-48` floor when the anchor is narrower. */
@@ -2515,11 +2956,11 @@ class TailwindMenu extends TailwindComponent {
         return document.documentElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-neutral-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-neutral-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-menu', template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-neutral-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'tailwind-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-neutral-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2578,11 +3019,11 @@ class TailwindDrawer extends TailwindComponent {
         }, 300);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDrawer, isStandalone: true, selector: "tailwind-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-auto cursor-pointer\"\n        aria-label=\"Close\"\n        (click)=\"close()\">\n        <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDrawer, isStandalone: true, selector: "tailwind-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n      }\n      <tailwind-button\n        kind=\"ghost\"\n        color=\"transparent\"\n        size=\"sm\"\n        icon=\"x-mark\"\n        class=\"ml-auto shrink-0 -m-1.5\"\n        ariaLabel=\"Close\"\n        (onClick)=\"close()\" />\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-drawer', template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-auto cursor-pointer\"\n        aria-label=\"Close\"\n        (click)=\"close()\">\n        <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
+            args: [{ imports: [TailwindButton], selector: 'tailwind-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n      }\n      <tailwind-button\n        kind=\"ghost\"\n        color=\"transparent\"\n        size=\"sm\"\n        icon=\"x-mark\"\n        class=\"ml-auto shrink-0 -m-1.5\"\n        ariaLabel=\"Close\"\n        (onClick)=\"close()\" />\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 
 class TailwindBreadcrumb extends TailwindComponent {
@@ -2590,22 +3031,35 @@ class TailwindBreadcrumb extends TailwindComponent {
     separator = input('>', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n  <ol class=\"inline-flex items-center text-sm\">\r\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n      <li class=\"inline-flex items-center\">\r\n        @if (!first) {\r\n          <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\r\n            {{ separator() }}\r\n          </span>\r\n        }\r\n        @if (item.link && !last) {\r\n          <a\r\n            [routerLink]=\"item.link\"\r\n            class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 font-medium\"\r\n            [class.text-neutral-900]=\"last\"\r\n            [class.text-neutral-500]=\"!last\"\r\n            [attr.aria-current]=\"last ? 'page' : null\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center text-sm\">\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\n      <li class=\"inline-flex items-center\">\n        @if (!first) {\n          <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\n            {{ separator() }}\n          </span>\n        }\n        @if (item.link && !last) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </a>\n        } @else {\n          <span\n            class=\"inline-flex items-center gap-1 font-medium\"\n            [class.text-neutral-900]=\"last\"\n            [class.text-neutral-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, decorators: [{
             type: Component,
-            args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n  <ol class=\"inline-flex items-center text-sm\">\r\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n      <li class=\"inline-flex items-center\">\r\n        @if (!first) {\r\n          <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\r\n            {{ separator() }}\r\n          </span>\r\n        }\r\n        @if (item.link && !last) {\r\n          <a\r\n            [routerLink]=\"item.link\"\r\n            class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 font-medium\"\r\n            [class.text-neutral-900]=\"last\"\r\n            [class.text-neutral-500]=\"!last\"\r\n            [attr.aria-current]=\"last ? 'page' : null\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center text-sm\">\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\n      <li class=\"inline-flex items-center\">\n        @if (!first) {\n          <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\n            {{ separator() }}\n          </span>\n        }\n        @if (item.link && !last) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </a>\n        } @else {\n          <span\n            class=\"inline-flex items-center gap-1 font-medium\"\n            [class.text-neutral-900]=\"last\"\n            [class.text-neutral-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\n            }\n            {{ item.label }}\n          </span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+const DEFAULT_PAGINATION_LENGTH_OPTIONS = [5, 10, 25, 50];
 class TailwindPagination extends TailwindComponent {
     tailwindPaginationSummary = inject(TAILWIND_PAGINATION_SUMMARY, { optional: true });
     totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    lengthOptions = input([...DEFAULT_PAGINATION_LENGTH_OPTIONS], ...(ngDevMode ? [{ debugName: "lengthOptions" }] : /* istanbul ignore next */ []));
     currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Placeholders `{start}`, `{end}`, `{total}`; default from `TAILWIND_PAGINATION_SUMMARY` or English copy. */
     summary = input(this.tailwindPaginationSummary ?? 'Showing {start}-{end} of {total}', ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
     onPageChange = output();
+    onPageSizeChange = output();
+    pageSizeOptions = computed(() => {
+        const options = [...this.lengthOptions()];
+        const current = this.pageSize();
+        if (!options.includes(current)) {
+            options.push(current);
+            options.sort((a, b) => a - b);
+        }
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageSizeSelectOptions = computed(() => this.pageSizeOptions().map(size => ({ value: size, label: String(size) })), ...(ngDevMode ? [{ debugName: "pageSizeSelectOptions" }] : /* istanbul ignore next */ []));
     totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     visiblePages = computed(() => {
         const total = this.totalPages();
@@ -2628,13 +3082,28 @@ class TailwindPagination extends TailwindComponent {
             this.onPageChange.emit(page);
         }
     }
+    onPageSizeValueChange(value) {
+        if (typeof value !== 'number')
+            return;
+        this.setPageSize(value);
+    }
+    setPageSize(size) {
+        if (!Number.isFinite(size) || size <= 0 || size === this.pageSize())
+            return;
+        this.pageSize.set(size);
+        this.onPageSizeChange.emit(size);
+        if (this.currentPage() !== 1) {
+            this.currentPage.set(1);
+            this.onPageChange.emit(1);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageChange: "onPageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  @if (summary()) {\n    <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n      {{ summaryText() }}\n    </span>\n  }\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n    <!-- Previous -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() <= 1\"\n      (click)=\"goToPage(currentPage() - 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        (click)=\"goToPage(page)\"\n        class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n        [class.bg-primary-600]=\"page === currentPage()\"\n        [class.text-white]=\"page === currentPage()\"\n        [class.text-neutral-600]=\"page !== currentPage()\"\n        [class.hover:bg-neutral-100]=\"page !== currentPage()\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Next -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      (click)=\"goToPage(currentPage() + 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, lengthOptions: { classPropertyName: "lengthOptions", publicName: "lengthOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n    @if (summary()) {\n      <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n        {{ summaryText() }}\n      </span>\n    }\n\n    @if (lengthOptions().length > 0) {\n      <div class=\"w-20 shrink-0\">\n        <tailwind-select\n          size=\"sm\"\n          [options]=\"pageSizeSelectOptions()\"\n          [value]=\"pageSize()\"\n          (valueChange)=\"onPageSizeValueChange($event)\" />\n      </div>\n    }\n  </div>\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n  <!-- Previous -->\n    <tailwind-button\n      kind=\"ghost\"\n      color=\"transparent\"\n      size=\"sm\"\n      icon=\"chevron-left\"\n      [disabled]=\"currentPage() <= 1\"\n      ariaLabel=\"Previous page\"\n      (onClick)=\"goToPage(currentPage() - 1)\" />\n\n    @for (page of visiblePages(); track page) {\n      <tailwind-button\n        size=\"sm\"\n        [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n        [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n        class=\"min-w-8\"\n        (onClick)=\"goToPage(page)\">\n        {{ page }}\n      </tailwind-button>\n    }\n\n    <!-- Next -->\n    <tailwind-button\n      kind=\"ghost\"\n      color=\"transparent\"\n      size=\"sm\"\n      icon=\"chevron-right\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      ariaLabel=\"Next page\"\n      (onClick)=\"goToPage(currentPage() + 1)\" />\n  </nav>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindSelect, selector: "tailwind-select", inputs: ["label", "placeholder", "options", "size", "helperText", "errorText", "hasError", "multiple", "value"], outputs: ["valueChange"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-pagination', template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  @if (summary()) {\n    <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n      {{ summaryText() }}\n    </span>\n  }\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n    <!-- Previous -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() <= 1\"\n      (click)=\"goToPage(currentPage() - 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        (click)=\"goToPage(page)\"\n        class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n        [class.bg-primary-600]=\"page === currentPage()\"\n        [class.text-white]=\"page === currentPage()\"\n        [class.text-neutral-600]=\"page !== currentPage()\"\n        [class.hover:bg-neutral-100]=\"page !== currentPage()\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Next -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      (click)=\"goToPage(currentPage() + 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }] } });
+            args: [{ selector: 'tailwind-pagination', imports: [TailwindSelect, TailwindButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  <div class=\"flex flex-wrap items-center gap-3 min-w-0\">\n    @if (summary()) {\n      <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n        {{ summaryText() }}\n      </span>\n    }\n\n    @if (lengthOptions().length > 0) {\n      <div class=\"w-20 shrink-0\">\n        <tailwind-select\n          size=\"sm\"\n          [options]=\"pageSizeSelectOptions()\"\n          [value]=\"pageSize()\"\n          (valueChange)=\"onPageSizeValueChange($event)\" />\n      </div>\n    }\n  </div>\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n  <!-- Previous -->\n    <tailwind-button\n      kind=\"ghost\"\n      color=\"transparent\"\n      size=\"sm\"\n      icon=\"chevron-left\"\n      [disabled]=\"currentPage() <= 1\"\n      ariaLabel=\"Previous page\"\n      (onClick)=\"goToPage(currentPage() - 1)\" />\n\n    @for (page of visiblePages(); track page) {\n      <tailwind-button\n        size=\"sm\"\n        [kind]=\"page === currentPage() ? 'flat' : 'ghost'\"\n        [color]=\"page === currentPage() ? 'primary' : 'secondary'\"\n        class=\"min-w-8\"\n        (onClick)=\"goToPage(page)\">\n        {{ page }}\n      </tailwind-button>\n    }\n\n    <!-- Next -->\n    <tailwind-button\n      kind=\"ghost\"\n      color=\"transparent\"\n      size=\"sm\"\n      icon=\"chevron-right\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      ariaLabel=\"Next page\"\n      (onClick)=\"goToPage(currentPage() + 1)\" />\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], lengthOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onPageSizeChange: [{ type: i0.Output, args: ["onPageSizeChange"] }] } });
 
 class TailwindTag extends TailwindComponent {
     variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -2650,11 +3119,11 @@ class TailwindTag extends TailwindComponent {
         return `inline-flex items-center text-[11px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded ${variantMap[this.variant()]}`;
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindTag, isStandalone: true, selector: "tailwind-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<span [class]=\"computedClasses()\"><ng-content /></span>\n", styles: [":host{display:inline-block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindTag, isStandalone: true, selector: "tailwind-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<span [class]=\"computedClasses()\"><ng-content /></span>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTag, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-tag', template: "<span [class]=\"computedClasses()\"><ng-content /></span>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'tailwind-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"computedClasses()\"><ng-content /></span>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class TailwindTable extends TailwindComponent {
@@ -2669,6 +3138,7 @@ class TailwindTable extends TailwindComponent {
     paginated = input(true, ...(ngDevMode ? [{ debugName: "paginated" }] : /* istanbul ignore next */ []));
     pagination = input(...(ngDevMode ? [undefined, { debugName: "pagination" }] : /* istanbul ignore next */ []));
     paginationSummary = computed(() => this.pagination()?.summary ?? this.tailwindPaginationSummary ?? 'Showing {start}-{end} of {total}', ...(ngDevMode ? [{ debugName: "paginationSummary" }] : /* istanbul ignore next */ []));
+    paginationLengthOptions = computed(() => this.pagination()?.lengthOptions ?? [...DEFAULT_PAGINATION_LENGTH_OPTIONS], ...(ngDevMode ? [{ debugName: "paginationLengthOptions" }] : /* istanbul ignore next */ []));
     onSortChange = output();
     onSelectionChange = output();
     rowTemplate = contentChild.required(TailwindTableRowDirective);
@@ -2690,6 +3160,7 @@ class TailwindTable extends TailwindComponent {
     sortDir = signal('asc', ...(ngDevMode ? [{ debugName: "sortDir" }] : /* istanbul ignore next */ []));
     selectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
     currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         effect(() => {
@@ -2698,6 +3169,12 @@ class TailwindTable extends TailwindComponent {
                 this.currentPage.set(fromInput);
             }
         });
+        effect(() => {
+            const fromInput = this.pagination()?.pageSize;
+            if (fromInput != null && fromInput > 0) {
+                this.pageSize.set(fromInput);
+            }
+        });
     }
     sortedData = computed(() => {
         let rows = [...this.data()];
@@ -2718,7 +3195,7 @@ class TailwindTable extends TailwindComponent {
         const rows = this.sortedData();
         if (!this.paginated())
             return rows;
-        const size = this.pagination()?.pageSize ?? 10;
+        const size = this.pageSize();
         const page = this.currentPage();
         return rows.slice((page - 1) * size, page * size);
     }, ...(ngDevMode ? [{ debugName: "displayedData" }] : /* istanbul ignore next */ []));
@@ -2770,14 +3247,14 @@ class TailwindTable extends TailwindComponent {
             this.sort(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTable, isStandalone: true, selector: "tailwind-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyColspan: { classPropertyName: "emptyColspan", publicName: "emptyColspan", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChange: "onSortChange", onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "onSortZoneClick($event)", "keydown": "onSortZoneKeydown($event)" }, properties: { "attr.data-tw-sort-key": "sortKey()", "attr.data-tw-sort-dir": "sortDir()" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: TailwindTableRowDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n      <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n      </svg>\n      Loading...\n    </div>\n  } @else {\n    <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n    <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track row; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pagination()?.pageSize ?? 10\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"paginationSummary()\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindPagination, selector: "tailwind-pagination", inputs: ["totalItems", "pageSize", "currentPage", "ariaLabel", "summary"], outputs: ["currentPageChange", "onPageChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTable, isStandalone: true, selector: "tailwind-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyColspan: { classPropertyName: "emptyColspan", publicName: "emptyColspan", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChange: "onSortChange", onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "onSortZoneClick($event)", "keydown": "onSortZoneKeydown($event)" }, properties: { "attr.data-tw-sort-key": "sortKey()", "attr.data-tw-sort-dir": "sortDir()" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: TailwindTableRowDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n      <tailwind-icon icon=\"arrow-path\" [size]=\"24\" class=\"animate-spin mr-2 text-neutral-400\" />\n      Loading...\n    </div>\n  } @else {\n    <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n    <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track $index; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pageSize()\"\n          (pageSizeChange)=\"pageSize.set($event)\"\n          [lengthOptions]=\"paginationLengthOptions()\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"paginationSummary()\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindPagination, selector: "tailwind-pagination", inputs: ["totalItems", "pageSize", "lengthOptions", "currentPage", "ariaLabel", "summary"], outputs: ["pageSizeChange", "currentPageChange", "onPageChange", "onPageSizeChange"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-table', imports: [NgTemplateOutlet, TailwindPagination], host: {
+            args: [{ selector: 'tailwind-table', imports: [NgTemplateOutlet, TailwindPagination, TailwindIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-tw-sort-key]': 'sortKey()',
                         '[attr.data-tw-sort-dir]': 'sortDir()'
-                    }, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n      <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n      </svg>\n      Loading...\n    </div>\n  } @else {\n    <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n    <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track row; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pagination()?.pageSize ?? 10\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"paginationSummary()\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"] }]
+                    }, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n      <tailwind-icon icon=\"arrow-path\" [size]=\"24\" class=\"animate-spin mr-2 text-neutral-400\" />\n      Loading...\n    </div>\n  } @else {\n    <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n    <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track $index; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pageSize()\"\n          (pageSizeChange)=\"pageSize.set($event)\"\n          [lengthOptions]=\"paginationLengthOptions()\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"paginationSummary()\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyColspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColspan", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TailwindTableRowDirective), { isSignal: true }] }], onSortZoneClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -2788,14 +3265,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 
 const I18N$2 = {
     it: {
-        months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
+        months: [
+            'Gennaio',
+            'Febbraio',
+            'Marzo',
+            'Aprile',
+            'Maggio',
+            'Giugno',
+            'Luglio',
+            'Agosto',
+            'Settembre',
+            'Ottobre',
+            'Novembre',
+            'Dicembre'
+        ],
         weekDays: ['Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa', 'Do'],
         today: 'Oggi',
         confirm: 'Applica',
         placeholder: 'Seleziona data'
     },
     en: {
-        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December'
+        ],
         weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         today: 'Today',
         confirm: 'Apply',
@@ -2852,9 +3355,15 @@ class TailwindDatePicker extends TailwindComponent {
             this.viewYear.set(v.getFullYear());
         }
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(d) { this.isDisabled.set(d); }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.isDisabled.set(d);
+    }
     toggleCalendar() {
         if (this.isDisabled())
             return;
@@ -2925,11 +3434,11 @@ class TailwindDatePicker extends TailwindComponent {
         this.showCalendar.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <button\n          type=\"button\"\n          (click)=\"prevMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n        <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n        <button\n          type=\"button\"\n          (click)=\"goToToday()\"\n          [disabled]=\"isDisabled()\"\n          class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n          {{ i18n.today }}\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          [disabled]=\"isDisabled() || !draft()\"\n          class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n          {{ i18n.confirm }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <tailwind-icon\n      icon=\"calendar-days\"\n      [size]=\"16\"\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <tailwind-button\n          kind=\"ghost\"\n          color=\"transparent\"\n          size=\"sm\"\n          icon=\"chevron-left\"\n          ariaLabel=\"Previous month\"\n          (onClick)=\"prevMonth()\" />\n        <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n        <tailwind-button\n          kind=\"ghost\"\n          color=\"transparent\"\n          size=\"sm\"\n          icon=\"chevron-right\"\n          ariaLabel=\"Next month\"\n          (onClick)=\"nextMonth()\" />\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n        <tailwind-button\n          kind=\"text\"\n          color=\"primary\"\n          size=\"xs\"\n          [disabled]=\"isDisabled()\"\n          (onClick)=\"goToToday()\">\n          {{ i18n.today }}\n        </tailwind-button>\n        <tailwind-button\n          kind=\"solid\"\n          color=\"primary\"\n          size=\"sm\"\n          [disabled]=\"isDisabled() || !draft()\"\n          (onClick)=\"apply()\">\n          {{ i18n.confirm }}\n        </tailwind-button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <button\n          type=\"button\"\n          (click)=\"prevMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n        <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n        <button\n          type=\"button\"\n          (click)=\"goToToday()\"\n          [disabled]=\"isDisabled()\"\n          class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n          {{ i18n.today }}\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          [disabled]=\"isDisabled() || !draft()\"\n          class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n          {{ i18n.confirm }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
+            args: [{ imports: [TailwindIcon, TailwindButton], selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <tailwind-icon\n      icon=\"calendar-days\"\n      [size]=\"16\"\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <tailwind-button\n          kind=\"ghost\"\n          color=\"transparent\"\n          size=\"sm\"\n          icon=\"chevron-left\"\n          ariaLabel=\"Previous month\"\n          (onClick)=\"prevMonth()\" />\n        <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n        <tailwind-button\n          kind=\"ghost\"\n          color=\"transparent\"\n          size=\"sm\"\n          icon=\"chevron-right\"\n          ariaLabel=\"Next month\"\n          (onClick)=\"nextMonth()\" />\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n        <tailwind-button\n          kind=\"text\"\n          color=\"primary\"\n          size=\"xs\"\n          [disabled]=\"isDisabled()\"\n          (onClick)=\"goToToday()\">\n          {{ i18n.today }}\n        </tailwind-button>\n        <tailwind-button\n          kind=\"solid\"\n          color=\"primary\"\n          size=\"sm\"\n          [disabled]=\"isDisabled() || !draft()\"\n          (onClick)=\"apply()\">\n          {{ i18n.confirm }}\n        </tailwind-button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -3024,11 +3533,11 @@ class TailwindTimePicker extends TailwindComponent {
         this.showPanel.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToNow()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.now }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.apply }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <tailwind-icon\n      icon=\"clock\"\n      [size]=\"16\"\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <tailwind-button\n            kind=\"text\"\n            color=\"primary\"\n            size=\"xs\"\n            [disabled]=\"isDisabled()\"\n            (onClick)=\"goToNow()\">\n            {{ i18n.now }}\n          </tailwind-button>\n          <tailwind-button\n            kind=\"solid\"\n            color=\"primary\"\n            size=\"sm\"\n            [disabled]=\"isDisabled()\"\n            (onClick)=\"apply()\">\n            {{ i18n.apply }}\n          </tailwind-button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-time-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToNow()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.now }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.apply }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-time-picker', imports: [TailwindIcon, TailwindButton], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <tailwind-icon\n      icon=\"clock\"\n      [size]=\"16\"\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <tailwind-button\n            kind=\"text\"\n            color=\"primary\"\n            size=\"xs\"\n            [disabled]=\"isDisabled()\"\n            (onClick)=\"goToNow()\">\n            {{ i18n.now }}\n          </tailwind-button>\n          <tailwind-button\n            kind=\"solid\"\n            color=\"primary\"\n            size=\"sm\"\n            [disabled]=\"isDisabled()\"\n            (onClick)=\"apply()\">\n            {{ i18n.apply }}\n          </tailwind-button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -3039,7 +3548,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 
 const I18N = {
     it: {
-        months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
+        months: [
+            'Gennaio',
+            'Febbraio',
+            'Marzo',
+            'Aprile',
+            'Maggio',
+            'Giugno',
+            'Luglio',
+            'Agosto',
+            'Settembre',
+            'Ottobre',
+            'Novembre',
+            'Dicembre'
+        ],
         weekDays: ['Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa', 'Do'],
         time: 'Ora',
         today: 'Oggi',
@@ -3047,7 +3569,20 @@ const I18N = {
         placeholder: 'Seleziona data e ora'
     },
     en: {
-        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December'
+        ],
         weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
         time: 'Time',
         today: 'Today',
@@ -3112,9 +3647,15 @@ class TailwindDateTimePicker extends TailwindComponent {
         this.viewMonth.set(ref.getMonth());
         this.viewYear.set(ref.getFullYear());
     }
-    registerOnChange(fn) { this.onChange = fn; }
-    registerOnTouched(fn) { this.onTouched = fn; }
-    setDisabledState(disabled) { this.isDisabled.set(disabled); }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
     togglePanel() {
         if (this.isDisabled())
             return;
@@ -3207,11 +3748,11 @@ class TailwindDateTimePicker extends TailwindComponent {
         this.showPanel.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <button\n            type=\"button\"\n            (click)=\"prevMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToToday()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.today }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled() || !draft()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.confirm }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <tailwind-icon\n      icon=\"calendar-days\"\n      [size]=\"16\"\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <tailwind-button\n            kind=\"ghost\"\n            color=\"transparent\"\n            size=\"sm\"\n            icon=\"chevron-left\"\n            ariaLabel=\"Previous month\"\n            (onClick)=\"prevMonth()\" />\n          <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n          <tailwind-button\n            kind=\"ghost\"\n            color=\"transparent\"\n            size=\"sm\"\n            icon=\"chevron-right\"\n            ariaLabel=\"Next month\"\n            (onClick)=\"nextMonth()\" />\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <tailwind-button\n            kind=\"text\"\n            color=\"primary\"\n            size=\"xs\"\n            [disabled]=\"isDisabled()\"\n            (onClick)=\"goToToday()\">\n            {{ i18n.today }}\n          </tailwind-button>\n          <tailwind-button\n            kind=\"solid\"\n            color=\"primary\"\n            size=\"sm\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (onClick)=\"apply()\">\n            {{ i18n.confirm }}\n          </tailwind-button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-datetime-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <button\n            type=\"button\"\n            (click)=\"prevMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToToday()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.today }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled() || !draft()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.confirm }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
+            args: [{ selector: 'tailwind-datetime-picker', imports: [TailwindIcon, TailwindButton], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <tailwind-icon\n      icon=\"calendar-days\"\n      [size]=\"16\"\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none\" />\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <tailwind-button\n            kind=\"ghost\"\n            color=\"transparent\"\n            size=\"sm\"\n            icon=\"chevron-left\"\n            ariaLabel=\"Previous month\"\n            (onClick)=\"prevMonth()\" />\n          <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n          <tailwind-button\n            kind=\"ghost\"\n            color=\"transparent\"\n            size=\"sm\"\n            icon=\"chevron-right\"\n            ariaLabel=\"Next month\"\n            (onClick)=\"nextMonth()\" />\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <tailwind-button\n            kind=\"text\"\n            color=\"primary\"\n            size=\"xs\"\n            [disabled]=\"isDisabled()\"\n            (onClick)=\"goToToday()\">\n            {{ i18n.today }}\n          </tailwind-button>\n          <tailwind-button\n            kind=\"solid\"\n            color=\"primary\"\n            size=\"sm\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (onClick)=\"apply()\">\n            {{ i18n.confirm }}\n          </tailwind-button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -3227,11 +3768,11 @@ class TailwindStep extends TailwindComponent {
     completed = signal(false, ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
     isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStep, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStep, isStandalone: true, selector: "tailwind-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isActive()) {\n  <div class=\"py-4\"><ng-content /></div>\n}\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStep, isStandalone: true, selector: "tailwind-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isActive()) {\n  <div class=\"py-4\"><ng-content /></div>\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStep, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-step', template: "@if (isActive()) {\n  <div class=\"py-4\"><ng-content /></div>\n}\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n  <div class=\"py-4\"><ng-content /></div>\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }] } });
 
 class TailwindStepper extends TailwindComponent {
@@ -3263,11 +3804,11 @@ class TailwindStepper extends TailwindComponent {
             this.activeIndex.update(v => v - 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-neutral-300]=\"i > activeIndex()\"\n          [class.text-neutral-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-neutral-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-neutral-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-neutral-300]=\"i > activeIndex()\"\n          [class.text-neutral-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <tailwind-icon icon=\"check\" [size]=\"16\" />\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-neutral-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-neutral-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-stepper', template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-neutral-300]=\"i > activeIndex()\"\n          [class.text-neutral-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-neutral-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-neutral-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [TailwindIcon], selector: 'tailwind-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-neutral-300]=\"i > activeIndex()\"\n          [class.text-neutral-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <tailwind-icon icon=\"check\" [size]=\"16\" />\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-neutral-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-neutral-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindStep), { isSignal: true }] }] } });
 
 class TailwindAccordionItem extends TailwindComponent {
@@ -3282,21 +3823,21 @@ class TailwindAccordionItem extends TailwindComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordionItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAccordionItem, isStandalone: true, selector: "tailwind-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\r\n    [attr.aria-expanded]=\"isExpanded()\">\r\n    <span>{{ title() }}</span>\r\n    <svg\r\n      class=\"w-4 h-4 text-neutral-400 transition-transform duration-200\"\r\n      [class.rotate-180]=\"isExpanded()\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 20 20\"\r\n      fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n        clip-rule=\"evenodd\" />\r\n    </svg>\r\n  </button>\r\n  @if (isExpanded()) {\r\n    <div class=\"px-5 py-4 text-sm text-neutral-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAccordionItem, isStandalone: true, selector: "tailwind-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\n  <button\n    type=\"button\"\n    (click)=\"toggle()\"\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\n    [attr.aria-expanded]=\"isExpanded()\">\n    <span>{{ title() }}</span>\n    <tailwind-icon\n      icon=\"chevron-down\"\n      [size]=\"16\"\n      class=\"text-neutral-400 transition-transform duration-200\"\n      [class.rotate-180]=\"isExpanded()\" />\n  </button>\n  @if (isExpanded()) {\n    <div class=\"px-5 py-4 text-sm text-neutral-600\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordionItem, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'tailwind-accordion-item', template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\r\n    [attr.aria-expanded]=\"isExpanded()\">\r\n    <span>{{ title() }}</span>\r\n    <svg\r\n      class=\"w-4 h-4 text-neutral-400 transition-transform duration-200\"\r\n      [class.rotate-180]=\"isExpanded()\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 20 20\"\r\n      fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n        clip-rule=\"evenodd\" />\r\n    </svg>\r\n  </button>\r\n  @if (isExpanded()) {\r\n    <div class=\"px-5 py-4 text-sm text-neutral-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [CommonModule, TailwindIcon], selector: 'tailwind-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\n  <button\n    type=\"button\"\n    (click)=\"toggle()\"\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\n    [attr.aria-expanded]=\"isExpanded()\">\n    <span>{{ title() }}</span>\n    <tailwind-icon\n      icon=\"chevron-down\"\n      [size]=\"16\"\n      class=\"text-neutral-400 transition-transform duration-200\"\n      [class.rotate-180]=\"isExpanded()\" />\n  </button>\n  @if (isExpanded()) {\n    <div class=\"px-5 py-4 text-sm text-neutral-600\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onToggle: [{ type: i0.Output, args: ["onToggle"] }] } });
 
 class TailwindAccordion extends TailwindComponent {
     items = contentChildren(TailwindAccordionItem, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  [id]=\"id()\"\r\n  [ngClass]=\"class()\"\r\n  class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [id]=\"id()\"\n  [ngClass]=\"class()\"\n  class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordion, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'tailwind-accordion', template: "<div\r\n  [id]=\"id()\"\r\n  [ngClass]=\"class()\"\r\n  class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [CommonModule], selector: 'tailwind-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [id]=\"id()\"\n  [ngClass]=\"class()\"\n  class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindAccordionItem), { isSignal: true }] }] } });
 
 class TailwindModalRef {
@@ -3436,11 +3977,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class TailwindToast extends TailwindComponent {
     toastService = inject(TailwindToastService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToast, isStandalone: true, selector: "tailwind-toast", usesInheritance: true, ngImport: i0, template: "<div class=\"fixed bottom-4 right-4 z-1080 flex flex-col gap-2 max-w-sm w-full pointer-events-none\">\r\n  @for (toast of toastService.toasts(); track toast.id) {\r\n    <div\r\n      class=\"pointer-events-auto rounded-xl border shadow-lg p-4 flex gap-3 animate-in slide-in-from-right-full duration-300\"\r\n      [class.bg-success-50]=\"toast.severity === 'success'\"\r\n      [class.border-success-200]=\"toast.severity === 'success'\"\r\n      [class.bg-warning-50]=\"toast.severity === 'warning'\"\r\n      [class.border-warning-200]=\"toast.severity === 'warning'\"\r\n      [class.bg-danger-50]=\"toast.severity === 'danger'\"\r\n      [class.border-danger-200]=\"toast.severity === 'danger'\"\r\n      [class.bg-info-50]=\"toast.severity === 'info'\"\r\n      [class.border-info-200]=\"toast.severity === 'info'\"\r\n      role=\"alert\">\r\n      <div class=\"flex-1 min-w-0\">\r\n        @if (toast.title) {\r\n          <p class=\"text-sm font-semibold mb-0.5\">{{ toast.title }}</p>\r\n        }\r\n        <p class=\"text-sm\">{{ toast.message }}</p>\r\n      </div>\r\n      @if (toast.dismissible) {\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"toastService.dismiss(toast.id)\"\r\n          class=\"shrink-0 p-1 rounded-lg opacity-60 hover:opacity-100 transition-opacity cursor-pointer\"\r\n          aria-label=\"Dismiss\">\r\n          <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToast, isStandalone: true, selector: "tailwind-toast", usesInheritance: true, ngImport: i0, template: "<div class=\"fixed bottom-4 right-4 z-1080 flex flex-col gap-2 max-w-sm w-full pointer-events-none\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"pointer-events-auto rounded-xl border shadow-lg p-4 flex gap-3 animate-in slide-in-from-right-full duration-300\"\n      [class.bg-success-50]=\"toast.severity === 'success'\"\n      [class.border-success-200]=\"toast.severity === 'success'\"\n      [class.bg-warning-50]=\"toast.severity === 'warning'\"\n      [class.border-warning-200]=\"toast.severity === 'warning'\"\n      [class.bg-danger-50]=\"toast.severity === 'danger'\"\n      [class.border-danger-200]=\"toast.severity === 'danger'\"\n      [class.bg-info-50]=\"toast.severity === 'info'\"\n      [class.border-info-200]=\"toast.severity === 'info'\"\n      role=\"alert\">\n      <div class=\"flex-1 min-w-0\">\n        @if (toast.title) {\n          <p class=\"text-sm font-semibold mb-0.5\">{{ toast.title }}</p>\n        }\n        <p class=\"text-sm\">{{ toast.message }}</p>\n      </div>\n      @if (toast.dismissible) {\n        <tailwind-button\n          kind=\"ghost\"\n          color=\"transparent\"\n          size=\"sm\"\n          icon=\"x-mark\"\n          class=\"shrink-0 opacity-60 hover:opacity-100\"\n          ariaLabel=\"Dismiss\"\n          (onClick)=\"toastService.dismiss(toast.id)\" />\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToast, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-toast', template: "<div class=\"fixed bottom-4 right-4 z-1080 flex flex-col gap-2 max-w-sm w-full pointer-events-none\">\r\n  @for (toast of toastService.toasts(); track toast.id) {\r\n    <div\r\n      class=\"pointer-events-auto rounded-xl border shadow-lg p-4 flex gap-3 animate-in slide-in-from-right-full duration-300\"\r\n      [class.bg-success-50]=\"toast.severity === 'success'\"\r\n      [class.border-success-200]=\"toast.severity === 'success'\"\r\n      [class.bg-warning-50]=\"toast.severity === 'warning'\"\r\n      [class.border-warning-200]=\"toast.severity === 'warning'\"\r\n      [class.bg-danger-50]=\"toast.severity === 'danger'\"\r\n      [class.border-danger-200]=\"toast.severity === 'danger'\"\r\n      [class.bg-info-50]=\"toast.severity === 'info'\"\r\n      [class.border-info-200]=\"toast.severity === 'info'\"\r\n      role=\"alert\">\r\n      <div class=\"flex-1 min-w-0\">\r\n        @if (toast.title) {\r\n          <p class=\"text-sm font-semibold mb-0.5\">{{ toast.title }}</p>\r\n        }\r\n        <p class=\"text-sm\">{{ toast.message }}</p>\r\n      </div>\r\n      @if (toast.dismissible) {\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"toastService.dismiss(toast.id)\"\r\n          class=\"shrink-0 p-1 rounded-lg opacity-60 hover:opacity-100 transition-opacity cursor-pointer\"\r\n          aria-label=\"Dismiss\">\r\n          <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n            <path\r\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ imports: [TailwindButton], selector: 'tailwind-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed bottom-4 right-4 z-1080 flex flex-col gap-2 max-w-sm w-full pointer-events-none\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div\n      class=\"pointer-events-auto rounded-xl border shadow-lg p-4 flex gap-3 animate-in slide-in-from-right-full duration-300\"\n      [class.bg-success-50]=\"toast.severity === 'success'\"\n      [class.border-success-200]=\"toast.severity === 'success'\"\n      [class.bg-warning-50]=\"toast.severity === 'warning'\"\n      [class.border-warning-200]=\"toast.severity === 'warning'\"\n      [class.bg-danger-50]=\"toast.severity === 'danger'\"\n      [class.border-danger-200]=\"toast.severity === 'danger'\"\n      [class.bg-info-50]=\"toast.severity === 'info'\"\n      [class.border-info-200]=\"toast.severity === 'info'\"\n      role=\"alert\">\n      <div class=\"flex-1 min-w-0\">\n        @if (toast.title) {\n          <p class=\"text-sm font-semibold mb-0.5\">{{ toast.title }}</p>\n        }\n        <p class=\"text-sm\">{{ toast.message }}</p>\n      </div>\n      @if (toast.dismissible) {\n        <tailwind-button\n          kind=\"ghost\"\n          color=\"transparent\"\n          size=\"sm\"\n          icon=\"x-mark\"\n          class=\"shrink-0 opacity-60 hover:opacity-100\"\n          ariaLabel=\"Dismiss\"\n          (onClick)=\"toastService.dismiss(toast.id)\" />\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:contents}\n"] }]
         }] });
 
 class TailwindNotification extends TailwindComponent {
@@ -3456,14 +3997,14 @@ class TailwindNotification extends TailwindComponent {
             danger: 'bg-danger-50 border-danger-200 text-danger-800',
             info: 'bg-info-50 border-info-200 text-info-800'
         };
-        return `flex items-start rounded-xl border p-4 ${variantMap[this.severity()]}`;
+        return `flex items-start rounded-lg border p-4 ${variantMap[this.severity()]}`;
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindNotification, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindNotification, isStandalone: true, selector: "tailwind-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n  <div class=\"flex-1 min-w-0\">\n    @if (title()) {\n      <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n    }\n    <p class=\"text-sm\"><ng-content /></p>\n    @if (showActions()) {\n      <div class=\"pt-3\">\n        <ng-content select=\"[tailwind-notification-actions]\" />\n      </div>\n    }\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      (click)=\"onDismiss.emit()\"\n      class=\"shrink-0 p-1 -m-1 rounded-lg opacity-60 hover:opacity-100 transition-opacity cursor-pointer\"\n      aria-label=\"Dismiss\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n      </svg>\n    </button>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindNotification, isStandalone: true, selector: "tailwind-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n  <div class=\"flex-1 min-w-0\">\n    @if (title()) {\n      <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n    }\n    <p class=\"text-sm\"><ng-content /></p>\n    @if (showActions()) {\n      <div class=\"pt-3\">\n        <ng-content select=\"[tailwind-notification-actions]\" />\n      </div>\n    }\n  </div>\n  @if (dismissible()) {\n    <tailwind-button\n      kind=\"ghost\"\n      color=\"transparent\"\n      size=\"sm\"\n      icon=\"x-mark\"\n      class=\"shrink-0 -m-1 opacity-60 hover:opacity-100\"\n      ariaLabel=\"Dismiss\"\n      (onClick)=\"onDismiss.emit()\" />\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type", "role", "icon", "iconPosition", "ariaLabel"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindNotification, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-notification', template: "<div [class]=\"computedClasses()\" role=\"alert\">\n  <div class=\"flex-1 min-w-0\">\n    @if (title()) {\n      <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n    }\n    <p class=\"text-sm\"><ng-content /></p>\n    @if (showActions()) {\n      <div class=\"pt-3\">\n        <ng-content select=\"[tailwind-notification-actions]\" />\n      </div>\n    }\n  </div>\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      (click)=\"onDismiss.emit()\"\n      class=\"shrink-0 p-1 -m-1 rounded-lg opacity-60 hover:opacity-100 transition-opacity cursor-pointer\"\n      aria-label=\"Dismiss\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n      </svg>\n    </button>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [TailwindButton], selector: 'tailwind-notification', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"computedClasses()\" role=\"alert\">\n  <div class=\"flex-1 min-w-0\">\n    @if (title()) {\n      <p class=\"text-sm font-semibold mb-0.5\">{{ title() }}</p>\n    }\n    <p class=\"text-sm\"><ng-content /></p>\n    @if (showActions()) {\n      <div class=\"pt-3\">\n        <ng-content select=\"[tailwind-notification-actions]\" />\n      </div>\n    }\n  </div>\n  @if (dismissible()) {\n    <tailwind-button\n      kind=\"ghost\"\n      color=\"transparent\"\n      size=\"sm\"\n      icon=\"x-mark\"\n      class=\"shrink-0 -m-1 opacity-60 hover:opacity-100\"\n      ariaLabel=\"Dismiss\"\n      (onClick)=\"onDismiss.emit()\" />\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
 
 class TailwindMessage extends TailwindComponent {
@@ -3478,11 +4019,11 @@ class TailwindMessage extends TailwindComponent {
         return `text-sm px-3 py-2 rounded-lg border ${variantMap[this.severity()]}`;
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMessage, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindMessage, isStandalone: true, selector: "tailwind-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"status\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindMessage, isStandalone: true, selector: "tailwind-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"computedClasses()\" role=\"status\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMessage, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-message', template: "<div [class]=\"computedClasses()\" role=\"status\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"computedClasses()\" role=\"status\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
 
 class TailwindSkeleton extends TailwindComponent {
@@ -3500,11 +4041,11 @@ class TailwindSkeleton extends TailwindComponent {
         return `${base} ${variantMap[this.variant()]}`;
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSkeleton, isStandalone: true, selector: "tailwind-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSkeleton, isStandalone: true, selector: "tailwind-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSkeleton, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-skeleton', template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] }]
+            args: [{ selector: 'tailwind-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 class TailwindToolbar extends TailwindComponent {
@@ -3545,7 +4086,7 @@ class TailwindToolbar extends TailwindComponent {
         };
         return map[v];
     }, ...(ngDevMode ? [{ debugName: "variantContrastTextClass" }] : /* istanbul ignore next */ []));
-    /** Heroicons are `<img>`; on light-on-color variants tint SVG strokes to match `text-on-*`. */
+    /** On light-on-color variants, tint masked icons to match `text-on-*`. */
     menuItemIconClasses = computed(() => this.variant() !== 'default' && this.variant() !== 'warning' ? 'toolbar-menu-icon-on-light' : '', ...(ngDevMode ? [{ debugName: "menuItemIconClasses" }] : /* istanbul ignore next */ []));
     menuItemToneClasses = computed(() => {
         const contrast = this.variantContrastTextClass();
@@ -3626,11 +4167,11 @@ class TailwindToolbar extends TailwindComponent {
         return item.value ?? item.label ?? String(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\r\n  <div class=\"shrink-0\">\r\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n  </div>\r\n  @if (orientation() === 'horizontal') {\r\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @if (menu().length) {\r\n        <div class=\"flex shrink-0 items-center md:hidden\">\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"mobileMenuToggleClasses()\"\r\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            aria-label=\"Open navigation menu\"\r\n            (click)=\"mobileToolbarMenu.toggle($event)\">\r\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n          </button>\r\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n        </div>\r\n      }\r\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n        @for (item of menu(); track menuTrackKey($index, item)) {\r\n          @if (item.divider) {\r\n            <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\r\n          } @else {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"!!item.disabled\"\r\n              [class]=\"menuItemButtonClasses()\"\r\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n              (click)=\"selectMenuItem(item)\">\r\n              @if (item.icon) {\r\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\r\n              }\r\n              @if (menuItemHasVisibleLabel(item)) {\r\n                {{ item.label }}\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </nav>\r\n  } @else {\r\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @for (item of menu(); track menuTrackKey($index, item)) {\r\n        @if (item.divider) {\r\n          <hr [class]=\"menuDividerRuleClasses()\" />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class]=\"menuItemButtonClasses()\"\r\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n            (click)=\"selectMenuItem(item)\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n            }\r\n            @if (menuItemHasVisibleLabel(item)) {\r\n              {{ item.label }}\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n  <div\r\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n    [class.justify-end]=\"orientation() === 'horizontal'\"\r\n    [class.mt-auto]=\"orientation() === 'vertical'\">\r\n    <ng-content select=\"[tailwind-toolbar-end]\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light img{filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align"], outputs: ["onSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\n  <div class=\"shrink-0\">\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\n  </div>\n  @if (orientation() === 'horizontal') {\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n      @if (menu().length) {\n        <div class=\"flex shrink-0 items-center md:hidden\">\n          <button\n            type=\"button\"\n            [class]=\"mobileMenuToggleClasses()\"\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n            aria-haspopup=\"menu\"\n            aria-label=\"Open navigation menu\"\n            (click)=\"mobileToolbarMenu.toggle($event)\">\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n          </button>\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\n        </div>\n      }\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\n        @for (item of menu(); track menuTrackKey($index, item)) {\n          @if (item.divider) {\n            <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\n          } @else {\n            <button\n              type=\"button\"\n              [disabled]=\"!!item.disabled\"\n              [class]=\"menuItemButtonClasses()\"\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\n              (click)=\"selectMenuItem(item)\">\n              @if (item.icon) {\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n              }\n              @if (menuItemHasVisibleLabel(item)) {\n                {{ item.label }}\n              }\n            </button>\n          }\n        }\n      </div>\n    </nav>\n  } @else {\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\n      @for (item of menu(); track menuTrackKey($index, item)) {\n        @if (item.divider) {\n          <hr [class]=\"menuDividerRuleClasses()\" />\n        } @else {\n          <button\n            type=\"button\"\n            [disabled]=\"!!item.disabled\"\n            [class]=\"menuItemButtonClasses()\"\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\n            (click)=\"selectMenuItem(item)\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n            }\n            @if (menuItemHasVisibleLabel(item)) {\n              {{ item.label }}\n            }\n          </button>\n        }\n      }\n    </nav>\n  }\n  <div\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\n    [class.justify-end]=\"orientation() === 'horizontal'\"\n    [class.mt-auto]=\"orientation() === 'vertical'\">\n    <ng-content select=\"[tailwind-toolbar-end]\" />\n  </div>\n</div>\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light .tailwind-icon-glyph{filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align"], outputs: ["onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, decorators: [{
             type: Component,
-            args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', template: "<div [class]=\"rootClasses()\">\r\n  <div class=\"shrink-0\">\r\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n  </div>\r\n  @if (orientation() === 'horizontal') {\r\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @if (menu().length) {\r\n        <div class=\"flex shrink-0 items-center md:hidden\">\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"mobileMenuToggleClasses()\"\r\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            aria-label=\"Open navigation menu\"\r\n            (click)=\"mobileToolbarMenu.toggle($event)\">\r\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n          </button>\r\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n        </div>\r\n      }\r\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n        @for (item of menu(); track menuTrackKey($index, item)) {\r\n          @if (item.divider) {\r\n            <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\r\n          } @else {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"!!item.disabled\"\r\n              [class]=\"menuItemButtonClasses()\"\r\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n              (click)=\"selectMenuItem(item)\">\r\n              @if (item.icon) {\r\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\r\n              }\r\n              @if (menuItemHasVisibleLabel(item)) {\r\n                {{ item.label }}\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </nav>\r\n  } @else {\r\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @for (item of menu(); track menuTrackKey($index, item)) {\r\n        @if (item.divider) {\r\n          <hr [class]=\"menuDividerRuleClasses()\" />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class]=\"menuItemButtonClasses()\"\r\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n            (click)=\"selectMenuItem(item)\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n            }\r\n            @if (menuItemHasVisibleLabel(item)) {\r\n              {{ item.label }}\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n  <div\r\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n    [class.justify-end]=\"orientation() === 'horizontal'\"\r\n    [class.mt-auto]=\"orientation() === 'vertical'\">\r\n    <ng-content select=\"[tailwind-toolbar-end]\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light img{filter:brightness(0) invert(1)}\n"] }]
+            args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rootClasses()\">\n  <div class=\"shrink-0\">\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\n  </div>\n  @if (orientation() === 'horizontal') {\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\n      @if (menu().length) {\n        <div class=\"flex shrink-0 items-center md:hidden\">\n          <button\n            type=\"button\"\n            [class]=\"mobileMenuToggleClasses()\"\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\n            aria-haspopup=\"menu\"\n            aria-label=\"Open navigation menu\"\n            (click)=\"mobileToolbarMenu.toggle($event)\">\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n          </button>\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\n        </div>\n      }\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\n        @for (item of menu(); track menuTrackKey($index, item)) {\n          @if (item.divider) {\n            <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\n          } @else {\n            <button\n              type=\"button\"\n              [disabled]=\"!!item.disabled\"\n              [class]=\"menuItemButtonClasses()\"\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\n              (click)=\"selectMenuItem(item)\">\n              @if (item.icon) {\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\n              }\n              @if (menuItemHasVisibleLabel(item)) {\n                {{ item.label }}\n              }\n            </button>\n          }\n        }\n      </div>\n    </nav>\n  } @else {\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\n      @for (item of menu(); track menuTrackKey($index, item)) {\n        @if (item.divider) {\n          <hr [class]=\"menuDividerRuleClasses()\" />\n        } @else {\n          <button\n            type=\"button\"\n            [disabled]=\"!!item.disabled\"\n            [class]=\"menuItemButtonClasses()\"\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\n            (click)=\"selectMenuItem(item)\">\n            @if (item.icon) {\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\n            }\n            @if (menuItemHasVisibleLabel(item)) {\n              {{ item.label }}\n            }\n          </button>\n        }\n      }\n    </nav>\n  }\n  <div\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\n    [class.justify-end]=\"orientation() === 'horizontal'\"\n    [class.mt-auto]=\"orientation() === 'vertical'\">\n    <ng-content select=\"[tailwind-toolbar-end]\" />\n  </div>\n</div>\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light .tailwind-icon-glyph{filter:brightness(0) invert(1)}\n"] }]
         }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], onMenuSelect: [{ type: i0.Output, args: ["onMenuSelect"] }] } });
 
 class TailwindDivider extends TailwindComponent {
@@ -3658,11 +4199,11 @@ class TailwindDivider extends TailwindComponent {
     }, ...(ngDevMode ? [{ debugName: "ruleLineClass" }] : /* istanbul ignore next */ []));
     labeledRowClass = computed(() => ['flex items-center gap-3 w-full my-4', this.inset() ? 'mx-4' : ''].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "labeledRowClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDivider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDivider, isStandalone: true, selector: "tailwind-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLabeledHorizontal()) {\r\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n    <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n  </div>\r\n} @else {\r\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDivider, isStandalone: true, selector: "tailwind-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLabeledHorizontal()) {\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n    <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n  </div>\n} @else {\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDivider, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-divider', template: "@if (isLabeledHorizontal()) {\r\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n    <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n  </div>\r\n} @else {\r\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLabeledHorizontal()) {\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n    <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\n  </div>\n} @else {\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class TailwindMeter extends TailwindComponent {
@@ -3719,11 +4260,11 @@ class TailwindMeter extends TailwindComponent {
         return map[variant] ?? map['primary'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\r\n  <div\r\n    [class]=\"trackContainerClasses()\"\r\n    role=\"meter\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"scaleMax()\"\r\n    [attr.aria-valuenow]=\"totalValue()\"\r\n    [attr.aria-label]=\"'Meter'\">\r\n    @for (seg of segmentLayouts(); track $index) {\r\n      @if (seg.widthPct > 0) {\r\n        <div\r\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n          [class]=\"seg.barClass\"\r\n          [style.width.%]=\"seg.widthPct\"\r\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (showLabels()) {\r\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\r\n      @for (seg of segments(); track $index) {\r\n        <span class=\"inline-flex items-center gap-1.5\">\r\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n          <span>{{ seg.label }}</span>\r\n          <span class=\"text-neutral-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\n  <div\n    [class]=\"trackContainerClasses()\"\n    role=\"meter\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"scaleMax()\"\n    [attr.aria-valuenow]=\"totalValue()\"\n    [attr.aria-label]=\"'Meter'\">\n    @for (seg of segmentLayouts(); track $index) {\n      @if (seg.widthPct > 0) {\n        <div\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n          [class]=\"seg.barClass\"\n          [style.width.%]=\"seg.widthPct\"\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n      }\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\n      @for (seg of segments(); track $index) {\n        <span class=\"inline-flex items-center gap-1.5\">\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\n          <span>{{ seg.label }}</span>\n          <span class=\"text-neutral-400\">({{ seg.value }})</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-meter', template: "<div class=\"w-full space-y-2\">\r\n  <div\r\n    [class]=\"trackContainerClasses()\"\r\n    role=\"meter\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"scaleMax()\"\r\n    [attr.aria-valuenow]=\"totalValue()\"\r\n    [attr.aria-label]=\"'Meter'\">\r\n    @for (seg of segmentLayouts(); track $index) {\r\n      @if (seg.widthPct > 0) {\r\n        <div\r\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n          [class]=\"seg.barClass\"\r\n          [style.width.%]=\"seg.widthPct\"\r\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (showLabels()) {\r\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\r\n      @for (seg of segments(); track $index) {\r\n        <span class=\"inline-flex items-center gap-1.5\">\r\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n          <span>{{ seg.label }}</span>\r\n          <span class=\"text-neutral-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-meter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full space-y-2\">\n  <div\n    [class]=\"trackContainerClasses()\"\n    role=\"meter\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"scaleMax()\"\n    [attr.aria-valuenow]=\"totalValue()\"\n    [attr.aria-label]=\"'Meter'\">\n    @for (seg of segmentLayouts(); track $index) {\n      @if (seg.widthPct > 0) {\n        <div\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\n          [class]=\"seg.barClass\"\n          [style.width.%]=\"seg.widthPct\"\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\n      }\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\n      @for (seg of segments(); track $index) {\n        <span class=\"inline-flex items-center gap-1.5\">\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\n          <span>{{ seg.label }}</span>\n          <span class=\"text-neutral-400\">({{ seg.value }})</span>\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class TailwindSlider extends TailwindComponent {
@@ -3803,7 +4344,7 @@ class TailwindSlider extends TailwindComponent {
     lowPct = computed(() => this.valueToPct(this.rangeLow()), ...(ngDevMode ? [{ debugName: "lowPct" }] : /* istanbul ignore next */ []));
     highPct = computed(() => this.valueToPct(this.rangeHigh()), ...(ngDevMode ? [{ debugName: "highPct" }] : /* istanbul ignore next */ []));
     fillStartPct = computed(() => (this.range() ? Math.min(this.lowPct(), this.highPct()) : 0), ...(ngDevMode ? [{ debugName: "fillStartPct" }] : /* istanbul ignore next */ []));
-    fillWidthPct = computed(() => this.range() ? Math.abs(this.highPct() - this.lowPct()) : this.singlePct(), ...(ngDevMode ? [{ debugName: "fillWidthPct" }] : /* istanbul ignore next */ []));
+    fillWidthPct = computed(() => (this.range() ? Math.abs(this.highPct() - this.lowPct()) : this.singlePct()), ...(ngDevMode ? [{ debugName: "fillWidthPct" }] : /* istanbul ignore next */ []));
     tickPositions = computed(() => {
         if (!this.showTicks()) {
             return [];
@@ -4008,7 +4549,7 @@ class TailwindSlider extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindSlider),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"trackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\r\n            [style.left.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <!-- fill -->\r\n      <div\r\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"verticalTrackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\r\n            [style.bottom.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] });
+        ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\n  <div\n    #track\n    class=\"relative w-full touch-none select-none py-3\"\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\n    <div class=\"relative h-6 w-full\">\n      <!-- rail -->\n      <div\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\n        [class]=\"trackThickness()\"></div>\n\n      @if (showTicks()) {\n        @for (p of tickPositions(); track $index) {\n          <div\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\n            [style.left.%]=\"p\"></div>\n        }\n      }\n\n      <!-- fill -->\n      <div\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\n        [class]=\"trackThickness()\"\n        [style.background-color]=\"accentVars().fill\"\n        [style.left.%]=\"fillStartPct()\"\n        [style.width.%]=\"fillWidthPct()\"></div>\n\n      @if (range()) {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.left.%]=\"lowPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeLow()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.left.%]=\"highPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeHigh()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\n          (keydown)=\"onKeyDown($event, 1)\"></button>\n      } @else {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.left.%]=\"singlePct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"singleValue()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n      }\n    </div>\n  </div>\n} @else {\n  <div\n    #track\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\n    <div class=\"relative h-full w-full\">\n      <div\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\n        [class]=\"verticalTrackThickness()\"></div>\n\n      @if (showTicks()) {\n        @for (p of tickPositions(); track $index) {\n          <div\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\n            [style.bottom.%]=\"p\"></div>\n        }\n      }\n\n      <div\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\n        [class]=\"verticalTrackThickness()\"\n        [style.background-color]=\"accentVars().fill\"\n        [style.bottom.%]=\"fillStartPct()\"\n        [style.height.%]=\"fillWidthPct()\"></div>\n\n      @if (range()) {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.bottom.%]=\"lowPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeLow()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.bottom.%]=\"highPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeHigh()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\n          (keydown)=\"onKeyDown($event, 1)\"></button>\n      } @else {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.bottom.%]=\"singlePct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"singleValue()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
             type: Component,
@@ -4018,7 +4559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindSlider),
                             multi: true
                         }
-                    ], template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"trackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\r\n            [style.left.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <!-- fill -->\r\n      <div\r\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"verticalTrackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\r\n            [style.bottom.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (orientation() === 'horizontal') {\n  <div\n    #track\n    class=\"relative w-full touch-none select-none py-3\"\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\n    <div class=\"relative h-6 w-full\">\n      <!-- rail -->\n      <div\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\n        [class]=\"trackThickness()\"></div>\n\n      @if (showTicks()) {\n        @for (p of tickPositions(); track $index) {\n          <div\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\n            [style.left.%]=\"p\"></div>\n        }\n      }\n\n      <!-- fill -->\n      <div\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\n        [class]=\"trackThickness()\"\n        [style.background-color]=\"accentVars().fill\"\n        [style.left.%]=\"fillStartPct()\"\n        [style.width.%]=\"fillWidthPct()\"></div>\n\n      @if (range()) {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.left.%]=\"lowPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeLow()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.left.%]=\"highPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeHigh()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\n          (keydown)=\"onKeyDown($event, 1)\"></button>\n      } @else {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.left.%]=\"singlePct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"singleValue()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n      }\n    </div>\n  </div>\n} @else {\n  <div\n    #track\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\n    <div class=\"relative h-full w-full\">\n      <div\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\n        [class]=\"verticalTrackThickness()\"></div>\n\n      @if (showTicks()) {\n        @for (p of tickPositions(); track $index) {\n          <div\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\n            [style.bottom.%]=\"p\"></div>\n        }\n      }\n\n      <div\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\n        [class]=\"verticalTrackThickness()\"\n        [style.background-color]=\"accentVars().fill\"\n        [style.bottom.%]=\"fillStartPct()\"\n        [style.height.%]=\"fillWidthPct()\"></div>\n\n      @if (range()) {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.bottom.%]=\"lowPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeLow()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.bottom.%]=\"highPct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"rangeHigh()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\n          (keydown)=\"onKeyDown($event, 1)\"></button>\n      } @else {\n        <button\n          type=\"button\"\n          [disabled]=\"isEffectivelyDisabled()\"\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\n          [class]=\"thumbSizeClass()\"\n          [style.background-color]=\"accentVars().thumb\"\n          [style.--slider-ring]=\"accentVars().ring\"\n          [style.bottom.%]=\"singlePct()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"singleValue()\"\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\n          (keydown)=\"onKeyDown($event, 0)\"></button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
         }], propDecorators: { 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 }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 // Batch 1 — Foundation
@@ -4191,5 +4732,5 @@ function defineTheme(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
+export { DEFAULT_PAGINATION_LENGTH_OPTIONS, TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindAutocomplete, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
 //# sourceMappingURL=angular-tailwind-components.mjs.map