angular-tailwind-components 1.1.2 → 1.2.0

package/fesm2022/angular-tailwind-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, output, InjectionToken, model, forwardRef, effect, contentChildren, ApplicationRef, EnvironmentInjector, Injector, createComponent, Injectable, booleanAttribute } from '@angular/core';
+import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, output, InjectionToken, model, forwardRef, viewChildren, effect, contentChildren, ApplicationRef, EnvironmentInjector, Injector, createComponent, Injectable, booleanAttribute } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -1672,6 +1672,555 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     ], 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 TailwindTextarea extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Visible row count */
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Optional maximum width in columns */
+    cols = input(undefined, ...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
+    /** Maximum character length (HTML maxlength) */
+    maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    /** Resize behavior */
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether the textarea is readonly */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below field */
+    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 textarea 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 textarea classes */
+    textareaClasses = 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 min-h-[4.5rem]',
+            sm: 'text-sm px-2.5 py-1.5 rounded-md min-h-[5rem]',
+            md: 'text-sm px-3 py-2 rounded-md min-h-[5.5rem]',
+            lg: 'text-base px-3.5 py-2.5 rounded-lg min-h-[6.5rem]',
+            xl: 'text-base px-4 py-3 rounded-lg min-h-[7.5rem]'
+        };
+        const resizeMap = {
+            vertical: 'resize-y',
+            none: 'resize-none',
+            both: 'resize',
+            horizontal: 'resize-x'
+        };
+        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()], resizeMap[this.resize()], stateClass].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "textareaClasses" }] : /* istanbul ignore next */ []));
+    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: TailwindTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTextarea, isStandalone: true, selector: "tailwind-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", 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(() => TailwindTextarea),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-textarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindTextarea),
+                            multi: true
+                        }
+                    ], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class TailwindUpload extends TailwindComponent {
+    static nextId = 0;
+    fallbackFileId = `tw-upload-${TailwindUpload.nextId++}`;
+    fileInput = viewChild.required('fileInput');
+    /** Visual layout: compact button or drop zone */
+    variant = input('area', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Button label when `variant` is `button` */
+    buttonLabel = input('Choose file', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** Drop zone title when `variant` is `area` */
+    areaTitle = input('Drag and drop a file', ...(ngDevMode ? [{ debugName: "areaTitle" }] : /* istanbul ignore next */ []));
+    /** Drop zone hint when `variant` is `area` */
+    areaHint = input('or click to browse', ...(ngDevMode ? [{ debugName: "areaHint" }] : /* istanbul ignore next */ []));
+    /** Accepted MIME types / extensions (native `accept`) */
+    accept = input(undefined, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Allow multiple files */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Max size per file (bytes); if any file exceeds it, selection is rejected */
+    maxFileSizeBytes = input(undefined, ...(ngDevMode ? [{ debugName: "maxFileSizeBytes" }] : /* istanbul ignore next */ []));
+    /** Button / control size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Show a clear control when there is a value */
+    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Label for the clear action (i18n) */
+    clearText = input('clear', ...(ngDevMode ? [{ debugName: "clearText" }] : /* istanbul ignore next */ []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Data URL (`data:<mime>;base64,...`) — forms / `[(value)]`; with `multiple`, only the first file is stored here */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Raw files after a successful selection */
+    filesSelected = output();
+    /** Human-readable validation message when selection is rejected */
+    validationError = output();
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    selectedNames = signal([], ...(ngDevMode ? [{ debugName: "selectedNames" }] : /* istanbul ignore next */ []));
+    dragDepth = 0;
+    onChange = () => { };
+    onTouched = () => { };
+    fileInputId = computed(() => this.id() ?? this.fallbackFileId, ...(ngDevMode ? [{ debugName: "fileInputId" }] : /* istanbul ignore next */ []));
+    areaClasses = computed(() => {
+        const base = [
+            'flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-10 text-center',
+            'transition-colors duration-150 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+        ];
+        if (this.isDisabled()) {
+            return [...base, 'cursor-not-allowed opacity-50 bg-surface-50 border-surface-200 text-surface-500'].join(' ');
+        }
+        if (this.isDragOver()) {
+            return [...base, 'cursor-pointer border-primary-500 bg-primary-50/60 text-surface-800 focus-visible:outline-primary-500'].join(' ');
+        }
+        if (this.hasError()) {
+            return [
+                ...base,
+                'cursor-pointer border-danger-400 bg-danger-50/40 text-danger-900 focus-visible:outline-danger-500 hover:border-danger-500'
+            ].join(' ');
+        }
+        return [
+            ...base,
+            'cursor-pointer border-surface-300 bg-surface-50/50 text-surface-800 focus-visible:outline-primary-500',
+            'hover:border-primary-400 hover:bg-primary-50/30'
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "areaClasses" }] : /* istanbul ignore next */ []));
+    writeValue(obj) {
+        this.value.set(obj ?? '');
+        if (!obj) {
+            this.selectedNames.set([]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    triggerPicker(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.fileInput().nativeElement.click();
+    }
+    onKeydownArea(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.triggerPicker();
+        }
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.dragDepth++;
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0) {
+            this.isDragOver.set(false);
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragDepth = 0;
+        this.isDragOver.set(false);
+        if (this.isDisabled())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files?.length) {
+            void this.handleFiles(files);
+        }
+    }
+    onNativeChange(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files?.length) {
+            void this.handleFiles(files);
+        }
+        input.value = '';
+    }
+    clear(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.selectedNames.set([]);
+        this.value.set('');
+        this.onChange('');
+        this.fileInput().nativeElement.value = '';
+    }
+    blurHost() {
+        this.onTouched();
+    }
+    validate(files) {
+        const max = this.maxFileSizeBytes();
+        if (max == null)
+            return null;
+        const tooLarge = files.filter((f) => f.size > max);
+        if (tooLarge.length === 0)
+            return null;
+        const maxLabel = max >= 1024 * 1024
+            ? `${(max / (1024 * 1024)).toFixed(1)} MB`
+            : max >= 1024
+                ? `${Math.round(max / 1024)} KB`
+                : `${max} bytes`;
+        return tooLarge.length === 1
+            ? `File exceeds maximum size (${maxLabel}).`
+            : `${tooLarge.length} files exceed maximum size (${maxLabel}).`;
+    }
+    async handleFiles(fileList) {
+        let files = Array.from(fileList);
+        if (!this.multiple() && files.length > 1) {
+            files = [files[0]];
+        }
+        const err = this.validate(files);
+        if (err) {
+            this.validationError.emit(err);
+            return;
+        }
+        this.selectedNames.set(files.map((f) => f.name));
+        try {
+            const dataUrls = await Promise.all(files.map((f) => this.readAsDataUrl(f)));
+            this.filesSelected.emit(files);
+            const primary = dataUrls[0] ?? '';
+            this.value.set(primary);
+            this.onChange(primary);
+        }
+        catch {
+            this.validationError.emit('Could not read file.');
+        }
+    }
+    readAsDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const result = reader.result;
+                if (typeof result === 'string') {
+                    resolve(result);
+                }
+                else {
+                    reject(new Error('Unexpected read result'));
+                }
+            };
+            reader.onerror = () => reject(reader.error ?? new Error('read error'));
+            reader.readAsDataURL(file);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindUpload, isStandalone: true, selector: "tailwind-upload", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, areaTitle: { classPropertyName: "areaTitle", publicName: "areaTitle", isSignal: true, isRequired: false, transformFunction: null }, areaHint: { classPropertyName: "areaHint", publicName: "areaHint", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeBytes: { classPropertyName: "maxFileSizeBytes", publicName: "maxFileSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearText: { classPropertyName: "clearText", publicName: "clearText", 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", filesSelected: "filesSelected", validationError: "validationError" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindUpload),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"fileInputId()\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-upload\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-surface-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-surface-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-upload', imports: [TailwindIcon, TailwindButton], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindUpload),
+                            multi: true
+                        }
+                    ], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"fileInputId()\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-upload\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-surface-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-surface-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], areaTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaTitle", required: false }] }], areaHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaHint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
+
+class TailwindInputOtp extends TailwindComponent {
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Number of character slots */
+    length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /** Allow only digits */
+    integerOnly = input(true, ...(ngDevMode ? [{ debugName: "integerOnly" }] : /* istanbul ignore next */ []));
+    /** Mask digits (password bullets) */
+    mask = input(false, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Slots are read-only (navigation still allowed) */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below */
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error text when hasError is true */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    /** Error state styling */
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the group (used when label is empty) */
+    ariaLabel = input('Verification code', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Separator string; empty hides */
+    separator = input('', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** 0-based slot index after which the separator is rendered */
+    separatorAfterIndex = input(null, ...(ngDevMode ? [{ debugName: "separatorAfterIndex" }] : /* istanbul ignore next */ []));
+    /** Hint for browsers / SMS autofill (first slot only) */
+    autocomplete = input('one-time-code', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Two-way bound full code string */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted when all slots are filled */
+    completed = output();
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    slotIndexes = computed(() => {
+        const n = Math.max(1, Math.min(32, Math.floor(this.length())));
+        return Array.from({ length: n }, (_, i) => i);
+    }, ...(ngDevMode ? [{ debugName: "slotIndexes" }] : /* istanbul ignore next */ []));
+    otpInputs = viewChildren('otpDigit', ...(ngDevMode ? [{ debugName: "otpInputs" }] : /* istanbul ignore next */ []));
+    cellClasses = computed(() => {
+        const base = [
+            'block w-10 text-center font-mono tabular-nums bg-white',
+            'border transition-colors duration-150',
+            '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-1 py-1 rounded-sm min-w-7',
+            sm: 'text-sm px-1.5 py-1.5 rounded-md min-w-8',
+            md: 'text-sm px-2 py-2 rounded-md min-w-10',
+            lg: 'text-base px-2.5 py-2.5 rounded-lg min-w-11',
+            xl: 'text-base px-3 py-3 rounded-lg min-w-12'
+        };
+        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: "cellClasses" }] : /* istanbul ignore next */ []));
+    groupAriaLabel = computed(() => this.label() || this.ariaLabel(), ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(this.normalizeIncoming(value ?? ''));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    maxSlots() {
+        return this.slotIndexes().length;
+    }
+    digitAt(index) {
+        return this.value()[index] ?? '';
+    }
+    showSeparatorAfter(index) {
+        const sep = this.separator();
+        const pos = this.separatorAfterIndex();
+        return !!sep && pos !== null && pos === index;
+    }
+    inputType() {
+        return this.mask() ? 'password' : 'text';
+    }
+    inputMode() {
+        return this.integerOnly() ? 'numeric' : 'text';
+    }
+    autocompleteForSlot(index) {
+        return index === 0 ? this.autocomplete() : null;
+    }
+    cellId(index) {
+        const base = this.id() ?? 'tailwind-input-otp';
+        return `${base}-digit-${index}`;
+    }
+    onSlotFocus(index) {
+        this.onTouched();
+        const len = this.value().length;
+        if (index > len) {
+            queueMicrotask(() => this.focusSlot(Math.min(len, this.maxSlots() - 1)));
+        }
+    }
+    onInput(event, index) {
+        if (this.readonly()) {
+            return;
+        }
+        const inputEl = event.target;
+        let raw = inputEl.value;
+        if (this.integerOnly()) {
+            raw = raw.replace(/\D/g, '');
+        }
+        const char = raw.slice(-1);
+        let v = this.value();
+        const max = this.maxSlots();
+        if (char && index > v.length) {
+            queueMicrotask(() => this.focusSlot(v.length));
+            inputEl.value = this.digitAt(index);
+            return;
+        }
+        if (!char) {
+            if (index < v.length) {
+                v = v.slice(0, index) + v.slice(index + 1);
+            }
+        }
+        else {
+            if (index < v.length) {
+                v = v.slice(0, index) + char + v.slice(index + 1);
+            }
+            else if (index === v.length) {
+                v = v + char;
+            }
+            v = v.slice(0, max);
+        }
+        v = this.normalizeIncoming(v);
+        this.commit(v);
+        queueMicrotask(() => {
+            inputEl.value = this.digitAt(index);
+            if (char && index < max - 1) {
+                this.focusSlot(index + 1);
+            }
+        });
+    }
+    onPaste(event, index) {
+        if (this.readonly() || this.isDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text') ?? '';
+        let cleaned = this.integerOnly() ? text.replace(/\D/g, '') : text.replace(/\s/g, '');
+        const max = this.maxSlots();
+        cleaned = cleaned.slice(0, max - index);
+        const merged = this.normalizeIncoming(this.value().slice(0, index) + cleaned);
+        this.commit(merged);
+        queueMicrotask(() => this.focusSlot(cleaned.length ? Math.min(index + cleaned.length - 1, max - 1) : index));
+    }
+    onKeydown(event, index) {
+        const max = this.maxSlots();
+        const v = this.value();
+        if (event.key === 'Backspace') {
+            const cur = this.digitAt(index);
+            if (!cur && index > 0) {
+                event.preventDefault();
+                const nextVal = this.normalizeIncoming(v.slice(0, index - 1) + v.slice(index));
+                this.commit(nextVal);
+                queueMicrotask(() => this.focusSlot(index - 1));
+            }
+            else if (cur) {
+                event.preventDefault();
+                const nextVal = this.normalizeIncoming(v.slice(0, index) + v.slice(index + 1));
+                this.commit(nextVal);
+                queueMicrotask(() => {
+                    const el = this.otpInputs()[index]?.nativeElement;
+                    if (el) {
+                        el.value = this.digitAt(index);
+                    }
+                });
+            }
+            return;
+        }
+        if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            this.focusSlot(index - 1);
+        }
+        else if (event.key === 'ArrowRight' && index < max - 1) {
+            event.preventDefault();
+            this.focusSlot(index + 1);
+        }
+    }
+    commit(joined) {
+        const prev = this.value();
+        this.value.set(joined);
+        this.onChange(joined);
+        const max = this.maxSlots();
+        if (joined.length === max && prev.length !== max) {
+            this.completed.emit(joined);
+        }
+    }
+    normalizeIncoming(v) {
+        const max = Math.max(1, Math.min(32, Math.floor(this.length())));
+        let s = v ?? '';
+        if (this.integerOnly()) {
+            s = s.replace(/\D/g, '');
+        }
+        return s.slice(0, max);
+    }
+    focusSlot(index) {
+        queueMicrotask(() => {
+            const list = this.otpInputs();
+            const el = list[index]?.nativeElement;
+            el?.focus();
+            el?.select();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindInputOtp, isStandalone: true, selector: "tailwind-input-otp", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorAfterIndex: { classPropertyName: "separatorAfterIndex", publicName: "separatorAfterIndex", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindInputOtp),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"cellId(0)\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-surface-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-input-otp', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindInputOtp),
+                            multi: true
+                        }
+                    ], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"cellId(0)\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-surface-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorAfterIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorAfterIndex", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], otpInputs: [{ type: i0.ViewChildren, args: ['otpDigit', { isSignal: true }] }] } });
+
 class TailwindCheckbox extends TailwindComponent {
     /** Label text */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1723,7 +2272,7 @@ class TailwindCheckbox extends TailwindComponent {
                 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"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"inline-flex items-center gap-2.5 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-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  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800 leading-tight\">{{\n        label()\n      }}</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</div>\n", styles: [":host{display:inline-block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, decorators: [{
             type: Component,
@@ -1733,7 +2282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             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"] }]
+                    ], template: "<div\n  class=\"inline-flex items-center gap-2.5 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-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  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800 leading-tight\">{{\n        label()\n      }}</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</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class TailwindRadioGroup extends TailwindComponent {
@@ -2142,6 +2691,22 @@ class TailwindToggle extends TailwindComponent {
         const stateClass = this.checked() ? 'bg-primary-600' : 'bg-surface-300';
         return [...base, sizeMap[this.size()], stateClass].join(' ');
     }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    /** `aria-label` / `aria-labelledby` for the switch (label text is not a hit target) */
+    switchAria = computed(() => {
+        const al = this.ariaLabel();
+        if (al) {
+            return { label: al, labelledBy: null };
+        }
+        const lb = this.label();
+        const sid = this.id();
+        if (lb && sid) {
+            return { label: null, labelledBy: `${sid}-label` };
+        }
+        if (lb) {
+            return { label: lb, labelledBy: null };
+        }
+        return { label: 'Toggle', labelledBy: null };
+    }, ...(ngDevMode ? [{ debugName: "switchAria" }] : /* istanbul ignore next */ []));
     /** Thumb (knob) classes */
     thumbClasses = computed(() => {
         const sizeMap = {
@@ -2190,7 +2755,7 @@ class TailwindToggle extends TailwindComponent {
                 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"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"inline-flex items-center gap-3 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, decorators: [{
             type: Component,
@@ -2200,7 +2765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             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"] }]
+                    ], template: "<div\n  class=\"inline-flex items-center gap-3 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class TailwindBadge extends TailwindComponent {
@@ -2296,11 +2861,11 @@ class TailwindCard extends TailwindComponent {
     /** Whether the card has a footer */
     hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"bg-white rounded-xl border border-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"] });
+    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 pt-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"] }]
+            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 pt-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 {
@@ -2963,6 +3528,7 @@ const I18N$2 = {
     }
 };
 class TailwindDatePicker extends TailwindComponent {
+    host = inject(ElementRef);
     lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
     i18n = I18N$2[this.lang];
     weekDays = this.i18n.weekDays;
@@ -3069,19 +3635,40 @@ class TailwindDatePicker extends TailwindComponent {
         this.viewYear.set(t.getFullYear());
         this.selectDay(t.getDate());
     }
+    onDocumentPointerDown(event) {
+        if (!this.showCalendar())
+            return;
+        const t = event.target;
+        if (t instanceof Node && this.host.nativeElement.contains(t))
+            return;
+        this.showCalendar.set(false);
+    }
+    onDocumentKeydown(event) {
+        if (event.key !== 'Escape' || !this.showCalendar())
+            return;
+        event.stopPropagation();
+        this.showCalendar.set(false);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, 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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-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"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 const I18N$1 = {
     it: { placeholder: 'Seleziona ora', now: 'Adesso', apply: 'Applica' },
     en: { placeholder: 'Select time', now: 'Now', apply: 'Apply' }
 };
 class TailwindTimePicker extends TailwindComponent {
+    host = inject(ElementRef);
     lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
     i18n = I18N$1[this.lang];
     hours = Array.from({ length: 24 }, (_, i) => i);
@@ -3147,13 +3734,33 @@ class TailwindTimePicker extends TailwindComponent {
             return;
         this.draft.set({ ...cur, m: Number(e.target.value) });
     }
+    onDocumentPointerDown(event) {
+        if (!this.showPanel())
+            return;
+        const t = event.target;
+        if (t instanceof Node && this.host.nativeElement.contains(t))
+            return;
+        this.showPanel.set(false);
+    }
+    onDocumentKeydown(event) {
+        if (event.key !== 'Escape' || !this.showPanel())
+            return;
+        event.stopPropagation();
+        this.showPanel.set(false);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, 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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-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"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 const I18N = {
     it: {
@@ -3174,6 +3781,7 @@ const I18N = {
     }
 };
 class TailwindDateTimePicker extends TailwindComponent {
+    host = inject(ElementRef);
     lang = inject(TAILWIND_DATETIME_LANGUAGE, { optional: true }) ?? 'it';
     i18n = I18N[this.lang];
     weekDays = this.i18n.weekDays;
@@ -3309,13 +3917,33 @@ class TailwindDateTimePicker extends TailwindComponent {
         this.onChange(d ? new Date(d.getTime()) : null);
         this.onTouched();
     }
+    onDocumentPointerDown(event) {
+        if (!this.showPanel())
+            return;
+        const t = event.target;
+        if (t instanceof Node && this.host.nativeElement.contains(t))
+            return;
+        this.showPanel.set(false);
+    }
+    onDocumentKeydown(event) {
+        if (event.key !== 'Escape' || !this.showPanel())
+            return;
+        event.stopPropagation();
+        this.showPanel.set(false);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, 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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-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 }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }], onDocumentKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 class TailwindStep extends TailwindComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -3774,6 +4402,8 @@ class TailwindSlider extends TailwindComponent {
     showTicks = input(false, ...(ngDevMode ? [{ debugName: "showTicks" }] : /* istanbul ignore next */ []));
     /** Control size */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Track fill / thumb color */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     trackRef = viewChild('track', ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
     /** Single-thumb value */
     singleValue = signal(0, ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
@@ -3818,6 +4448,18 @@ class TailwindSlider extends TailwindComponent {
         };
         return map[this.size()];
     }, ...(ngDevMode ? [{ debugName: "verticalTrackThickness" }] : /* istanbul ignore next */ []));
+    /**
+     * Uses theme CSS variables (`--color-*`) so accent colors work even when dynamic
+     * `bg-*` utilities are not present in the compiled stylesheet (Tailwind content scan).
+     */
+    accentVars = computed(() => {
+        const name = this.variant();
+        return {
+            fill: `var(--color-${name}-500)`,
+            thumb: `var(--color-${name}-600)`,
+            ring: `var(--color-${name}-500)`
+        };
+    }, ...(ngDevMode ? [{ debugName: "accentVars" }] : /* 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 */ []));
@@ -4021,13 +4663,13 @@ class TailwindSlider extends TailwindComponent {
         }
     }
     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: [
+    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 }, variant: { classPropertyName: "variant", publicName: "variant", 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"] });
+        ], 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 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-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 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
             type: Component,
@@ -4037,8 +4679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindSlider),
                             multi: true
                         }
-                    ], template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-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 }] }] } });
+                    ], 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 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-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 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 // Batch 1 — Foundation
 
@@ -4051,5 +4693,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective };
+export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload };
 //# sourceMappingURL=angular-tailwind-components.mjs.map