angular-tailwind-components 1.0.0

package/fesm2022/angular-tailwind-components.mjs

@@ -0,0 +1,3144 @@
+import * as i0 from '@angular/core';
+import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, output, InjectionToken, model, forwardRef, effect, contentChildren, ApplicationRef, EnvironmentInjector, Injector, createComponent, Injectable, booleanAttribute } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, NgClass, formatDate, CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription, fromEvent } from 'rxjs';
+
+/** Common types used across all components */
+
+/** Heroicons icon name (kebab-case). SVG assets live in `public/icons/` (outline 24×24). */
+const TAILWIND_HERO_ICON_NAMES = [
+    'academic-cap',
+    'adjustments-horizontal',
+    'adjustments-vertical',
+    'archive-box',
+    'archive-box-arrow-down',
+    'archive-box-x-mark',
+    'arrow-down',
+    'arrow-down-circle',
+    'arrow-down-left',
+    'arrow-down-on-square',
+    'arrow-down-on-square-stack',
+    'arrow-down-right',
+    'arrow-down-tray',
+    'arrow-left',
+    'arrow-left-circle',
+    'arrow-left-end-on-rectangle',
+    'arrow-left-on-rectangle',
+    'arrow-left-start-on-rectangle',
+    'arrow-long-down',
+    'arrow-long-left',
+    'arrow-long-right',
+    'arrow-long-up',
+    'arrow-path',
+    'arrow-path-rounded-square',
+    'arrow-right',
+    'arrow-right-circle',
+    'arrow-right-end-on-rectangle',
+    'arrow-right-on-rectangle',
+    'arrow-right-start-on-rectangle',
+    'arrow-small-down',
+    'arrow-small-left',
+    'arrow-small-right',
+    'arrow-small-up',
+    'arrows-pointing-in',
+    'arrows-pointing-out',
+    'arrows-right-left',
+    'arrows-up-down',
+    'arrow-top-right-on-square',
+    'arrow-trending-down',
+    'arrow-trending-up',
+    'arrow-turn-down-left',
+    'arrow-turn-down-right',
+    'arrow-turn-left-down',
+    'arrow-turn-left-up',
+    'arrow-turn-right-down',
+    'arrow-turn-right-up',
+    'arrow-turn-up-left',
+    'arrow-turn-up-right',
+    'arrow-up',
+    'arrow-up-circle',
+    'arrow-up-left',
+    'arrow-up-on-square',
+    'arrow-up-on-square-stack',
+    'arrow-up-right',
+    'arrow-up-tray',
+    'arrow-uturn-down',
+    'arrow-uturn-left',
+    'arrow-uturn-right',
+    'arrow-uturn-up',
+    'at-symbol',
+    'backspace',
+    'backward',
+    'banknotes',
+    'bars-2',
+    'bars-3',
+    'bars-3-bottom-left',
+    'bars-3-bottom-right',
+    'bars-3-center-left',
+    'bars-4',
+    'bars-arrow-down',
+    'bars-arrow-up',
+    'battery-0',
+    'battery-100',
+    'battery-50',
+    'beaker',
+    'bell',
+    'bell-alert',
+    'bell-slash',
+    'bell-snooze',
+    'bold',
+    'bolt',
+    'bolt-slash',
+    'bookmark',
+    'bookmark-slash',
+    'bookmark-square',
+    'book-open',
+    'briefcase',
+    'bug-ant',
+    'building-library',
+    'building-office',
+    'building-office-2',
+    'building-storefront',
+    'cake',
+    'calculator',
+    'calendar',
+    'calendar-date-range',
+    'calendar-days',
+    'camera',
+    'chart-bar',
+    'chart-bar-square',
+    'chart-pie',
+    'chat-bubble-bottom-center',
+    'chat-bubble-bottom-center-text',
+    'chat-bubble-left',
+    'chat-bubble-left-ellipsis',
+    'chat-bubble-left-right',
+    'chat-bubble-oval-left',
+    'chat-bubble-oval-left-ellipsis',
+    'check',
+    'check-badge',
+    'check-circle',
+    'chevron-double-down',
+    'chevron-double-left',
+    'chevron-double-right',
+    'chevron-double-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'chevron-up-down',
+    'circle-stack',
+    'clipboard',
+    'clipboard-document',
+    'clipboard-document-check',
+    'clipboard-document-list',
+    'clock',
+    'cloud',
+    'cloud-arrow-down',
+    'cloud-arrow-up',
+    'code-bracket',
+    'code-bracket-square',
+    'cog',
+    'cog-6-tooth',
+    'cog-8-tooth',
+    'command-line',
+    'computer-desktop',
+    'cpu-chip',
+    'credit-card',
+    'cube',
+    'cube-transparent',
+    'currency-bangladeshi',
+    'currency-dollar',
+    'currency-euro',
+    'currency-pound',
+    'currency-rupee',
+    'currency-yen',
+    'cursor-arrow-rays',
+    'cursor-arrow-ripple',
+    'device-phone-mobile',
+    'device-tablet',
+    'divide',
+    'document',
+    'document-arrow-down',
+    'document-arrow-up',
+    'document-chart-bar',
+    'document-check',
+    'document-currency-bangladeshi',
+    'document-currency-dollar',
+    'document-currency-euro',
+    'document-currency-pound',
+    'document-currency-rupee',
+    'document-currency-yen',
+    'document-duplicate',
+    'document-magnifying-glass',
+    'document-minus',
+    'document-plus',
+    'document-text',
+    'ellipsis-horizontal',
+    'ellipsis-horizontal-circle',
+    'ellipsis-vertical',
+    'envelope',
+    'envelope-open',
+    'equals',
+    'exclamation-circle',
+    'exclamation-triangle',
+    'eye',
+    'eye-dropper',
+    'eye-slash',
+    'face-frown',
+    'face-smile',
+    'film',
+    'finger-print',
+    'fire',
+    'flag',
+    'folder',
+    'folder-arrow-down',
+    'folder-minus',
+    'folder-open',
+    'folder-plus',
+    'forward',
+    'funnel',
+    'gif',
+    'gift',
+    'gift-top',
+    'globe-alt',
+    'globe-americas',
+    'globe-asia-australia',
+    'globe-europe-africa',
+    'h1',
+    'h2',
+    'h3',
+    'hand-raised',
+    'hand-thumb-down',
+    'hand-thumb-up',
+    'hashtag',
+    'heart',
+    'home',
+    'home-modern',
+    'identification',
+    'inbox',
+    'inbox-arrow-down',
+    'inbox-stack',
+    'information-circle',
+    'italic',
+    'key',
+    'language',
+    'lifebuoy',
+    'light-bulb',
+    'link',
+    'link-slash',
+    'list-bullet',
+    'lock-closed',
+    'lock-open',
+    'magnifying-glass',
+    'magnifying-glass-circle',
+    'magnifying-glass-minus',
+    'magnifying-glass-plus',
+    'map',
+    'map-pin',
+    'megaphone',
+    'microphone',
+    'minus',
+    'minus-circle',
+    'minus-small',
+    'moon',
+    'musical-note',
+    'newspaper',
+    'no-symbol',
+    'numbered-list',
+    'paint-brush',
+    'paper-airplane',
+    'paper-clip',
+    'pause',
+    'pause-circle',
+    'pencil',
+    'pencil-square',
+    'percent-badge',
+    'phone',
+    'phone-arrow-down-left',
+    'phone-arrow-up-right',
+    'phone-x-mark',
+    'photo',
+    'play',
+    'play-circle',
+    'play-pause',
+    'plus',
+    'plus-circle',
+    'plus-small',
+    'power',
+    'presentation-chart-bar',
+    'presentation-chart-line',
+    'printer',
+    'puzzle-piece',
+    'qr-code',
+    'question-mark-circle',
+    'queue-list',
+    'radio',
+    'receipt-percent',
+    'receipt-refund',
+    'rectangle-group',
+    'rectangle-stack',
+    'rocket-launch',
+    'rss',
+    'scale',
+    'scissors',
+    'server',
+    'server-stack',
+    'share',
+    'shield-check',
+    'shield-exclamation',
+    'shopping-bag',
+    'shopping-cart',
+    'signal',
+    'signal-slash',
+    'slash',
+    'sparkles',
+    'speaker-wave',
+    'speaker-x-mark',
+    'square-2-stack',
+    'square-3-stack-3d',
+    'squares-2x2',
+    'squares-plus',
+    'star',
+    'stop',
+    'stop-circle',
+    'strikethrough',
+    'sun',
+    'swatch',
+    'table-cells',
+    'tag',
+    'ticket',
+    'trash',
+    'trophy',
+    'truck',
+    'tv',
+    'underline',
+    'user',
+    'user-circle',
+    'user-group',
+    'user-minus',
+    'user-plus',
+    'users',
+    'variable',
+    'video-camera',
+    'video-camera-slash',
+    'view-columns',
+    'viewfinder-circle',
+    'wallet',
+    'wifi',
+    'window',
+    'wrench',
+    'wrench-screwdriver',
+    'x-circle',
+    'x-mark',
+];
+
+class TailwindComponent {
+    /** Optional ID for the component */
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Custom CSS classes to append */
+    class = input(undefined, { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindComponent, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id() || null", "class": "class() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.id]': 'id() || null',
+                        '[class]': 'class() || null'
+                    }
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class TailwindTooltip extends TailwindComponent {
+    /** Tooltip text */
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Position relative to trigger */
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    topPos = signal(0, ...(ngDevMode ? [{ debugName: "topPos" }] : /* istanbul ignore next */ []));
+    leftPos = signal(0, ...(ngDevMode ? [{ debugName: "leftPos" }] : /* istanbul ignore next */ []));
+    targetElement = null;
+    document = inject(DOCUMENT);
+    ngZone = inject(NgZone);
+    el = inject(ElementRef);
+    tooltipEl = viewChild.required('tooltipEl');
+    scrollListener = () => this.updatePosition();
+    tooltipClasses = computed(() => {
+        const base = [
+            'fixed z-[1070] px-3 py-1.5',
+            'text-xs font-medium text-white bg-surface-900 rounded-lg',
+            'shadow-lg whitespace-nowrap pointer-events-none',
+            'transition-opacity duration-150',
+            this.isVisible() ? 'opacity-100' : 'opacity-0'
+        ];
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "tooltipClasses" }] : /* istanbul ignore next */ []));
+    arrowClasses = computed(() => {
+        const base = 'absolute w-2 h-2 bg-surface-900 rotate-45';
+        const posMap = {
+            top: 'top-full left-1/2 -translate-x-1/2 -mt-1',
+            bottom: 'bottom-full left-1/2 -translate-x-1/2 -mb-1',
+            left: 'left-full top-1/2 -translate-y-1/2 -ml-1',
+            right: 'right-full top-1/2 -translate-y-1/2 -mr-1'
+        };
+        return `${base} ${posMap[this.position()]}`;
+    }, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        this.updatePosition();
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    setTarget(el) {
+        this.targetElement = el;
+        this.updatePosition();
+    }
+    getFixedOrigin() {
+        const dummy = this.document.createElement('div');
+        dummy.style.position = 'fixed';
+        dummy.style.top = '0';
+        dummy.style.left = '0';
+        this.el.nativeElement.appendChild(dummy);
+        const rect = dummy.getBoundingClientRect();
+        this.el.nativeElement.removeChild(dummy);
+        return { top: rect.top, left: rect.left };
+    }
+    updatePosition() {
+        if (!this.targetElement)
+            return;
+        const origin = this.getFixedOrigin();
+        const targetRect = this.targetElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl().nativeElement.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (this.position()) {
+            case 'top':
+                top = targetRect.top - tooltipRect.height - 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = targetRect.bottom + 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.left - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.right + 8;
+                break;
+        }
+        this.ngZone.run(() => {
+            this.topPos.set(top - origin.top);
+            this.leftPos.set(left - origin.left);
+        });
+    }
+    show() {
+        this.updatePosition();
+        this.ngZone.run(() => {
+            this.isVisible.set(true);
+        });
+        this.ngZone.runOutsideAngular(() => {
+            window.addEventListener('scroll', this.scrollListener, true);
+            window.addEventListener('resize', this.scrollListener, true);
+        });
+    }
+    hide() {
+        this.ngZone.run(() => {
+            this.isVisible.set(false);
+        });
+        window.removeEventListener('scroll', this.scrollListener, true);
+        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"] });
+}
+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"] }]
+        }], 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';
+    showTimeout = null;
+    hideTimeout = null;
+    componentRef = null;
+    viewContainerRef = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    show() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+        if (this.componentRef) {
+            return;
+        }
+        this.showTimeout = setTimeout(() => {
+            this.createComponent();
+        }, 200);
+    }
+    hide() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        if (!this.componentRef) {
+            return;
+        }
+        this.componentRef.instance.hide();
+        this.hideTimeout = setTimeout(() => {
+            this.destroyComponent();
+        }, 150);
+    }
+    createComponent() {
+        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);
+        setTimeout(() => {
+            if (this.componentRef) {
+                this.componentRef.instance.show();
+            }
+        });
+    }
+    destroyComponent() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    ngOnDestroy() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]'
+                }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: ['tooltip']
+            }], tooltipPosition: [{
+                type: Input
+            }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focusin']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class TailwindButton extends TailwindComponent {
+    /** Visual color */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Visual kind: `ghost` = transparent with hover tint; `text` = text color only, no hover background */
+    kind = input('solid', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    /** Size of the button */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether the button is disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** HTML button type attribute */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Emitted when the button is clicked (not disabled/loading) */
+    onClick = output();
+    /** Computed Tailwind classes based on color, kind, size, and state */
+    computedClasses = computed(() => {
+        const base = [
+            'inline-flex items-center justify-center gap-2',
+            'font-medium',
+            'transition-all duration-150 ease-in-out',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            'cursor-pointer',
+            'border'
+        ];
+        const solidMap = {
+            primary: 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 border-transparent focus-visible:outline-primary-600 shadow-sm',
+            secondary: 'bg-surface-100 text-surface-800 hover:bg-surface-200 active:bg-surface-300 border-surface-300 focus-visible:outline-surface-500 shadow-sm',
+            danger: 'bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800 border-transparent focus-visible:outline-danger-600 shadow-sm',
+            success: 'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 border-transparent focus-visible:outline-success-600 shadow-sm',
+            warning: 'bg-warning-500 text-surface-900 hover:bg-warning-600 active:bg-warning-700 border-transparent focus-visible:outline-warning-500 shadow-sm',
+            info: 'bg-info-600 text-white hover:bg-info-700 active:bg-info-800 border-transparent focus-visible:outline-info-600 shadow-sm'
+        };
+        const outlinedMap = {
+            primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
+            secondary: 'bg-transparent text-surface-700 border-surface-300 hover:bg-surface-50 active:bg-surface-100 focus-visible:outline-surface-500',
+            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'
+        };
+        /** Transparent + hover/active background tint (former `text` look). */
+        const ghostMap = {
+            primary: 'bg-transparent text-primary-600 border-transparent hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
+            secondary: 'bg-transparent text-surface-700 border-transparent hover:bg-surface-100 active:bg-surface-200 focus-visible:outline-surface-500',
+            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'
+        };
+        /** Text color from severity only; background stays transparent on hover/active. */
+        const textMap = {
+            primary: 'bg-transparent text-primary-600 border-transparent focus-visible:outline-primary-600',
+            secondary: 'bg-transparent text-surface-700 border-transparent focus-visible:outline-surface-500',
+            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'
+        };
+        const styleMap = {
+            solid: solidMap,
+            outlined: outlinedMap,
+            ghost: ghostMap,
+            text: textMap
+        };
+        const sizeMap = {
+            xs: 'text-xs px-2 py-1 rounded-sm',
+            sm: 'text-sm px-3 py-1.5 rounded-md',
+            md: 'text-sm px-4 py-2 rounded-md',
+            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'
+        };
+        return [...base, styleMap[this.kind()][this.color()] || styleMap['solid']['primary'], sizeMap[this.size()]].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        if (!this.disabled()) {
+            this.onClick.emit(event);
+        }
+    }
+    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"] }] });
+}
+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"] }] } });
+
+const TAILWIND_MODAL_DATA = new InjectionToken('TAILWIND_MODAL_DATA');
+const TAILWIND_ICON_SIZE = new InjectionToken('TAILWIND_ICON_SIZE');
+const TAILWIND_DATETIME_LANGUAGE = new InjectionToken('TAILWIND_DATETIME_LANGUAGE');
+const TAILWIND_COMPONENTS_SIZE = new InjectionToken('TAILWIND_COMPONENTS_SIZE');
+
+class TailwindIcon extends TailwindComponent {
+    iconSize = inject(TAILWIND_ICON_SIZE, { optional: true });
+    /** Heroicon name; SVG path `public/icons/<name>.svg` */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** `normal` = 24×24, `small` = 16×16; default dalla DI (`TAILWIND_ICON_SIZE`) se presente */
+    size = input(this.iconSize ?? 'normal', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    src = computed(() => `/tailwind-icons/${this.icon()}.svg`, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    pixelSize = computed(() => (this.size() === 'small' ? 16 : 24), ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* 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" });
+}
+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" }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class TailwindInput extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Input type */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether the input is readonly */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below input */
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error text shown when hasError is true */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    /** Whether the input is in error state */
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Two-way bound value */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Computed input classes */
+    inputClasses = computed(() => {
+        const base = [
+            'block w-full bg-white',
+            'border transition-colors duration-150',
+            'placeholder:text-surface-400',
+            'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
+            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed'
+        ];
+        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-surface-300 focus:outline-primary-500 text-surface-900';
+        return [...base, sizeMap[this.size()], stateClass].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    onInputChange(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindInput, isStandalone: true, selector: "tailwind-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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-surface-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-surface-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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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-surface-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-surface-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 TailwindCheckbox extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Description text */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Unique ID */
+    /** Two-way bound checked state */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Box size class based on size input */
+    boxSizeClass = computed(() => {
+        const sizeMap = {
+            xs: 'w-3.5 h-3.5',
+            sm: 'w-4 h-4',
+            md: 'w-5 h-5',
+            lg: 'w-6 h-6',
+            xl: 'w-7 h-7'
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "boxSizeClass" }] : /* istanbul ignore next */ []));
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    onCheckboxChange(event) {
+        const val = event.target.checked;
+        this.checked.set(val);
+        this.onChange(val);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCheckbox, isStandalone: true, selector: "tailwind-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindCheckbox),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<label\n  [attr.for]=\"id() ? id() + '-inner' : null\"\n  class=\"inline-flex items-center gap-2.5 cursor-pointer select-none\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n  [class.opacity-50]=\"isDisabled()\">\n  <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"boxSizeClass()\">\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      (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-surface-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  </div>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span class=\"text-sm font-medium text-surface-800 leading-tight\">{{ label() }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-surface-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</label>\n", styles: [":host{display:inline-block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindCheckbox),
+                            multi: true
+                        }
+                    ], template: "<label\n  [attr.for]=\"id() ? id() + '-inner' : null\"\n  class=\"inline-flex items-center gap-2.5 cursor-pointer select-none\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n  [class.opacity-50]=\"isDisabled()\">\n  <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"boxSizeClass()\">\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      (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-surface-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  </div>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span class=\"text-sm font-medium text-surface-800 leading-tight\">{{ label() }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-surface-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</label>\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 {
+    /** Label for the radio group */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Aria label for accessibility */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Name for the radio group (used for native radio grouping) */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Available options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Layout orientation */
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Currently selected value */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Radio button outer ring size */
+    radioSizeClass = computed(() => {
+        const sizeMap = {
+            xs: 'w-3.5 h-3.5',
+            sm: 'w-4 h-4',
+            md: 'w-5 h-5',
+            lg: 'w-6 h-6',
+            xl: 'w-7 h-7'
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "radioSizeClass" }] : /* istanbul ignore next */ []));
+    /** Inner dot size */
+    dotSizeClass = computed(() => {
+        const sizeMap = {
+            xs: 'w-1.5 h-1.5',
+            sm: 'w-2 h-2',
+            md: 'w-2.5 h-2.5',
+            lg: 'w-3 h-3',
+            xl: 'w-3.5 h-3.5'
+        };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "dotSizeClass" }] : /* istanbul ignore next */ []));
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    onRadioChange(optionValue) {
+        this.value.set(optionValue);
+        this.onChange(optionValue);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindRadioGroup, isStandalone: true, selector: "tailwind-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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-surface-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-surface-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-surface-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-surface-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-radio-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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-surface-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-surface-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-surface-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-surface-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 {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    elRef = inject((ElementRef));
+    panelTemplate = viewChild.required('panelTemplate');
+    overlayRef = null;
+    outsideSub = null;
+    /** 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 */ []));
+    /** When true, value is `T[]` and several options can be selected */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Selected value: `T | null` when single, `T[]` when `multiple` */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Whether the dropdown panel is open */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Keyboard-highlighted option index (-1 = none) */
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** The currently selected option object (single mode only) */
+    selectedOption = computed(() => {
+        if (this.multiple())
+            return null;
+        const v = this.value();
+        if (v == null || Array.isArray(v))
+            return null;
+        return this.options().find(o => this.optionValueEquals(o.value, v)) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    /** Selected option objects in `options()` order (multiple mode only) */
+    selectedOptions = computed(() => {
+        if (!this.multiple())
+            return [];
+        const v = this.value();
+        const arr = Array.isArray(v) ? v : [];
+        return this.options().filter(o => arr.some(sv => this.optionValueEquals(o.value, sv)));
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    /** Classes for the trigger button */
+    triggerClasses = 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-surface-300 focus:outline-primary-500';
+        const layout = this.multiple() ? 'items-start' : 'items-center';
+        return [
+            'flex justify-between w-full bg-white border transition-colors duration-150',
+            layout,
+            'pr-3 cursor-pointer text-left',
+            'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
+            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed',
+            sizeMap[this.size()],
+            stateClass
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    optionValueEquals(a, b) {
+        return Object.is(a, b);
+    }
+    /** Used in the template to compare option values */
+    isOptionSelected(option) {
+        if (this.multiple()) {
+            const v = this.value();
+            const arr = Array.isArray(v) ? v : [];
+            return arr.some(sv => this.optionValueEquals(option.value, sv));
+        }
+        const v = this.value();
+        if (v == null || Array.isArray(v))
+            return false;
+        return this.optionValueEquals(option.value, v);
+    }
+    /** Classes for a single option row */
+    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-surface-400 cursor-not-allowed'
+                : isSelected
+                    ? 'bg-primary-50 text-primary-700 font-medium'
+                    : isActive
+                        ? 'bg-surface-100 text-surface-900'
+                        : 'text-surface-800 hover:bg-surface-50'
+        ].join(' ');
+    }
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (this.multiple()) {
+            if (value == null)
+                this.value.set([]);
+            else
+                this.value.set(Array.isArray(value) ? [...value] : []);
+        }
+        else {
+            if (Array.isArray(value))
+                this.value.set(null);
+            else
+                this.value.set(value ?? null);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    ngOnDestroy() {
+        this.closeDropdown();
+    }
+    openDropdown() {
+        if (this.overlayRef)
+            return;
+        const trigger = this.elRef.nativeElement.querySelector('button[role="combobox"]') ?? this.elRef.nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(trigger)
+            .withPositions([
+            // Preferred: open downward
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            // Fallback: open upward
+            { 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,
+            minWidth: 'w-full'
+        });
+        const portal = new TemplatePortal(this.panelTemplate(), this.vcr);
+        this.overlayRef.attach(portal);
+        const pane = this.overlayRef.overlayElement;
+        this.outsideSub = new Subscription();
+        // Close on outside click (capture: trigger + panel are excluded; avoids CDK edge cases)
+        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.closeDropdown();
+        }));
+        this.outsideSub.add(fromEvent(document, 'keydown').subscribe(ev => {
+            if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this.closeDropdown();
+            }
+        }));
+        this.isOpen.set(true);
+        const opts = this.options();
+        let initial = -1;
+        if (this.multiple()) {
+            const v = this.value();
+            const arr = Array.isArray(v) ? v : [];
+            initial = opts.findIndex(o => arr.some(sv => this.optionValueEquals(o.value, sv)));
+        }
+        else {
+            const v = this.value();
+            if (v != null && !Array.isArray(v)) {
+                initial = opts.findIndex(o => this.optionValueEquals(o.value, v));
+            }
+        }
+        this.activeIndex.set(initial >= 0 ? initial : -1);
+    }
+    closeDropdown() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.outsideSub?.unsubscribe();
+        this.outsideSub = null;
+        this.isOpen.set(false);
+        this.activeIndex.set(-1);
+    }
+    toggleDropdown() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        if (this.multiple()) {
+            const v = this.value();
+            const current = Array.isArray(v) ? [...v] : [];
+            const idx = current.findIndex(sv => this.optionValueEquals(sv, option.value));
+            if (idx >= 0)
+                current.splice(idx, 1);
+            else
+                current.push(option.value);
+            this.value.set(current);
+            this.onChange(current);
+            this.onTouched();
+            return;
+        }
+        const val = option.value;
+        this.value.set(val);
+        this.onChange(val);
+        this.onTouched();
+        this.closeDropdown();
+    }
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const opts = this.options();
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                    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.openDropdown();
+                    return;
+                }
+                let prev = this.activeIndex() - 1;
+                while (prev >= 0 && opts[prev].disabled)
+                    prev--;
+                if (prev >= 0)
+                    this.activeIndex.set(prev);
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                    return;
+                }
+                const active = this.activeIndex();
+                if (active >= 0 && active < opts.length) {
+                    this.selectOption(opts[active]);
+                }
+                break;
+            }
+            case 'Escape':
+            case 'Tab': {
+                this.closeDropdown();
+                break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindSelect, isStandalone: true, selector: "tailwind-select", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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-surface-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-surface-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-surface-100 px-2 py-0.5 text-sm text-surface-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-surface-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-surface-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-surface-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-surface-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-surface-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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, decorators: [{
+            type: Component,
+            args: [{ 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-surface-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-surface-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-surface-100 px-2 py-0.5 text-sm text-surface-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-surface-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-surface-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-surface-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-surface-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-surface-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"] }]
+        }], 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 TailwindToggle extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Aria label for accessibility */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Two-way bound checked state */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Internal disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Track (background) classes */
+    trackClasses = computed(() => {
+        const sizeMap = {
+            xs: 'w-7 h-4',
+            sm: 'w-8 h-5',
+            md: 'w-11 h-6',
+            lg: 'w-14 h-7',
+            xl: 'w-16 h-8'
+        };
+        const base = [
+            'relative inline-flex shrink-0 rounded-full',
+            'border-2 border-transparent',
+            'transition-colors duration-200 ease-in-out',
+            'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600',
+            'cursor-pointer disabled:cursor-not-allowed'
+        ];
+        const stateClass = this.checked() ? 'bg-primary-600' : 'bg-surface-300';
+        return [...base, sizeMap[this.size()], stateClass].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    /** Thumb (knob) classes */
+    thumbClasses = computed(() => {
+        const sizeMap = {
+            xs: { thumb: 'w-3 h-3', translateOn: 'translate-x-3' },
+            sm: { thumb: 'w-4 h-4', translateOn: 'translate-x-3' },
+            md: { thumb: 'w-5 h-5', translateOn: 'translate-x-5' },
+            lg: { thumb: 'w-6 h-6', translateOn: 'translate-x-7' },
+            xl: { thumb: 'w-7 h-7', translateOn: 'translate-x-8' }
+        };
+        const config = sizeMap[this.size()];
+        const base = [
+            'pointer-events-none inline-block rounded-full',
+            'bg-white shadow-md',
+            'transform transition-transform duration-200 ease-in-out'
+        ];
+        const translateClass = this.checked() ? config.translateOn : 'translate-x-0';
+        return [...base, config.thumb, translateClass].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : /* istanbul ignore next */ []));
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        const newValue = !this.checked();
+        this.checked.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToggle, isStandalone: true, selector: "tailwind-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindToggle),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<label\n  class=\"inline-flex items-center gap-3 cursor-pointer select-none\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n  [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"ariaLabel() || label()\"\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 class=\"text-sm font-medium text-surface-800\">{{ label() }}</span>\n  }\n</label>\n", styles: [":host{display:inline-block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-toggle', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindToggle),
+                            multi: true
+                        }
+                    ], template: "<label\n  class=\"inline-flex items-center gap-3 cursor-pointer select-none\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n  [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"ariaLabel() || label()\"\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 class=\"text-sm font-medium text-surface-800\">{{ label() }}</span>\n  }\n</label>\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 {
+    /** Color variant */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Show a dot indicator */
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
+    /** Shape variant */
+    rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /** Accessible label */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    computedClasses = computed(() => {
+        const base = ['inline-flex items-center gap-1 font-medium', 'leading-none'];
+        const variantMap = {
+            primary: 'bg-primary-100 text-primary-700',
+            neutral: 'bg-surface-100 text-surface-700',
+            success: 'bg-success-100 text-success-700',
+            warning: 'bg-warning-100 text-warning-800',
+            danger: 'bg-danger-100 text-danger-700',
+            info: 'bg-info-100 text-info-700'
+        };
+        const sizeMap = {
+            xs: 'text-[10px] px-1.5 py-0.5',
+            sm: 'text-xs px-2 py-0.5',
+            md: 'text-xs px-2.5 py-1',
+            lg: 'text-sm px-3 py-1',
+            xl: 'text-sm px-3.5 py-1.5'
+        };
+        const shape = this.rounded() ? 'rounded-full' : 'rounded-md';
+        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"] });
+}
+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"] }]
+        }], 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 TailwindCard extends TailwindComponent {
+    /** Whether the card has elevated shadow */
+    elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    /** Whether to show hover shadow effect */
+    hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    /** Whether to show header background */
+    headerBg = input(false, ...(ngDevMode ? [{ debugName: "headerBg" }] : /* istanbul ignore next */ []));
+    /** Whether the card has a header */
+    hasHeader = input(true, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    /** 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-surface-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 py-4 border-b border-surface-100\" [class.bg-surface-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-surface-100 bg-surface-50/50\">\n      <ng-content select=\"tailwind-card-footer\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
+}
+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-surface-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 py-4 border-b border-surface-100\" [class.bg-surface-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-surface-100 bg-surface-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 {
+    /** Severity / color variant */
+    severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    /** Alert title */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Alert message */
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Whether the alert can be dismissed */
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    /** Whether to show a border on the left */
+    bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Emitted when the alert is dismissed */
+    onDismiss = output();
+    /** Internal dismissed state */
+    dismissed = signal(false, ...(ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []));
+    computedClasses = computed(() => {
+        const base = 'flex gap-3 p-4 rounded-lg';
+        const variantMap = {
+            success: 'bg-success-50 text-success-800 border-success-200',
+            warning: 'bg-warning-50 text-warning-800 border-warning-200',
+            danger: 'bg-danger-50 text-danger-800 border-danger-200',
+            info: 'bg-info-50 text-info-800 border-info-200'
+        };
+        const borderClass = this.bordered() ? 'border-l-4' : 'border';
+        return `${base} ${variantMap[this.severity()]} ${borderClass}`;
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    dismiss() {
+        this.dismissed.set(true);
+        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 }, message: { classPropertyName: "message", publicName: "message", 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          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n        @case ('danger') {\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\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        {{ message() }}\n      </div>\n    </div>\n\n    <!-- Dismiss button -->\n    @if (dismissible()) {\n      <button\n        type=\"button\"\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\"\n        [attr.aria-label]=\"'Dismiss alert'\"\n        (click)=\"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}\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-alert', 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          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n        @case ('danger') {\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\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\"\n              clip-rule=\"evenodd\" />\n          </svg>\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        {{ message() }}\n      </div>\n    </div>\n\n    <!-- Dismiss button -->\n    @if (dismissible()) {\n      <button\n        type=\"button\"\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\"\n        [attr.aria-label]=\"'Dismiss alert'\"\n        (click)=\"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}\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 }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", 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 {
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Color uses Tailwind text color class */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Optional label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Aria label for accessibility */
+    ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Layout orientation */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => {
+        const base = 'inline-flex items-center gap-2';
+        const orient = this.orientation() === 'vertical' ? 'flex-col' : '';
+        return `${base} ${orient}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    spinnerClasses = 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'
+        };
+        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'
+        };
+        return `tailwind-spinner-svg ${sizeMap[this.size()]} ${colorMap[this.color()]}`;
+    }, ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => {
+        const sizeMap = {
+            xs: 'text-xs',
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+            xl: 'text-lg'
+        };
+        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"] });
+}
+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"] }]
+        }], 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 {
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether to show close button in header */
+    showCloseButton = input(true, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    /** Whether clicking backdrop closes the modal */
+    closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
+    /** Whether pressing Escape closes the modal */
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    /** Open/close state */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Visibility for animation */
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    /** Emitted when the modal is fully closed (after exit animation) */
+    onClose = output();
+    modalPanel = viewChild('modalPanel', ...(ngDevMode ? [{ debugName: "modalPanel" }] : /* istanbul ignore next */ []));
+    panelClasses = computed(() => {
+        const base = ['relative bg-white rounded-xl shadow-2xl', 'w-full transform transition-all duration-200'];
+        const sizeMap = {
+            xs: 'max-w-sm',
+            sm: 'max-w-md',
+            md: 'max-w-lg',
+            lg: 'max-w-2xl',
+            xl: 'max-w-4xl'
+        };
+        const animation = this.isVisible() ? 'opacity-100 scale-100' : 'opacity-0 scale-95';
+        return [...base, sizeMap[this.size()], animation].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            if (this.isOpen()) {
+                requestAnimationFrame(() => {
+                    this.isVisible.set(true);
+                    this.modalPanel()?.nativeElement?.focus();
+                });
+            }
+        });
+    }
+    /** Open the modal */
+    open() {
+        this.isOpen.set(true);
+    }
+    /** Close the modal (plays exit animation then emits onClose) */
+    close() {
+        this.isVisible.set(false);
+        setTimeout(() => {
+            this.isOpen.set(false);
+            this.onClose.emit();
+        }, 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    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    role=\"dialog\"\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\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-surface-200\">\r\n          <h2 class=\"text-lg font-semibold text-surface-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-surface-400 hover:text-surface-600 hover:bg-surface-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        <ng-content select=\"tailwind-modal-content\" />\r\n\r\n        <!-- Footer -->\r\n        <ng-content select=\"tailwind-modal-footer\" />\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] });
+}
+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    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    role=\"dialog\"\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\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-surface-200\">\r\n          <h2 class=\"text-lg font-semibold text-surface-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-surface-400 hover:text-surface-600 hover:bg-surface-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        <ng-content select=\"tailwind-modal-content\" />\r\n\r\n        <!-- Footer -->\r\n        <ng-content select=\"tailwind-modal-footer\" />\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\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 }] }] } });
+
+/**
+ * Transparent wrapper — the visual header structure is provided by TailwindModal.
+ * Use inside a programmatically-opened component to supply the modal title.
+ */
+class TailwindModalTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: TailwindModalTitle, isStandalone: true, selector: "tailwind-modal-title", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:contents}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-modal-title', template: `<ng-content />`, styles: [":host{display:contents}\n"] }]
+        }] });
+
+class TailwindModalContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: TailwindModalContent, isStandalone: true, selector: "tailwind-modal-content", ngImport: i0, template: `
+    <div class="px-6 py-5">
+      <ng-content />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tailwind-modal-content',
+                    template: `
+    <div class="px-6 py-5">
+      <ng-content />
+    </div>
+  `
+                }]
+        }] });
+
+class TailwindModalFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: TailwindModalFooter, isStandalone: true, selector: "tailwind-modal-footer", ngImport: i0, template: `
+    <div class="px-6 py-4 border-t border-surface-100 bg-surface-50/50 rounded-b-xl">
+      <ng-content />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tailwind-modal-footer',
+                    template: `
+    <div class="px-6 py-4 border-t border-surface-100 bg-surface-50/50 rounded-b-xl">
+      <ng-content />
+    </div>
+  `
+                }]
+        }] });
+
+class TailwindTab extends TailwindComponent {
+    /** Tab label */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Tab icon (optional, CSS class or content) */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Whether the tab is disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** 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"] });
+}
+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"] }]
+        }], 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 {
+    /** Accessible label for the tab list */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Whether tabs can scroll horizontally */
+    scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    /** Currently active tab index (two-way) */
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Query all child TailwindTab components */
+    tabs = contentChildren(TailwindTab, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const allTabs = this.tabs();
+            const idx = this.activeIndex();
+            allTabs.forEach((tab, i) => tab.isActive.set(i === idx));
+        });
+    }
+    selectTab(index) {
+        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-surface-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-surface-500]=\"activeIndex() !== i\"\n        [class.hover:text-surface-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"] });
+}
+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-surface-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-surface-500]=\"activeIndex() !== i\"\n        [class.hover:text-surface-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 {
+    /** Current value (0-100) */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Show the label row */
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /** Show percentage value */
+    showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /** Color variant */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Indeterminate mode (animated) */
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Whether to use striped pattern */
+    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    clampedValue = computed(() => Math.max(0, Math.min(100, this.value())), ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => {
+        const sizeMap = {
+            xs: 'h-1',
+            sm: 'h-1.5',
+            md: 'h-2.5',
+            lg: 'h-4',
+            xl: 'h-5'
+        };
+        return `w-full bg-surface-200 rounded-full overflow-hidden ${sizeMap[this.size()]}`;
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    barClasses = computed(() => {
+        const variantMap = {
+            primary: 'bg-primary-600',
+            success: 'bg-success-600',
+            warning: 'bg-warning-500',
+            danger: 'bg-danger-600',
+            info: 'bg-info-600'
+        };
+        const base = [
+            'h-full rounded-full transition-all duration-300 ease-out',
+            variantMap[this.variant()] ?? variantMap['primary']
+        ];
+        if (this.indeterminate()) {
+            base.push('tailwind-progress-indeterminate');
+        }
+        if (this.striped()) {
+            base.push('bg-gradient-to-r from-transparent via-white/20 to-transparent bg-[length:1rem_100%]');
+        }
+        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-surface-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-surface-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"] });
+}
+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-surface-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-surface-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. */
+const MIN_PANEL_WIDTH_PX = 192;
+class TailwindMenu extends TailwindComponent {
+    openScheduleId;
+    anchorEl = null;
+    onScrollReposition = () => {
+        if (this.isOpen()) {
+            this.updatePanelPosition();
+        }
+    };
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    align = input('left', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    onSelect = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Popover box in coordinates relative to the `position: fixed` containing block (often viewport, not under transformed Docs wrappers). */
+    panelLayout = signal(null, ...(ngDevMode ? [{ debugName: "panelLayout" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        document.addEventListener('scroll', this.onScrollReposition, true);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('scroll', this.onScrollReposition, true);
+        if (this.openScheduleId != null) {
+            clearTimeout(this.openScheduleId);
+        }
+    }
+    /**
+     * Opens the menu under `anchor` (toggle element).
+     * Pass the click event from the button, e.g. `(click)="menu.open($event)"`, or an `HTMLElement`.
+     * After the first open with an anchor, `open()` without arguments reuses the last anchor.
+     *
+     * Opening is deferred one macrotask so the same `click` is not closed immediately by `document:click`.
+     */
+    open(anchor) {
+        if (anchor !== undefined) {
+            this.storeAnchor(anchor);
+        }
+        if (!this.anchorEl) {
+            return;
+        }
+        if (this.isOpen()) {
+            return;
+        }
+        this.scheduleOpen();
+    }
+    close() {
+        this.isOpen.set(false);
+        this.panelLayout.set(null);
+    }
+    toggle(anchor) {
+        if (this.isOpen()) {
+            this.close();
+            return;
+        }
+        if (anchor !== undefined) {
+            this.storeAnchor(anchor);
+        }
+        if (!this.anchorEl) {
+            return;
+        }
+        this.scheduleOpen();
+    }
+    storeAnchor(anchor) {
+        if (anchor instanceof HTMLElement) {
+            this.anchorEl = anchor;
+            return;
+        }
+        const target = anchor.currentTarget;
+        if (target instanceof HTMLElement) {
+            this.anchorEl = target;
+        }
+    }
+    scheduleOpen() {
+        if (this.openScheduleId != null) {
+            clearTimeout(this.openScheduleId);
+        }
+        this.openScheduleId = setTimeout(() => {
+            this.openScheduleId = undefined;
+            this.isOpen.set(true);
+            this.updatePanelPosition();
+            requestAnimationFrame(() => this.updatePanelPosition());
+        }, 0);
+    }
+    updatePanelPosition() {
+        const anchor = this.anchorEl;
+        if (!anchor) {
+            this.panelLayout.set(null);
+            return;
+        }
+        const panelEl = this.panelRef()?.nativeElement;
+        const cbRoot = panelEl
+            ? this.getFixedPositioningContainingBlock(panelEl)
+            : this.getFixedPositioningContainingBlock(anchor);
+        const cbRect = cbRoot.getBoundingClientRect();
+        const rect = anchor.getBoundingClientRect();
+        const minWidth = Math.max(rect.width, MIN_PANEL_WIDTH_PX);
+        const top = rect.bottom - cbRect.top;
+        if (this.align() === 'right') {
+            this.panelLayout.set({
+                top,
+                right: cbRect.right - rect.right,
+                minWidth
+            });
+        }
+        else {
+            this.panelLayout.set({
+                top,
+                left: rect.left - cbRect.left,
+                minWidth
+            });
+        }
+    }
+    selectItem(item) {
+        if (!item.disabled) {
+            this.onSelect.emit(item);
+            this.close();
+        }
+    }
+    onDocumentEscape() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.close();
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen()) {
+            return;
+        }
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const panelEl = this.panelRef()?.nativeElement;
+        const inPanel = panelEl?.contains(target) ?? false;
+        const inAnchor = this.anchorEl?.contains(target) ?? false;
+        if (!inPanel && !inAnchor) {
+            this.close();
+        }
+    }
+    onWindowResize() {
+        if (this.isOpen()) {
+            this.updatePanelPosition();
+        }
+    }
+    /** Ancestor that becomes the containing block for `position: fixed` (e.g. Storybook Docs wrappers with `transform`). */
+    createsFixedContainingBlock(el) {
+        const s = getComputedStyle(el);
+        if (s.transform && s.transform !== 'none') {
+            return true;
+        }
+        if (s.perspective && s.perspective !== 'none') {
+            return true;
+        }
+        if (s.filter && s.filter !== 'none') {
+            return true;
+        }
+        const contain = s.contain;
+        if (contain && contain !== 'none' && contain.split(/\s+/).includes('paint')) {
+            return true;
+        }
+        return false;
+    }
+    getFixedPositioningContainingBlock(from) {
+        for (let p = from.parentElement; p; p = p.parentElement) {
+            if (this.createsFixedContainingBlock(p)) {
+                return p;
+            }
+        }
+        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-surface-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-surface-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-surface-700 hover:bg-surface-50 hover:text-surface-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"] });
+}
+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-surface-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-surface-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-surface-700 hover:bg-surface-50 hover:text-surface-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']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class TailwindDrawer extends TailwindComponent {
+    /** Drawer title */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Position (left or right) */
+    position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Width class */
+    width = input('max-w-md', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Whether clicking backdrop closes */
+    closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
+    /** Open/close state */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Visibility for animation */
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    /** Emitted when closed */
+    onClose = output();
+    panelClasses = computed(() => {
+        const base = [
+            'fixed top-0 bottom-0 z-[1050]',
+            'flex flex-col w-full bg-white shadow-2xl',
+            'transition-transform duration-300 ease-in-out',
+            this.width()
+        ];
+        const pos = this.position();
+        if (pos === 'right') {
+            base.push('right-0');
+            base.push(this.isVisible() ? 'translate-x-0' : 'translate-x-full');
+        }
+        else {
+            base.push('left-0');
+            base.push(this.isVisible() ? 'translate-x-0' : '-translate-x-full');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    open() {
+        this.isOpen.set(true);
+        requestAnimationFrame(() => {
+            this.isVisible.set(true);
+        });
+    }
+    close() {
+        this.isVisible.set(false);
+        setTimeout(() => {
+            this.isOpen.set(false);
+            this.onClose.emit();
+        }, 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-surface-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-surface-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-surface-400 hover:text-surface-600 hover:bg-surface-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"] });
+}
+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-surface-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-surface-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-surface-400 hover:text-surface-600 hover:bg-surface-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"] }]
+        }], 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 {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* 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 }, 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 gap-1.5 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-1.5 text-surface-400\" aria-hidden=\"true\">\n            <svg class=\"w-3.5 h-3.5\" 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          </span>\n        }\n        @if (item.href && !last) {\n          <a [href]=\"item.href\" class=\"text-surface-500 hover:text-primary-600 transition-colors font-medium\">{{\n            item.label\n          }}</a>\n        } @else {\n          <span\n            class=\"font-medium\"\n            [class.text-surface-900]=\"last\"\n            [class.text-surface-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            >{{ item.label }}</span\n          >\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\n  <ol class=\"inline-flex items-center gap-1.5 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-1.5 text-surface-400\" aria-hidden=\"true\">\n            <svg class=\"w-3.5 h-3.5\" 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          </span>\n        }\n        @if (item.href && !last) {\n          <a [href]=\"item.href\" class=\"text-surface-500 hover:text-primary-600 transition-colors font-medium\">{{\n            item.label\n          }}</a>\n        } @else {\n          <span\n            class=\"font-medium\"\n            [class.text-surface-900]=\"last\"\n            [class.text-surface-500]=\"!last\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            >{{ item.label }}</span\n          >\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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class TailwindPagination extends TailwindComponent {
+    totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    summary = input('Showing {start}-{end} of {total}', ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    onPageChange = output();
+    totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    visiblePages = computed(() => {
+        const total = this.totalPages();
+        return Array.from({ length: total }, (_, i) => i + 1);
+    }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
+    summaryText = computed(() => {
+        const total = this.totalItems();
+        if (total === 0)
+            return this.summary().replace('{start}', '0').replace('{end}', '0').replace('{total}', '0');
+        const start = (this.currentPage() - 1) * this.pageSize() + 1;
+        const end = Math.min(this.currentPage() * this.pageSize(), total);
+        return this.summary()
+            .replace('{start}', start.toString())
+            .replace('{end}', end.toString())
+            .replace('{total}', total.toString());
+    }, ...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
+    goToPage(page) {
+        if (page >= 1 && page <= this.totalPages()) {
+            this.currentPage.set(page);
+            this.onPageChange.emit(page);
+        }
+    }
+    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-surface-700 dark:text-surface-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-surface-500 hover:bg-surface-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-surface-600]=\"page !== currentPage()\"\n        [class.hover:bg-surface-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-surface-500 hover:bg-surface-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"] });
+}
+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-surface-700 dark:text-surface-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-surface-500 hover:bg-surface-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-surface-600]=\"page !== currentPage()\"\n        [class.hover:bg-surface-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-surface-500 hover:bg-surface-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"] }] } });
+
+class TailwindTag extends TailwindComponent {
+    variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    computedClasses = computed(() => {
+        const variantMap = {
+            primary: 'bg-primary-600 text-white',
+            neutral: 'bg-surface-600 text-white',
+            success: 'bg-success-600 text-white',
+            warning: 'bg-warning-500 text-surface-900',
+            danger: 'bg-danger-600 text-white',
+            info: 'bg-info-600 text-white'
+        };
+        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"] });
+}
+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"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class TailwindTable extends TailwindComponent {
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    // --- Pagination Inputs ---
+    paginated = input(true, ...(ngDevMode ? [{ debugName: "paginated" }] : /* istanbul ignore next */ []));
+    pagination = input(...(ngDevMode ? [undefined, { debugName: "pagination" }] : /* istanbul ignore next */ []));
+    // --- Outputs ---
+    onSortChange = output();
+    onSelectionChange = output();
+    // --- Internal State ---
+    sortKey = signal('', ...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const fromInput = this.pagination()?.currentPage;
+            if (fromInput != null && fromInput >= 1) {
+                this.currentPage.set(fromInput);
+            }
+        });
+    }
+    // --- Computed ---
+    sortedData = computed(() => {
+        let rows = [...this.data()];
+        const key = this.sortKey();
+        if (key) {
+            const dir = this.sortDir() === 'asc' ? 1 : -1;
+            rows.sort((a, b) => {
+                const va = a[key], vb = b[key];
+                if (va < vb)
+                    return -dir;
+                if (va > vb)
+                    return dir;
+                return 0;
+            });
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    displayedData = computed(() => {
+        const rows = this.sortedData();
+        if (!this.paginated())
+            return rows;
+        const size = this.pagination()?.pageSize ?? 10;
+        const page = this.currentPage();
+        return rows.slice((page - 1) * size, page * size);
+    }, ...(ngDevMode ? [{ debugName: "displayedData" }] : /* istanbul ignore next */ []));
+    // --- Methods ---
+    sort(key) {
+        if (this.sortKey() === key) {
+            this.sortDir.update(d => (d === 'asc' ? 'desc' : 'asc'));
+        }
+        else {
+            this.sortKey.set(key);
+            this.sortDir.set('asc');
+        }
+        this.currentPage.set(1); // Reset to first page on sort
+        this.onSortChange.emit({ key: this.sortKey(), direction: this.sortDir() });
+    }
+    toggleSelection(index) {
+        this.selectedRows.update(s => {
+            const next = new Set(s);
+            if (next.has(index))
+                next.delete(index);
+            else
+                next.add(index);
+            return next;
+        });
+        this.onSelectionChange.emit(this.selectedRows());
+    }
+    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: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-xl border border-surface-200\">\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-surface-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 class=\"w-full text-sm text-left\">\n      <thead class=\"bg-surface-50 border-b border-surface-200\">\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th\n              scope=\"col\"\n              class=\"px-4 py-3 font-semibold text-surface-700 whitespace-nowrap\"\n              [class.text-center]=\"col.align === 'center'\"\n              [class.text-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width || 'auto'\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  (click)=\"sort(col.key)\"\n                  class=\"inline-flex items-center gap-1 cursor-pointer hover:text-surface-900 transition-colors\">\n                  {{ col.label }}\n                  <svg\n                    class=\"w-3.5 h-3.5 text-surface-400\"\n                    [class.text-primary-600]=\"sortKey() === col.key\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\">\n                    @if (sortKey() === col.key && sortDir() === 'asc') {\n                      <path\n                        fill-rule=\"evenodd\"\n                        d=\"M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z\"\n                        clip-rule=\"evenodd\" />\n                    } @else {\n                      <path\n                        fill-rule=\"evenodd\"\n                        d=\"M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z\"\n                        clip-rule=\"evenodd\" />\n                    }\n                  </svg>\n                </button>\n              } @else {\n                {{ col.label }}\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"divide-y divide-surface-100\">\n        @for (row of displayedData(); track $index) {\n          <tr\n            class=\"hover:bg-surface-50/50 transition-colors\"\n            [class.bg-surface-50]=\"striped() && $index % 2 === 1\"\n            [class.bg-primary-50/30]=\"selectedRows().has($index)\"\n            [class.cursor-pointer]=\"selectable()\"\n            (click)=\"selectable() && toggleSelection($index)\">\n            @for (col of columns(); track col.key) {\n              <td\n                class=\"px-4 py-3 text-surface-700\"\n                [class.text-center]=\"col.align === 'center'\"\n                [class.text-right]=\"col.align === 'right'\">\n                {{ row[col.key] }}\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td [attr.colspan]=\"columns().length\" class=\"px-4 py-8 text-center text-surface-400\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-surface-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]=\"pagination()?.summary ?? 'Showing {start}-{end} of {total}'\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindPagination, selector: "tailwind-pagination", inputs: ["totalItems", "pageSize", "currentPage", "ariaLabel", "summary"], outputs: ["currentPageChange", "onPageChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-table', imports: [TailwindPagination], template: "<div class=\"w-full overflow-x-auto rounded-xl border border-surface-200\">\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-surface-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 class=\"w-full text-sm text-left\">\n      <thead class=\"bg-surface-50 border-b border-surface-200\">\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th\n              scope=\"col\"\n              class=\"px-4 py-3 font-semibold text-surface-700 whitespace-nowrap\"\n              [class.text-center]=\"col.align === 'center'\"\n              [class.text-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width || 'auto'\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  (click)=\"sort(col.key)\"\n                  class=\"inline-flex items-center gap-1 cursor-pointer hover:text-surface-900 transition-colors\">\n                  {{ col.label }}\n                  <svg\n                    class=\"w-3.5 h-3.5 text-surface-400\"\n                    [class.text-primary-600]=\"sortKey() === col.key\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\">\n                    @if (sortKey() === col.key && sortDir() === 'asc') {\n                      <path\n                        fill-rule=\"evenodd\"\n                        d=\"M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z\"\n                        clip-rule=\"evenodd\" />\n                    } @else {\n                      <path\n                        fill-rule=\"evenodd\"\n                        d=\"M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z\"\n                        clip-rule=\"evenodd\" />\n                    }\n                  </svg>\n                </button>\n              } @else {\n                {{ col.label }}\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody class=\"divide-y divide-surface-100\">\n        @for (row of displayedData(); track $index) {\n          <tr\n            class=\"hover:bg-surface-50/50 transition-colors\"\n            [class.bg-surface-50]=\"striped() && $index % 2 === 1\"\n            [class.bg-primary-50/30]=\"selectedRows().has($index)\"\n            [class.cursor-pointer]=\"selectable()\"\n            (click)=\"selectable() && toggleSelection($index)\">\n            @for (col of columns(); track col.key) {\n              <td\n                class=\"px-4 py-3 text-surface-700\"\n                [class.text-center]=\"col.align === 'center'\"\n                [class.text-right]=\"col.align === 'right'\">\n                {{ row[col.key] }}\n              </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td [attr.colspan]=\"columns().length\" class=\"px-4 py-8 text-center text-surface-400\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-surface-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]=\"pagination()?.summary ?? 'Showing {start}-{end} of {total}'\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], 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 }] }], 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"] }] } });
+
+const I18N$2 = {
+    it: {
+        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'],
+        weekDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        today: 'Today',
+        confirm: 'Apply',
+        placeholder: 'Select date'
+    }
+};
+class TailwindDatePicker extends TailwindComponent {
+    lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
+    i18n = I18N$2[this.lang];
+    weekDays = this.i18n.weekDays;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    format = input('dd/MM/yyyy', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Working selection while the panel is open; committed on Apply. */
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    showCalendar = signal(false, ...(ngDevMode ? [{ debugName: "showCalendar" }] : /* istanbul ignore next */ []));
+    viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+    effectivePlaceholder = computed(() => {
+        const p = this.placeholder();
+        return p?.trim() ? p : this.i18n.placeholder;
+    }, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const d = this.value();
+        if (!d)
+            return '';
+        const fmt = this.format();
+        try {
+            return formatDate(d, fmt, this.lang === 'it' ? 'it-IT' : 'en-US');
+        }
+        catch {
+            return formatDate(d, fmt, 'en-US');
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    monthYearLabel = computed(() => `${this.i18n.months[this.viewMonth()]} ${this.viewYear()}`, ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+    calendarDays = computed(() => {
+        const y = this.viewYear(), m = this.viewMonth();
+        const offset = (new Date(y, m, 1).getDay() + 6) % 7; // Mon = 0
+        const total = new Date(y, m + 1, 0).getDate();
+        const days = Array(offset).fill(0);
+        for (let i = 1; i <= total; i++)
+            days.push(i);
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) {
+        this.value.set(v ?? null);
+        if (v && !isNaN(v.getTime())) {
+            this.viewMonth.set(v.getMonth());
+            this.viewYear.set(v.getFullYear());
+        }
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(d) { this.isDisabled.set(d); }
+    toggleCalendar() {
+        if (this.isDisabled())
+            return;
+        if (!this.showCalendar()) {
+            this.draft.set(this.value());
+            const ref = this.value() ?? new Date();
+            this.viewMonth.set(ref.getMonth());
+            this.viewYear.set(ref.getFullYear());
+        }
+        this.showCalendar.update(v => !v);
+    }
+    apply() {
+        const d = this.draft();
+        this.value.set(d);
+        this.onChange(d);
+        this.onTouched();
+        this.showCalendar.set(false);
+    }
+    prevMonth() {
+        if (this.viewMonth() === 0) {
+            this.viewMonth.set(11);
+            this.viewYear.update(y => y - 1);
+        }
+        else {
+            this.viewMonth.update(m => m - 1);
+        }
+    }
+    nextMonth() {
+        if (this.viewMonth() === 11) {
+            this.viewMonth.set(0);
+            this.viewYear.update(y => y + 1);
+        }
+        else {
+            this.viewMonth.update(m => m + 1);
+        }
+    }
+    selectDay(day) {
+        this.draft.set(new Date(this.viewYear(), this.viewMonth(), day));
+    }
+    isSelected(day) {
+        const d = this.draft();
+        if (!d)
+            return false;
+        return d.getFullYear() === this.viewYear() && d.getMonth() === this.viewMonth() && d.getDate() === day;
+    }
+    isToday(day) {
+        const t = new Date();
+        return t.getFullYear() === this.viewYear() && t.getMonth() === this.viewMonth() && t.getDate() === day;
+    }
+    goToToday() {
+        const t = new Date();
+        this.viewMonth.set(t.getMonth());
+        this.viewYear.set(t.getFullYear());
+        this.selectDay(t.getDate());
+    }
+    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" }, 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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-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-surface-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-surface-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-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-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-surface-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-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-surface-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-surface-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-surface-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-surface-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-surface-200 disabled:text-surface-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"] });
+}
+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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-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-surface-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-surface-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-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-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-surface-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-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-surface-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-surface-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-surface-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-surface-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-surface-200 disabled:text-surface-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"] }]
+        }], 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"] }] } });
+
+const I18N$1 = {
+    it: { placeholder: 'Seleziona ora', now: 'Adesso', apply: 'Applica' },
+    en: { placeholder: 'Select time', now: 'Now', apply: 'Apply' }
+};
+class TailwindTimePicker extends TailwindComponent {
+    lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
+    i18n = I18N$1[this.lang];
+    hours = Array.from({ length: 24 }, (_, i) => i);
+    minutes = Array.from({ length: 60 }, (_, i) => i);
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    showPanel = signal(false, ...(ngDevMode ? [{ debugName: "showPanel" }] : /* istanbul ignore next */ []));
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.value(), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) {
+        this.value.set(v ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(d) {
+        this.isDisabled.set(d);
+    }
+    togglePanel() {
+        if (this.isDisabled())
+            return;
+        const opening = !this.showPanel();
+        if (opening) {
+            const v = this.value();
+            const parts = v ? v.split(':') : null;
+            const now = new Date();
+            this.draft.set({
+                h: parts ? parseInt(parts[0], 10) || 0 : now.getHours(),
+                m: parts ? parseInt(parts[1], 10) || 0 : now.getMinutes()
+            });
+        }
+        this.showPanel.set(opening);
+    }
+    apply() {
+        const d = this.draft();
+        if (!d)
+            return;
+        const val = `${d.h.toString().padStart(2, '0')}:${d.m.toString().padStart(2, '0')}`;
+        this.value.set(val);
+        this.onChange(val);
+        this.onTouched();
+        this.showPanel.set(false);
+    }
+    goToNow() {
+        const now = new Date();
+        this.draft.set({ h: now.getHours(), m: now.getMinutes() });
+    }
+    onHourChange(e) {
+        const cur = this.draft();
+        if (!cur)
+            return;
+        this.draft.set({ ...cur, h: Number(e.target.value) });
+    }
+    onMinuteChange(e) {
+        const cur = this.draft();
+        if (!cur)
+            return;
+        this.draft.set({ ...cur, m: Number(e.target.value) });
+    }
+    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" }, 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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-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-surface-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-surface-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-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-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-surface-200 disabled:text-surface-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"] });
+}
+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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-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-surface-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-surface-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-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-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-surface-200 disabled:text-surface-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"] }]
+        }], 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"] }] } });
+
+const I18N = {
+    it: {
+        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',
+        confirm: 'Applica',
+        placeholder: 'Seleziona data e ora'
+    },
+    en: {
+        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',
+        confirm: 'Apply',
+        placeholder: 'Select date and time'
+    }
+};
+class TailwindDateTimePicker extends TailwindComponent {
+    lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
+    i18n = I18N[this.lang];
+    weekDays = this.i18n.weekDays;
+    hours = Array.from({ length: 24 }, (_, i) => i);
+    minutes = Array.from({ length: 60 }, (_, i) => i);
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Angular [DatePipe](https://angular.dev/api/common/DatePipe) format string. */
+    format = input('dd/MM/yyyy HH:mm', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    showPanel = signal(false, ...(ngDevMode ? [{ debugName: "showPanel" }] : /* istanbul ignore next */ []));
+    viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+    effectivePlaceholder = computed(() => {
+        const p = this.placeholder();
+        return p?.trim() ? p : this.i18n.placeholder;
+    }, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const d = this.selected();
+        if (!d)
+            return '';
+        // formatDate richiede registerLocaleData per locale non-EN: leggiamo format fuori dal try
+        // per non richiamare signal dentro il catch (contesto reattivo non garantito dopo un throw).
+        // Per i formati numerici (default dd/MM/yyyy HH:mm) il risultato è identico in ogni locale.
+        const fmt = this.format();
+        try {
+            return formatDate(d, fmt, this.lang === 'it' ? 'it-IT' : 'en-US');
+        }
+        catch {
+            return formatDate(d, fmt, 'en-US');
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    monthYearLabel = computed(() => `${this.i18n.months[this.viewMonth()]} ${this.viewYear()}`, ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+    calendarDays = computed(() => {
+        const y = this.viewYear(), m = this.viewMonth();
+        const offset = (new Date(y, m, 1).getDay() + 6) % 7; // Mon = 0
+        const total = new Date(y, m + 1, 0).getDate();
+        const days = Array(offset).fill(0);
+        for (let i = 1; i <= total; i++)
+            days.push(i);
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(v) {
+        const d = v ? new Date(v.getTime()) : null;
+        this.selected.set(d);
+        if (this.showPanel())
+            this.draft.set(d ? new Date(d.getTime()) : null);
+        const ref = d ?? new Date();
+        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); }
+    togglePanel() {
+        if (this.isDisabled())
+            return;
+        const opening = !this.showPanel();
+        if (opening) {
+            const s = this.selected();
+            const ref = s ? new Date(s.getTime()) : this.todayNow();
+            this.draft.set(ref);
+            this.viewMonth.set(ref.getMonth());
+            this.viewYear.set(ref.getFullYear());
+        }
+        this.showPanel.set(opening);
+    }
+    apply() {
+        const d = this.draft();
+        this.selected.set(d ? new Date(d.getTime()) : null);
+        this.emitValue(this.selected());
+        this.showPanel.set(false);
+    }
+    prevMonth() {
+        if (this.viewMonth() === 0) {
+            this.viewMonth.set(11);
+            this.viewYear.update(y => y - 1);
+        }
+        else {
+            this.viewMonth.update(m => m - 1);
+        }
+    }
+    nextMonth() {
+        if (this.viewMonth() === 11) {
+            this.viewMonth.set(0);
+            this.viewYear.update(y => y + 1);
+        }
+        else {
+            this.viewMonth.update(m => m + 1);
+        }
+    }
+    selectDay(day) {
+        const cur = this.draft();
+        this.draft.set(new Date(this.viewYear(), this.viewMonth(), day, cur?.getHours() ?? 0, cur?.getMinutes() ?? 0, 0, 0));
+    }
+    isSelected(day) {
+        const v = this.draft();
+        return !!v && v.getFullYear() === this.viewYear() && v.getMonth() === this.viewMonth() && v.getDate() === day;
+    }
+    isToday(day) {
+        const t = new Date();
+        return t.getFullYear() === this.viewYear() && t.getMonth() === this.viewMonth() && t.getDate() === day;
+    }
+    goToToday() {
+        const t = this.todayNow();
+        this.viewMonth.set(t.getMonth());
+        this.viewYear.set(t.getFullYear());
+        this.draft.set(t);
+    }
+    onHourChange(e) {
+        const cur = this.draft();
+        if (!cur)
+            return;
+        const h = Number(e.target.value);
+        this.draft.set(new Date(cur.getFullYear(), cur.getMonth(), cur.getDate(), h, cur.getMinutes(), 0, 0));
+    }
+    onMinuteChange(e) {
+        const cur = this.draft();
+        if (!cur)
+            return;
+        const min = Number(e.target.value);
+        this.draft.set(new Date(cur.getFullYear(), cur.getMonth(), cur.getDate(), cur.getHours(), min, 0, 0));
+    }
+    todayNow() {
+        const t = new Date();
+        return new Date(t.getFullYear(), t.getMonth(), t.getDate(), t.getHours(), t.getMinutes(), 0, 0);
+    }
+    emitValue(d) {
+        this.onChange(d ? new Date(d.getTime()) : null);
+        this.onTouched();
+    }
+    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 } }, 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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-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-surface-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-surface-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-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-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-surface-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-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-surface-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-surface-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-surface-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-surface-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-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-surface-200 disabled:text-surface-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"] });
+}
+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-surface-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-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-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-surface-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-surface-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-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-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-surface-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-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-surface-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-surface-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-surface-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-surface-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-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-surface-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-surface-200 disabled:text-surface-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"] }]
+        }], 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 }] }] } });
+
+class TailwindStep extends TailwindComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    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"] });
+}
+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"] }]
+        }], 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 {
+    activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    linear = input(false, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+    steps = contentChildren(TailwindStep, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const allSteps = this.steps();
+            const idx = this.activeIndex();
+            allSteps.forEach((s, i) => s.isActive.set(i === idx));
+        });
+    }
+    goToStep(index) {
+        if (!this.linear() || index <= this.activeIndex()) {
+            this.activeIndex.set(index);
+        }
+    }
+    next() {
+        const s = this.steps();
+        if (this.activeIndex() < s.length - 1) {
+            s[this.activeIndex()].completed.set(true);
+            this.activeIndex.update(v => v + 1);
+        }
+    }
+    previous() {
+        if (this.activeIndex() > 0)
+            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-surface-300]=\"i > activeIndex()\"\n          [class.text-surface-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-surface-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-surface-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-surface-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] });
+}
+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-surface-300]=\"i > activeIndex()\"\n          [class.text-surface-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-surface-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-surface-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-surface-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 {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    onToggle = output();
+    toggle() {
+        if (!this.disabled()) {
+            this.isExpanded.update(v => !v);
+            this.onToggle.emit();
+        }
+    }
+    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-surface-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-surface-800 hover:bg-surface-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-surface-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-surface-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"] }] });
+}
+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-surface-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-surface-800 hover:bg-surface-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-surface-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-surface-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\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-surface-200 rounded-xl overflow-hidden divide-y divide-surface-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"] }] });
+}
+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-surface-200 rounded-xl overflow-hidden divide-y divide-surface-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindAccordionItem), { isSignal: true }] }] } });
+
+class TailwindModalRef {
+    _closeFn;
+    _result;
+    /** @internal called by the service after component creation */
+    _init(closeFn) {
+        this._closeFn = closeFn;
+    }
+    /** Close the modal resolving with the given result */
+    close(result) {
+        this._result = result;
+        this._closeFn();
+    }
+    /** @internal read by the service after the close animation */
+    _getResult() {
+        return this._result;
+    }
+}
+
+class TailwindModalService {
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    /**
+     * Open a modal programmatically.
+     *
+     * The `component` is instantiated and its slot elements are projected into
+     * TailwindModal's ng-content slots:
+     *  - `<tailwind-modal-title>`   → header title area
+     *  - `<tailwind-modal-content>` → body area
+     *  - `<tailwind-modal-footer>`  → footer area
+     *
+     * The component can inject `TailwindModalRef<R>` to close with a typed result
+     * and `TAILWIND_MODAL_DATA` to receive the `config.data` payload.
+     *
+     * @returns Promise that resolves with `R` on `close(result)` or `undefined` on dismiss.
+     */
+    open(component, config = {}) {
+        return new Promise(resolve => {
+            const modalRef = new TailwindModalRef();
+            const injector = Injector.create({
+                providers: [
+                    { provide: TailwindModalRef, useValue: modalRef },
+                    { provide: TAILWIND_MODAL_DATA, useValue: config.data ?? null }
+                ],
+                parent: this.environmentInjector
+            });
+            // ── Step 1: create and render the user component ─────────────────────
+            const userComp = createComponent(component, {
+                environmentInjector: this.environmentInjector,
+                elementInjector: injector
+            });
+            this.appRef.attachView(userComp.hostView);
+            userComp.changeDetectorRef.detectChanges();
+            // ── Step 2: extract slot elements from the rendered host ──────────────
+            const host = userComp.location.nativeElement;
+            const nodes = (sel) => Array.from(host.querySelectorAll(`:scope > ${sel}`));
+            // ── Step 3: create TailwindModal projecting the slot nodes ────────────
+            //   projectableNodes[0] → <ng-content />                (title / catch-all)
+            //   projectableNodes[1] → <ng-content select="tailwind-modal-content" />
+            //   projectableNodes[2] → <ng-content select="tailwind-modal-footer" />
+            const modalComp = createComponent(TailwindModal, {
+                environmentInjector: this.environmentInjector,
+                elementInjector: injector,
+                projectableNodes: [
+                    nodes('tailwind-modal-title'),
+                    nodes('tailwind-modal-content'),
+                    nodes('tailwind-modal-footer')
+                ]
+            });
+            modalComp.setInput('size', config.size ?? 'md');
+            modalComp.setInput('showCloseButton', config.showCloseButton ?? true);
+            modalComp.setInput('closeOnBackdrop', config.closeOnBackdrop ?? true);
+            modalComp.setInput('closeOnEscape', config.closeOnEscape ?? true);
+            this.appRef.attachView(modalComp.hostView);
+            document.body.appendChild(modalComp.location.nativeElement);
+            // ── Step 4: wire close ────────────────────────────────────────────────
+            modalRef._init(() => modalComp.instance.close());
+            const sub = modalComp.instance.onClose.subscribe(() => {
+                sub.unsubscribe();
+                resolve(modalRef._getResult());
+                modalComp.location.nativeElement.remove();
+                this.appRef.detachView(modalComp.hostView);
+                this.appRef.detachView(userComp.hostView);
+                modalComp.destroy();
+                userComp.destroy();
+            });
+            modalComp.instance.open();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TailwindToastService {
+    nextId = 0;
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    show(config) {
+        const id = this.nextId++;
+        const toast = { id, severity: 'info', duration: 4000, dismissible: true, ...config };
+        this.toasts.update(list => [...list, toast]);
+        if (toast.duration && toast.duration > 0) {
+            setTimeout(() => this.dismiss(id), toast.duration);
+        }
+        return id;
+    }
+    success(message, title) {
+        return this.show({ message, title, severity: 'success' });
+    }
+    warning(message, title) {
+        return this.show({ message, title, severity: 'warning' });
+    }
+    danger(message, title) {
+        return this.show({ message, title, severity: 'danger' });
+    }
+    info(message, title) {
+        return this.show({ message, title, severity: 'info' });
+    }
+    dismiss(id) {
+        this.toasts.update(list => list.filter(t => t.id !== id));
+    }
+    clear() {
+        this.toasts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+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"] });
+}
+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"] }]
+        }] });
+
+class TailwindNotification extends TailwindComponent {
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    onDismiss = output();
+    computedClasses = computed(() => {
+        const variantMap = {
+            success: 'bg-success-50 border-success-200 text-success-800',
+            warning: 'bg-warning-50 border-warning-200 text-warning-800',
+            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()]}`;
+    }, ...(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"] });
+}
+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"] }]
+        }], 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 {
+    severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    computedClasses = computed(() => {
+        const variantMap = {
+            success: 'bg-success-50 text-success-700 border-success-200',
+            warning: 'bg-warning-50 text-warning-700 border-warning-200',
+            danger: 'bg-danger-50 text-danger-700 border-danger-200',
+            info: 'bg-info-50 text-info-700 border-info-200'
+        };
+        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"] });
+}
+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"] }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
+
+class TailwindSkeleton extends TailwindComponent {
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    computedClasses = computed(() => {
+        const base = 'tailwind-skeleton-pulse';
+        const variantMap = {
+            text: 'h-4 rounded',
+            circle: 'rounded-full',
+            rect: 'rounded-none',
+            rounded: 'rounded-xl'
+        };
+        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-surface-200) 25%,var(--color-surface-100) 50%,var(--color-surface-200) 75%);background-size:200% 100%}\n"] });
+}
+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-surface-200) 25%,var(--color-surface-100) 50%,var(--color-surface-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 {
+    /** When true, uses rounded corners (`rounded-xl`). */
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /**
+     * Orizzontale: `full` = `w-full`; `container` = larghezza responsiva (95% / 85% / 75%) centrata.
+     * Verticale: ignorato per l’altezza — il rail è sempre `h-full w-full` nella colonna.
+     */
+    width = input('full', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Applies a stronger drop shadow. */
+    elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    /** `horizontal` for a top app bar; `vertical` for a side rail (logo → menu → end). */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Navigation / actions rendered between logo and end slots. */
+    menu = input([], ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    /** Emitted when a non-disabled, non-divider menu entry is activated. */
+    onMenuSelect = output();
+    menuContainerClasses = computed(() => this.orientation() === 'horizontal'
+        ? 'min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1'
+        : 'min-w-0 flex-1 flex flex-col gap-1 overflow-y-auto min-h-0', ...(ngDevMode ? [{ debugName: "menuContainerClasses" }] : /* istanbul ignore next */ []));
+    menuItemButtonClasses = computed(() => this.orientation() === 'horizontal'
+        ? 'shrink-0 rounded-md px-3 py-1.5 text-sm font-medium text-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent'
+        : 'w-full text-left rounded-md px-2 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent', ...(ngDevMode ? [{ debugName: "menuItemButtonClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => {
+        const horizontal = this.orientation() === 'horizontal';
+        const sizeClasses = horizontal
+            ? this.width() === 'full'
+                ? 'w-full'
+                : 'w-[95%] md:w-[85%] lg:w-[75%] mx-auto'
+            : 'h-full w-full';
+        const base = [
+            'bg-white border border-surface-200',
+            'flex',
+            sizeClasses,
+            this.rounded() ? 'rounded-xl' : 'rounded-none',
+            this.elevated() ? 'shadow-lg' : 'shadow-sm'
+        ];
+        if (horizontal) {
+            base.push('flex-row items-center gap-3 px-4 py-3');
+        }
+        else {
+            base.push('flex-col items-stretch gap-3 px-3 py-4 min-h-0');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    selectMenuItem(item) {
+        if (item.divider || item.disabled) {
+            return;
+        }
+        this.onMenuSelect.emit(item);
+    }
+    menuTrackKey(index, item) {
+        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 }, 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  <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        @if (orientation() === 'horizontal') {\r\n          <span class=\"mx-0.5 h-5 w-px shrink-0 self-center bg-surface-200\" aria-hidden=\"true\"></span>\r\n        } @else {\r\n          <hr class=\"my-1 w-full border-0 border-t border-surface-100\" />\r\n        }\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"!!item.disabled\"\r\n          [class]=\"menuItemButtonClasses()\"\r\n          (click)=\"selectMenuItem(item)\">\r\n          {{ item.label }}\r\n        </button>\r\n      }\r\n    }\r\n  </nav>\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}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, decorators: [{
+            type: Component,
+            args: [{ 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  <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        @if (orientation() === 'horizontal') {\r\n          <span class=\"mx-0.5 h-5 w-px shrink-0 self-center bg-surface-200\" aria-hidden=\"true\"></span>\r\n        } @else {\r\n          <hr class=\"my-1 w-full border-0 border-t border-surface-100\" />\r\n        }\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"!!item.disabled\"\r\n          [class]=\"menuItemButtonClasses()\"\r\n          (click)=\"selectMenuItem(item)\">\r\n          {{ item.label }}\r\n        </button>\r\n      }\r\n    }\r\n  </nav>\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}\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 }] }], 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 {
+    /** Rule direction */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Adds horizontal margin to the rule (horizontal orientation only). */
+    inset = input(false, ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    /** Border style for the rule */
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Centered text between two lines (horizontal only; ignored when empty). */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    isLabeledHorizontal = computed(() => this.orientation() === 'horizontal' && !!this.label()?.trim(), ...(ngDevMode ? [{ debugName: "isLabeledHorizontal" }] : /* istanbul ignore next */ []));
+    ruleClasses = computed(() => {
+        const inset = this.inset() && this.orientation() === 'horizontal' ? 'mx-4' : '';
+        const variant = this.variant() === 'dashed' ? 'border-dashed' : 'border-solid';
+        if (this.orientation() === 'vertical') {
+            return ['self-stretch shrink-0 w-px min-h-full border-0 border-l', variant, 'border-surface-200']
+                .join(' ');
+        }
+        return ['w-full border-0 border-t', variant, 'border-surface-200', inset].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "ruleClasses" }] : /* istanbul ignore next */ []));
+    /** Top rule for labeled horizontal layout */
+    ruleLineClass = computed(() => {
+        const variant = this.variant() === 'dashed' ? 'border-dashed' : 'border-solid';
+        return ['border-surface-200', variant].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "ruleLineClass" }] : /* istanbul ignore next */ []));
+    labeledRowClass = computed(() => this.inset() ? 'flex items-center gap-3 w-full mx-4' : 'flex items-center gap-3 w-full', ...(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-surface-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"] });
+}
+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-surface-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"] }]
+        }], 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 {
+    /** Segments rendered as proportional blocks in the bar. */
+    segments = input([], ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /**
+     * Scale maximum. Each segment `value` is shown as `value / max` of the bar width.
+     * Default 100 (percent-style values).
+     */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Show a simple legend under the bar */
+    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    /** Track height */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    trackHeightClass = computed(() => {
+        const map = {
+            xs: 'h-1.5',
+            sm: 'h-2',
+            md: 'h-2.5',
+            lg: 'h-3.5',
+            xl: 'h-4'
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "trackHeightClass" }] : /* istanbul ignore next */ []));
+    totalValue = computed(() => this.segments().reduce((s, x) => s + Math.max(0, x.value), 0), ...(ngDevMode ? [{ debugName: "totalValue" }] : /* istanbul ignore next */ []));
+    scaleMax = computed(() => {
+        const m = this.max();
+        if (m > 0) {
+            return m;
+        }
+        const t = this.totalValue();
+        return t > 0 ? t : 1;
+    }, ...(ngDevMode ? [{ debugName: "scaleMax" }] : /* istanbul ignore next */ []));
+    segmentLayouts = computed(() => {
+        const cap = this.scaleMax();
+        return this.segments().map(seg => {
+            const pct = cap > 0 ? (Math.max(0, seg.value) / cap) * 100 : 0;
+            const variant = seg.variant ?? 'primary';
+            return { ...seg, widthPct: pct, barClass: this.variantToBarClass(variant) };
+        });
+    }, ...(ngDevMode ? [{ debugName: "segmentLayouts" }] : /* istanbul ignore next */ []));
+    trackContainerClasses = computed(() => `flex w-full overflow-hidden rounded-full bg-surface-200 ${this.trackHeightClass()}`, ...(ngDevMode ? [{ debugName: "trackContainerClasses" }] : /* istanbul ignore next */ []));
+    legendSwatchClass(variant) {
+        return this.variantToBarClass(variant ?? 'primary');
+    }
+    variantToBarClass(variant) {
+        const map = {
+            primary: 'bg-primary-600',
+            success: 'bg-success-600',
+            warning: 'bg-warning-500',
+            danger: 'bg-danger-600',
+            info: 'bg-info-600'
+        };
+        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-surface-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-surface-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+}
+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-surface-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-surface-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\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 {
+    /** Minimum bound */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum bound */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step increment */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Two-thumb range mode */
+    range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Layout */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Tick marks at each step */
+    showTicks = input(false, ...(ngDevMode ? [{ debugName: "showTicks" }] : /* istanbul ignore next */ []));
+    /** Control size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    trackRef = viewChild('track', ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
+    /** Single-thumb value */
+    singleValue = signal(0, ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
+    /** Range: lower value */
+    rangeLow = signal(0, ...(ngDevMode ? [{ debugName: "rangeLow" }] : /* istanbul ignore next */ []));
+    /** Range: upper value */
+    rangeHigh = signal(100, ...(ngDevMode ? [{ debugName: "rangeHigh" }] : /* istanbul ignore next */ []));
+    /** Disabled via template (combined with form `setDisabledState`) */
+    hostDisabled = input(false, { ...(ngDevMode ? { debugName: "hostDisabled" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isEffectivelyDisabled = computed(() => this.isDisabled() || this.hostDisabled(), ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    activeThumb = signal(null, ...(ngDevMode ? [{ debugName: "activeThumb" }] : /* istanbul ignore next */ []));
+    thumbSizeClass = computed(() => {
+        const map = {
+            xs: 'size-3',
+            sm: 'size-3.5',
+            md: 'size-4',
+            lg: 'size-5',
+            xl: 'size-6'
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "thumbSizeClass" }] : /* istanbul ignore next */ []));
+    trackThickness = computed(() => {
+        const map = {
+            xs: 'h-1',
+            sm: 'h-1.5',
+            md: 'h-2',
+            lg: 'h-2.5',
+            xl: 'h-3'
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "trackThickness" }] : /* istanbul ignore next */ []));
+    verticalTrackThickness = computed(() => {
+        const map = {
+            xs: 'w-1',
+            sm: 'w-1.5',
+            md: 'w-2',
+            lg: 'w-2.5',
+            xl: 'w-3'
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "verticalTrackThickness" }] : /* istanbul ignore next */ []));
+    singlePct = computed(() => this.valueToPct(this.singleValue()), ...(ngDevMode ? [{ debugName: "singlePct" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    tickPositions = computed(() => {
+        if (!this.showTicks()) {
+            return [];
+        }
+        const lo = this.min();
+        const hi = this.max();
+        const st = this.step();
+        if (st <= 0 || hi < lo) {
+            return [];
+        }
+        const steps = Math.round((hi - lo) / st);
+        const out = [];
+        for (let i = 0; i <= steps; i++) {
+            out.push(this.valueToPct(lo + i * st));
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "tickPositions" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        const lo = this.min();
+        const hi = this.max();
+        if (this.range()) {
+            const pair = Array.isArray(value) ? value : [lo, hi];
+            const a = this.snap(Math.min(pair[0] ?? lo, pair[1] ?? hi));
+            const b = this.snap(Math.max(pair[0] ?? lo, pair[1] ?? hi));
+            this.rangeLow.set(Math.min(a, b));
+            this.rangeHigh.set(Math.max(a, b));
+        }
+        else {
+            const n = Array.isArray(value) ? value[0] : value;
+            const num = typeof n === 'number' && !Number.isNaN(n) ? n : lo;
+            this.singleValue.set(this.snap(num));
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    valueToPct(v) {
+        const lo = this.min();
+        const hi = this.max();
+        if (hi === lo) {
+            return 0;
+        }
+        return ((this.snap(v) - lo) / (hi - lo)) * 100;
+    }
+    snap(raw) {
+        const lo = this.min();
+        const hi = this.max();
+        const st = this.step();
+        if (st <= 0) {
+            return Math.min(hi, Math.max(lo, raw));
+        }
+        const stepped = Math.round((raw - lo) / st) * st + lo;
+        const rounded = Math.round(stepped * 1e6) / 1e6;
+        return Math.min(hi, Math.max(lo, rounded));
+    }
+    pctToValue(pct) {
+        const lo = this.min();
+        const hi = this.max();
+        const v = lo + (pct / 100) * (hi - lo);
+        return this.snap(v);
+    }
+    onThumbPointerDown(event, thumbIndex) {
+        event.stopPropagation();
+        this.onTrackPointerDown(event, thumbIndex);
+    }
+    onTrackPointerDown(event, thumbIndex) {
+        if (this.isEffectivelyDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        const track = this.trackRef()?.nativeElement;
+        if (!track) {
+            return;
+        }
+        let thumb = thumbIndex;
+        if (!this.range()) {
+            thumb = null;
+        }
+        else if (thumb === null) {
+            const v = this.readValueFromPointer(event, track);
+            const low = this.rangeLow();
+            const high = this.rangeHigh();
+            const d0 = Math.abs(v - low);
+            const d1 = Math.abs(v - high);
+            thumb = d0 <= d1 ? 0 : 1;
+        }
+        this.activeThumb.set(thumb);
+        this.applyPointer(event, track, thumb);
+        if (typeof track.setPointerCapture === 'function') {
+            track.setPointerCapture(event.pointerId);
+        }
+        const move = (ev) => this.applyPointer(ev, track, thumb);
+        const up = (ev) => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            document.removeEventListener('pointercancel', up);
+            try {
+                track.releasePointerCapture(ev.pointerId);
+            }
+            catch {
+                /* ignore */
+            }
+            this.activeThumb.set(null);
+            this.onTouched();
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.addEventListener('pointercancel', up);
+    }
+    readValueFromPointer(event, track) {
+        const rect = track.getBoundingClientRect();
+        const horizontal = this.orientation() === 'horizontal';
+        let ratio;
+        if (horizontal) {
+            ratio = (event.clientX - rect.left) / rect.width;
+        }
+        else {
+            ratio = 1 - (event.clientY - rect.top) / rect.height;
+        }
+        ratio = Math.min(1, Math.max(0, ratio));
+        return this.pctToValue(ratio * 100);
+    }
+    applyPointer(event, track, thumbIndex) {
+        const next = this.readValueFromPointer(event, track);
+        if (this.range()) {
+            const idx = thumbIndex ?? 0;
+            if (idx === 0) {
+                const hi = this.rangeHigh();
+                this.rangeLow.set(this.snap(Math.min(next, hi)));
+            }
+            else {
+                const lo = this.rangeLow();
+                this.rangeHigh.set(this.snap(Math.max(next, lo)));
+            }
+            this.onChange([this.rangeLow(), this.rangeHigh()]);
+        }
+        else {
+            this.singleValue.set(next);
+            this.onChange(this.singleValue());
+        }
+    }
+    onKeyDown(event, thumbIndex) {
+        if (this.isEffectivelyDisabled()) {
+            return;
+        }
+        const keys = ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp', 'Home', 'End'];
+        if (!keys.includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const lo = this.min();
+        const hi = this.max();
+        const st = this.step();
+        const horizontal = this.orientation() === 'horizontal';
+        const decKey = horizontal ? 'ArrowLeft' : 'ArrowDown';
+        const incKey = horizontal ? 'ArrowRight' : 'ArrowUp';
+        const delta = (key) => {
+            if (key === 'Home') {
+                return lo - (thumbIndex === 0 ? this.rangeLow() : this.rangeHigh());
+            }
+            if (key === 'End') {
+                return hi - (thumbIndex === 0 ? this.rangeLow() : this.rangeHigh());
+            }
+            if (key === decKey) {
+                return -st;
+            }
+            if (key === incKey) {
+                return st;
+            }
+            return 0;
+        };
+        const d = delta(event.key);
+        if (d === 0) {
+            return;
+        }
+        if (this.range()) {
+            if (thumbIndex === 0) {
+                const next = this.snap(this.rangeLow() + d);
+                this.rangeLow.set(Math.min(next, this.rangeHigh()));
+            }
+            else {
+                const next = this.snap(this.rangeHigh() + d);
+                this.rangeHigh.set(Math.max(next, this.rangeLow()));
+            }
+            this.onChange([this.rangeLow(), this.rangeHigh()]);
+        }
+        else {
+            this.singleValue.set(this.snap(this.singleValue() + d));
+            this.onChange(this.singleValue());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindSlider, isStandalone: true, selector: "tailwind-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hostDisabled: { classPropertyName: "hostDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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-surface-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-surface-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 -translate-y-1/2 rounded-full bg-primary-500\"\r\n        [class]=\"trackThickness()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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-surface-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-surface-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 -translate-x-1/2 rounded-full bg-primary-500\"\r\n        [class]=\"verticalTrackThickness()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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:disabled{cursor:not-allowed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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-surface-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-surface-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 -translate-y-1/2 rounded-full bg-primary-500\"\r\n        [class]=\"trackThickness()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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-surface-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-surface-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 -translate-x-1/2 rounded-full bg-primary-500\"\r\n        [class]=\"verticalTrackThickness()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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 bg-primary-600 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\"\r\n          [class]=\"thumbSizeClass()\"\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: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 }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+// Batch 1 — Foundation
+
+/*
+ * Public API Surface of angular-tailwind-components
+ */
+// Models & Types
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HERO_ICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalContent, TailwindModalFooter, TailwindModalRef, TailwindModalService, TailwindModalTitle, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTimePicker, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective };
+//# sourceMappingURL=angular-tailwind-components.mjs.map