@highstacklabs2026/ui 1.1.1 → 1.2.0

package/fesm2022/highstacklabs2026-ui.mjs

@@ -1,5 +1,390 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
+import { input, booleanAttribute, signal, Component, inject, computed, output, contentChildren, effect, model, forwardRef, ElementRef, HostListener, Directive, numberAttribute, TemplateRef, viewChild, afterNextRender, ApplicationRef, EnvironmentInjector, createComponent, Injectable, Renderer2, APP_INITIALIZER } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+
+let nextId$6 = 0;
+/**
+ * Acordeón compositional. `multiple` permite varios paneles abiertos; por
+ * defecto solo uno (al abrir otro se cierra el anterior).
+ */
+class AccordionComponent {
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Ids de los items abiertos. */
+    openIds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openIds" }] : /* istanbul ignore next */ []));
+    isOpen(id) {
+        return this.openIds().has(id);
+    }
+    toggle(id) {
+        this.openIds.update((set) => {
+            const next = new Set(this.multiple() ? set : []);
+            if (set.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: AccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block divide-y divide-[var(--color-border)] border-y border-[var(--color-border)]" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-accordion',
+                    template: `<ng-content />`,
+                    host: { class: 'block divide-y divide-[var(--color-border)] border-y border-[var(--color-border)]' },
+                }]
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }] } });
+/** Un panel del acordeón. */
+class AccordionItemComponent {
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    accordion = inject(AccordionComponent);
+    id = nextId$6++;
+    contentId = `ui-accordion-panel-${this.id}`;
+    open = computed(() => this.accordion.isOpen(this.id), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.disabled())
+            this.accordion.toggle(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: AccordionItemComponent, isStandalone: true, selector: "ui-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h3>\n  <button\n    type=\"button\"\n    (click)=\"toggle()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"contentId\"\n    class=\"flex w-full items-center justify-between gap-3 py-4 text-left text-sm font-medium text-[var(--color-foreground)] transition-colors hover:text-[var(--color-foreground)]/80 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] rounded-sm\"\n  >\n    <span>{{ title() }}</span>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"shrink-0 text-[var(--color-muted-foreground)] transition-transform duration-200\"\n      [class.rotate-180]=\"open()\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</h3>\n\n<div\n  [id]=\"contentId\"\n  role=\"region\"\n  class=\"grid transition-all duration-200\"\n  [class.grid-rows-[1fr]]=\"open()\"\n  [class.grid-rows-[0fr]]=\"!open()\"\n  [class.opacity-100]=\"open()\"\n  [class.opacity-0]=\"!open()\"\n>\n  <div class=\"overflow-hidden\">\n    <div class=\"pb-4 text-sm text-[var(--color-muted-foreground)]\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-accordion-item', template: "<h3>\n  <button\n    type=\"button\"\n    (click)=\"toggle()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"contentId\"\n    class=\"flex w-full items-center justify-between gap-3 py-4 text-left text-sm font-medium text-[var(--color-foreground)] transition-colors hover:text-[var(--color-foreground)]/80 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] rounded-sm\"\n  >\n    <span>{{ title() }}</span>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"shrink-0 text-[var(--color-muted-foreground)] transition-transform duration-200\"\n      [class.rotate-180]=\"open()\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n</h3>\n\n<div\n  [id]=\"contentId\"\n  role=\"region\"\n  class=\"grid transition-all duration-200\"\n  [class.grid-rows-[1fr]]=\"open()\"\n  [class.grid-rows-[0fr]]=\"!open()\"\n  [class.opacity-100]=\"open()\"\n  [class.opacity-0]=\"!open()\"\n>\n  <div class=\"overflow-hidden\">\n    <div class=\"pb-4 text-sm text-[var(--color-muted-foreground)]\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Mensaje contextual con color e ícono según el tipo. El cuerpo se proyecta;
+ * `title` opcional en negrita. Cerrable con el output (close).
+ */
+class AlertComponent {
+    type = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    close = output();
+    hostClasses = computed(() => {
+        const base = 'flex items-start gap-3 rounded-[var(--radius)] px-4 py-3 text-sm';
+        const softMap = {
+            info: 'bg-[var(--color-primary)]/8 text-[var(--color-foreground)] border border-[var(--color-primary)]/20',
+            success: 'bg-emerald-500/10 text-[var(--color-foreground)] border border-emerald-500/25',
+            warning: 'bg-amber-500/10 text-[var(--color-foreground)] border border-amber-500/30',
+            error: 'bg-[var(--color-destructive)]/10 text-[var(--color-foreground)] border border-[var(--color-destructive)]/25',
+        };
+        const solidMap = {
+            info: 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]',
+            success: 'bg-emerald-500 text-white',
+            warning: 'bg-amber-500 text-white',
+            error: 'bg-[var(--color-destructive)] text-[var(--color-destructive-foreground)]',
+        };
+        const tone = this.variant() === 'solid' ? solidMap[this.type()] : softMap[this.type()];
+        return [base, tone].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    /** Color del ícono (en soft toma el color del tipo; en solid hereda currentColor). */
+    iconColor = computed(() => {
+        if (this.variant() === 'solid')
+            return '';
+        const map = {
+            info: 'text-[var(--color-primary)]',
+            success: 'text-emerald-600',
+            warning: 'text-amber-600',
+            error: 'text-[var(--color-destructive)]',
+        };
+        return map[this.type()];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AlertComponent, isStandalone: true, selector: "ui-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<span class=\"shrink-0 mt-0.5\" [class]=\"iconColor()\">\n  @switch (type()) {\n    @case ('success') {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" /><polyline points=\"22 4 12 14.01 9 11.01\" /></svg>\n    }\n    @case ('warning') {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" /></svg>\n    }\n    @case ('error') {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" /></svg>\n    }\n    @default {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" /></svg>\n    }\n  }\n</span>\n\n<div class=\"flex-1 min-w-0\">\n  @if (title()) {\n    <p class=\"font-semibold leading-tight\">{{ title() }}</p>\n  }\n  <div [class.mt-1]=\"title()\" [class.text-[var(--color-muted-foreground)]]=\"variant() === 'soft'\">\n    <ng-content />\n  </div>\n</div>\n\n@if (closable()) {\n  <button\n    type=\"button\"\n    (click)=\"close.emit()\"\n    aria-label=\"Cerrar\"\n    class=\"shrink-0 -mr-1 -mt-0.5 flex items-center justify-center size-6 rounded-md opacity-70 hover:opacity-100 transition-opacity cursor-pointer\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>\n  </button>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-alert', host: { role: 'alert', '[class]': 'hostClasses()' }, template: "<span class=\"shrink-0 mt-0.5\" [class]=\"iconColor()\">\n  @switch (type()) {\n    @case ('success') {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" /><polyline points=\"22 4 12 14.01 9 11.01\" /></svg>\n    }\n    @case ('warning') {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" /></svg>\n    }\n    @case ('error') {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" /></svg>\n    }\n    @default {\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" /></svg>\n    }\n  }\n</span>\n\n<div class=\"flex-1 min-w-0\">\n  @if (title()) {\n    <p class=\"font-semibold leading-tight\">{{ title() }}</p>\n  }\n  <div [class.mt-1]=\"title()\" [class.text-[var(--color-muted-foreground)]]=\"variant() === 'soft'\">\n    <ng-content />\n  </div>\n</div>\n\n@if (closable()) {\n  <button\n    type=\"button\"\n    (click)=\"close.emit()\"\n    aria-label=\"Cerrar\"\n    class=\"shrink-0 -mr-1 -mt-0.5 flex items-center justify-center size-6 rounded-md opacity-70 hover:opacity-100 transition-opacity cursor-pointer\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>\n  </button>\n}\n" }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+const SIZE_BOX = {
+    xs: 'size-6 text-[10px]',
+    sm: 'size-8 text-xs',
+    md: 'size-10 text-sm',
+    lg: 'size-12 text-base',
+    xl: 'size-16 text-lg',
+};
+const STATUS_DOT = {
+    xs: 'size-1.5',
+    sm: 'size-2',
+    md: 'size-2.5',
+    lg: 'size-3',
+    xl: 'size-3.5',
+};
+const STATUS_COLOR = {
+    online: 'bg-emerald-500',
+    offline: 'bg-zinc-400',
+    away: 'bg-amber-500',
+    busy: 'bg-[var(--color-destructive)]',
+};
+/** Avatar: imagen con fallback a iniciales, tamaños, forma e indicador de estado. */
+class AvatarComponent {
+    src = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    alt = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    status = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Lo controla ui-avatar-group para ocultar los que exceden `max`. */
+    hidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    imgError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imgError" }] : /* istanbul ignore next */ []));
+    showImage = computed(() => !!this.src() && !this.imgError(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
+    initials = computed(() => {
+        const n = this.name().trim();
+        if (!n)
+            return '';
+        const parts = n.split(/\s+/);
+        const first = parts[0]?.[0] ?? '';
+        const last = parts.length > 1 ? (parts[parts.length - 1][0] ?? '') : '';
+        return (first + last).toUpperCase();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    statusDotClasses = computed(() => {
+        const s = this.status();
+        if (!s)
+            return '';
+        return [
+            'absolute bottom-0 right-0 rounded-full ring-2 ring-[var(--color-background)]',
+            STATUS_DOT[this.size()],
+            STATUS_COLOR[s],
+        ].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusDotClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => {
+        const base = 'inline-flex items-center justify-center size-full overflow-hidden select-none font-medium bg-[var(--color-muted)] text-[var(--color-muted-foreground)]';
+        const shape = this.shape() === 'square' ? 'rounded-[var(--radius)]' : 'rounded-full';
+        return [base, shape].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const base = 'relative inline-flex shrink-0';
+        const shape = this.shape() === 'square' ? 'rounded-[var(--radius)]' : 'rounded-full';
+        const hidden = this.hidden() ? 'hidden' : '';
+        // shape en el host también, para que el ring del apilado siga la forma
+        return [base, SIZE_BOX[this.size()], shape, hidden].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onImgError() {
+        this.imgError.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AvatarComponent, isStandalone: true, selector: "ui-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<span [class]=\"innerClasses()\">\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"alt() || name()\"\n      (error)=\"onImgError()\"\n      class=\"size-full object-cover\"\n    />\n  } @else if (initials()) {\n    <span>{{ initials() }}</span>\n  } @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-3/5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n      <circle cx=\"12\" cy=\"7\" r=\"4\" />\n    </svg>\n  }\n</span>\n\n@if (status()) {\n  <span [class]=\"statusDotClasses()\"></span>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', host: { '[class]': 'hostClasses()' }, template: "<span [class]=\"innerClasses()\">\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"alt() || name()\"\n      (error)=\"onImgError()\"\n      class=\"size-full object-cover\"\n    />\n  } @else if (initials()) {\n    <span>{{ initials() }}</span>\n  } @else {\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-3/5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n      <circle cx=\"12\" cy=\"7\" r=\"4\" />\n    </svg>\n  }\n</span>\n\n@if (status()) {\n  <span [class]=\"statusDotClasses()\"></span>\n}\n" }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+/** Grupo de avatares apilados, con "+N" cuando se supera `max`. */
+class AvatarGroupComponent {
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    avatars = contentChildren(AvatarComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatars" }] : /* istanbul ignore next */ []));
+    overflow = computed(() => {
+        const m = this.max();
+        const n = this.avatars().length;
+        return m != null && n > m ? n - m : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    moreClasses = computed(() => [
+        'relative inline-flex items-center justify-center shrink-0 rounded-full font-medium -ml-2',
+        'ring-2 ring-[var(--color-background)] bg-[var(--color-muted)] text-[var(--color-muted-foreground)]',
+        SIZE_BOX[this.size()],
+    ].join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const m = this.max();
+            this.avatars().forEach((a, i) => a.hidden.set(m != null && i >= m));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: AvatarGroupComponent, isStandalone: true, selector: "ui-avatar-group", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center [&>ui-avatar]:ring-2 [&>ui-avatar]:ring-[var(--color-background)] [&>ui-avatar:not(:first-child)]:-ml-2" }, queries: [{ propertyName: "avatars", predicate: AvatarComponent, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+    @if (overflow() > 0) {
+      <span
+        [class]="moreClasses()"
+        aria-hidden="true"
+      >+{{ overflow() }}</span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-avatar-group',
+                    template: `
+    <ng-content />
+    @if (overflow() > 0) {
+      <span
+        [class]="moreClasses()"
+        aria-hidden="true"
+      >+{{ overflow() }}</span>
+    }
+  `,
+                    host: {
+                        class: 'flex items-center [&>ui-avatar]:ring-2 [&>ui-avatar]:ring-[var(--color-background)] [&>ui-avatar:not(:first-child)]:-ml-2',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvatarComponent), { isSignal: true }] }] } });
+
+/**
+ * Etiqueta compacta para estados, tags y contadores.
+ * Dos ejes: variant (solid/soft/outline) × color, más dot, ícono y removible.
+ */
+class BadgeComponent {
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Se emite al pulsar la × (solo si removable). */
+    remove = output();
+    hostClasses = computed(() => {
+        const base = 'inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap align-middle';
+        const sizeMap = {
+            sm: 'h-5 px-2 text-[11px]',
+            md: 'h-6 px-2.5 text-xs',
+        };
+        // color × variant. solid: fondo lleno · soft: tinte suave · outline: solo borde ·
+        // glass: translúcido con desenfoque (luce sobre imágenes/fondos con color).
+        const styleMap = {
+            primary: {
+                solid: 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)]',
+                soft: 'bg-[var(--color-primary)]/12 text-[var(--color-primary)]',
+                outline: 'border border-[var(--color-primary)]/40 text-[var(--color-primary)]',
+                glass: 'backdrop-blur-md bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/30 text-[var(--color-primary)] shadow-sm',
+            },
+            secondary: {
+                solid: 'bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]',
+                soft: 'bg-[var(--color-muted)] text-[var(--color-muted-foreground)]',
+                outline: 'border border-[var(--color-border)] text-[var(--color-muted-foreground)]',
+                glass: 'backdrop-blur-md bg-white/15 border border-white/25 text-white shadow-sm',
+            },
+            success: {
+                solid: 'bg-emerald-500 text-white',
+                soft: 'bg-emerald-500/12 text-emerald-600',
+                outline: 'border border-emerald-500/40 text-emerald-600',
+                glass: 'backdrop-blur-md bg-emerald-400/25 border border-emerald-200/40 text-emerald-50 shadow-sm',
+            },
+            warning: {
+                solid: 'bg-amber-500 text-white',
+                soft: 'bg-amber-500/15 text-amber-600',
+                outline: 'border border-amber-500/40 text-amber-600',
+                glass: 'backdrop-blur-md bg-amber-400/25 border border-amber-200/40 text-amber-50 shadow-sm',
+            },
+            destructive: {
+                solid: 'bg-[var(--color-destructive)] text-[var(--color-destructive-foreground)]',
+                soft: 'bg-[var(--color-destructive)]/12 text-[var(--color-destructive)]',
+                outline: 'border border-[var(--color-destructive)]/40 text-[var(--color-destructive)]',
+                glass: 'backdrop-blur-md bg-[var(--color-destructive)]/25 border border-white/30 text-white shadow-sm',
+            },
+        };
+        return [base, sizeMap[this.size()], styleMap[this.color()][this.variant()]].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { classAttribute: "inline-flex" }, ngImport: i0, template: "<span [class]=\"hostClasses()\">\n  @if (dot()) {\n    <span class=\"size-1.5 rounded-full bg-current\"></span>\n  }\n\n  <ng-content select=\"[slot=icon]\" />\n\n  <ng-content />\n\n  @if (removable()) {\n    <button\n      type=\"button\"\n      (click)=\"remove.emit()\"\n      aria-label=\"Quitar\"\n      class=\"-mr-0.5 flex items-center justify-center rounded-full opacity-70 hover:opacity-100 transition-opacity cursor-pointer\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>\n    </button>\n  }\n</span>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-badge', host: { class: 'inline-flex' }, template: "<span [class]=\"hostClasses()\">\n  @if (dot()) {\n    <span class=\"size-1.5 rounded-full bg-current\"></span>\n  }\n\n  <ng-content select=\"[slot=icon]\" />\n\n  <ng-content />\n\n  @if (removable()) {\n    <button\n      type=\"button\"\n      (click)=\"remove.emit()\"\n      aria-label=\"Quitar\"\n      class=\"-mr-0.5 flex items-center justify-center rounded-full opacity-70 hover:opacity-100 transition-opacity cursor-pointer\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>\n    </button>\n  }\n</span>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
+
+/** Ruta de navegación jerárquica. Inserta un separador entre ítems. */
+class BreadcrumbComponent {
+    items = contentChildren(BreadcrumbItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", host: { attributes: { "aria-label": "Breadcrumb" } }, queries: [{ propertyName: "items", predicate: BreadcrumbItemComponent, isSignal: true }], ngImport: i0, template: "<ol class=\"flex flex-wrap items-center text-sm\">\n  <ng-content />\n</ol>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-breadcrumb', host: { 'aria-label': 'Breadcrumb' }, template: "<ol class=\"flex flex-wrap items-center text-sm\">\n  <ng-content />\n</ol>\n" }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemComponent), { isSignal: true }] }] } });
+/** Un ítem del breadcrumb. Con `link` es navegable; sin él, es el actual. */
+class BreadcrumbItemComponent {
+    /** Destino de routerLink; si se omite, el ítem es el actual (no navegable). */
+    link = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+    parent = inject(BreadcrumbComponent);
+    /** Es el último ítem (no muestra separador después). */
+    isLast = computed(() => {
+        const list = this.parent.items();
+        return list.length > 0 && list[list.length - 1] === this;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BreadcrumbItemComponent, isStandalone: true, selector: "ui-breadcrumb-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center" }, ngImport: i0, template: `
+    <a
+      [routerLink]="link() || null"
+      [attr.aria-current]="link() ? null : 'page'"
+      [class]="
+        link()
+          ? 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors cursor-pointer'
+          : 'font-medium text-[var(--color-foreground)]'
+      "
+    >
+      <ng-content />
+    </a>
+    @if (!isLast()) {
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-1.5 text-[var(--color-muted-foreground)]/60"><path d="m9 18 6-6-6-6" /></svg>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-breadcrumb-item',
+                    template: `
+    <a
+      [routerLink]="link() || null"
+      [attr.aria-current]="link() ? null : 'page'"
+      [class]="
+        link()
+          ? 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors cursor-pointer'
+          : 'font-medium text-[var(--color-foreground)]'
+      "
+    >
+      <ng-content />
+    </a>
+    @if (!isLast()) {
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-1.5 text-[var(--color-muted-foreground)]/60"><path d="m9 18 6-6-6-6" /></svg>
+    }
+  `,
+                    imports: [RouterLink],
+                    host: { class: 'inline-flex items-center' },
+                }]
+        }], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }] } });
 
 class ButtonComponent {
     variant = input('default', /* @ts-ignore */
@@ -12,42 +397,1818 @@ class ButtonComponent {
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     type = input('button', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    pill = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pill" }] : /* istanbul ignore next */ []));
+    full = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "full" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
         const base = [
-            'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)]',
-            'text-sm font-medium transition-all',
+            'inline-flex items-center justify-center gap-2 whitespace-nowrap',
+            this.pill() ? 'rounded-full' : '',
+            this.full() ? 'w-full' : '',
+            'font-medium transition-all duration-150',
             'outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--color-ring)]/50',
-            'disabled:pointer-events-none disabled:opacity-50',
+            'disabled:pointer-events-none disabled:opacity-50 disabled:transform-none disabled:shadow-none',
             'cursor-pointer',
-        ].join(' ');
+        ].filter(Boolean).join(' ');
         const variantMap = {
-            default: 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-xs hover:bg-[var(--color-primary)]/90',
-            destructive: 'bg-[var(--color-destructive)] text-[var(--color-destructive-foreground)] shadow-xs hover:bg-[var(--color-destructive)]/90 focus-visible:ring-[var(--color-destructive)]/20',
-            outline: 'border border-[var(--color-input)] bg-[var(--color-background)] shadow-xs hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]',
-            secondary: 'bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] shadow-xs hover:bg-[var(--color-secondary)]/80',
-            ghost: 'hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]',
+            default: 'bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-sm hover:bg-[var(--color-primary)]/95 active:translate-y-[1px] active:scale-[0.98] active:shadow-sm',
+            destructive: 'bg-[var(--color-destructive)] text-[var(--color-destructive-foreground)] shadow-sm hover:bg-[var(--color-destructive)]/95 active:translate-y-[1px] active:scale-[0.98] active:shadow-sm focus-visible:ring-[var(--color-destructive)]/20',
+            outline: 'border border-[var(--color-input)] bg-[var(--color-background)] shadow-sm hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)] active:translate-y-[1px] active:scale-[0.98] active:shadow-sm',
+            secondary: 'bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] shadow-sm hover:bg-[var(--color-secondary)]/90 active:translate-y-[1px] active:scale-[0.98] active:shadow-sm',
+            ghost: 'hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)] active:scale-[0.98]',
             link: 'text-[var(--color-primary)] underline-offset-4 hover:underline',
-            gradient: 'bg-gradient-to-r from-zinc-900 to-zinc-700 text-white shadow-xs hover:from-zinc-800 hover:to-zinc-600',
-            glass: 'backdrop-blur-2xl bg-white/10 border border-white/15 text-white/90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:bg-white/[0.18] active:bg-white/[0.12]',
+            gradient: 'text-[var(--color-primary-foreground)] ' +
+                'bg-[linear-gradient(135deg,var(--color-primary)_0%,var(--color-primary-gradient)_50%,var(--color-primary)_100%)] ' +
+                'bg-[length:200%_100%] bg-left ' +
+                'shadow-[0_1px_2px_0_rgb(0_0_0/0.10),inset_0_1px_0_0_rgb(255_255_255/0.22)] ' +
+                'transition-[background-position,transform,box-shadow] duration-300 ease-out ' +
+                'hover:bg-right ' +
+                'active:translate-y-[1px] active:scale-[0.98] active:shadow-sm',
+            glass: 'backdrop-blur-2xl bg-white/10 border border-white/15 text-white/90 shadow-sm hover:bg-white/[0.18] active:translate-y-[1px] active:scale-[0.98] active:shadow-sm',
+            success: 'bg-emerald-500 text-white shadow-sm hover:bg-emerald-600 active:translate-y-[1px] active:scale-[0.98] active:shadow-sm focus-visible:ring-emerald-500/20',
+            warning: 'bg-amber-500 text-white shadow-sm hover:bg-amber-600 active:translate-y-[1px] active:scale-[0.98] active:shadow-sm focus-visible:ring-amber-500/20',
         };
+        // Radio ligado al tamaño: menos alto → menos redondez (estilo shadcn).
+        const pill = this.pill();
         const sizeMap = {
-            sm: 'h-8 px-3 gap-1.5',
-            md: 'h-9 px-4 py-2',
-            lg: 'h-10 px-6',
-            icon: 'size-9',
+            xs: `h-6 px-2 gap-1 text-xs ${pill ? '' : 'rounded-lg'}`,
+            sm: `h-8 px-3 gap-1.5 text-xs ${pill ? '' : 'rounded-lg'}`,
+            md: `h-9 px-4 gap-2 text-sm ${pill ? '' : 'rounded-[10px]'}`,
+            lg: `h-10 px-5 gap-2 text-sm ${pill ? '' : 'rounded-[10px]'}`,
+            icon: `size-9 ${pill ? '' : 'rounded-[10px]'}`,
         };
         return [base, variantMap[this.variant()], sizeMap[this.size()]].join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ButtonComponent, isStandalone: true, selector: "ui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [class]=\"hostClasses()\"\n>\n  @if (loading()) {\n    <svg\n      class=\"h-4 w-4 animate-spin\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n      ></path>\n    </svg>\n  }\n  <ng-content />\n</button>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ButtonComponent, isStandalone: true, selector: "ui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [class]=\"hostClasses()\"\n>\n  @if (loading()) {\n    <svg\n      class=\"h-4 w-4 animate-spin\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n      ></path>\n    </svg>\n  }\n  <ng-content />\n</button>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-button', template: "<button\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [class]=\"hostClasses()\"\n>\n  @if (loading()) {\n    <svg\n      class=\"h-4 w-4 animate-spin\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n      ></path>\n    </svg>\n  }\n  <ng-content />\n</button>\n" }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }] } });
+
+/** Contenedor principal. Proyecta header/content/footer (u contenido libre). */
+class CardComponent {
+    variant = input('elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const base = 'flex flex-col gap-6 py-6 rounded-[var(--radius)] bg-[var(--color-background)] text-[var(--color-foreground)]';
+        const variantMap = {
+            elevated: 'border border-[var(--color-border)] shadow-sm',
+            outline: 'border border-[var(--color-border)]',
+            soft: 'bg-[var(--color-muted)]/40',
+            interactive: 'border border-[var(--color-border)] shadow-sm transition-all hover:shadow-md hover:border-[var(--color-ring)]/40 active:scale-[0.995] cursor-pointer',
+        };
+        return `${base} ${variantMap[this.variant()]}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CardComponent, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card',
+                    template: `<ng-content />`,
+                    host: { '[class]': 'hostClasses()' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+/** Cabecera: padding + columna con separación. */
+class CardHeaderComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CardHeaderComponent, isStandalone: true, selector: "ui-card-header", host: { classAttribute: "flex flex-col gap-1.5 px-6" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card-header',
+                    template: `<ng-content />`,
+                    host: { class: 'flex flex-col gap-1.5 px-6' },
+                }]
+        }] });
+/** Título de la tarjeta. */
+class CardTitleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CardTitleComponent, isStandalone: true, selector: "ui-card-title", host: { classAttribute: "block text-base font-semibold tracking-tight text-[var(--color-foreground)]" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card-title',
+                    template: `<ng-content />`,
+                    host: { class: 'block text-base font-semibold tracking-tight text-[var(--color-foreground)]' },
+                }]
+        }] });
+/** Descripción / subtítulo. */
+class CardDescriptionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CardDescriptionComponent, isStandalone: true, selector: "ui-card-description", host: { classAttribute: "block text-sm text-[var(--color-muted-foreground)]" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card-description',
+                    template: `<ng-content />`,
+                    host: { class: 'block text-sm text-[var(--color-muted-foreground)]' },
+                }]
+        }] });
+/** Cuerpo de la tarjeta. */
+class CardContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CardContentComponent, isStandalone: true, selector: "ui-card-content", host: { classAttribute: "block px-6" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card-content',
+                    template: `<ng-content />`,
+                    host: { class: 'block px-6' },
+                }]
+        }] });
+/** Pie: fila para acciones (botones). */
+class CardFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: CardFooterComponent, isStandalone: true, selector: "ui-card-footer", host: { classAttribute: "flex items-center gap-3 px-6" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-card-footer',
+                    template: `<ng-content />`,
+                    host: { class: 'flex items-center gap-3 px-6' },
+                }]
+        }] });
+
+let nextId$5 = 0;
+/**
+ * Casilla de verificación. Funciona con Signal Forms (`[formField]`, contrato
+ * FormCheckboxControl), ControlValueAccessor (ngModel/Reactive) y two-way `[(checked)]`.
+ */
+class CheckboxComponent {
+    /** Fuente única de verdad (Signal Forms usa `checked` para checkboxes). */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    id = input(`ui-checkbox-${nextId$5++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => {
+        if (this.touched()) {
+            const first = this.errors()[0];
+            if (first)
+                return first.message ?? first.kind ?? 'Campo inválido';
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMessage() || (this.invalid() && this.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => {
+        const sizeMap = {
+            sm: 'size-4',
+            md: 'size-5',
+        };
+        const on = this.checked() || this.indeterminate();
+        const base = 'shrink-0 flex items-center justify-center rounded-[6px] border transition-all outline-none';
+        const state = on
+            ? 'bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-foreground)]'
+            : this.hasError()
+                ? 'border-[var(--color-destructive)] bg-[var(--color-background)]'
+                : 'border-[var(--color-input)] bg-[var(--color-background)]';
+        const focus = 'peer-focus-visible:ring-[3px] peer-focus-visible:ring-[var(--color-ring)]/40';
+        const disabled = this.isDisabled() ? 'opacity-50' : '';
+        return [base, sizeMap[this.size()], state, focus, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    toggle(event) {
+        const next = event.target.checked;
+        this.checked.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  [for]=\"id()\"\n  class=\"flex items-start gap-2.5\"\n  [class.cursor-pointer]=\"!isDisabled()\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n>\n  <span class=\"relative inline-flex items-center\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      (change)=\"toggle($event)\"\n      class=\"peer absolute inset-0 size-full opacity-0 m-0 cursor-pointer disabled:cursor-not-allowed\"\n    />\n    <span [class]=\"boxClasses()\">\n      @if (indeterminate()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"size() === 'sm' ? 10 : 12\" [attr.height]=\"size() === 'sm' ? 10 : 12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" /></svg>\n      } @else if (checked()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"size() === 'sm' ? 10 : 12\" [attr.height]=\"size() === 'sm' ? 10 : 12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>\n      }\n    </span>\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"flex flex-col gap-0.5 -mt-px\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-[var(--color-foreground)] leading-tight\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"text-[var(--color-destructive)]\">*</span>\n          }\n        </span>\n      }\n      @if (description()) {\n        <span class=\"text-xs text-[var(--color-muted-foreground)]\">{{ description() }}</span>\n      }\n    </span>\n  }\n</label>\n\n@if (hasError()) {\n  <p class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">{{ errorMessage() }}</p>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox', host: { class: 'block' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true },
+                    ], template: "<label\n  [for]=\"id()\"\n  class=\"flex items-start gap-2.5\"\n  [class.cursor-pointer]=\"!isDisabled()\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n>\n  <span class=\"relative inline-flex items-center\">\n    <input\n      type=\"checkbox\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-invalid]=\"hasError() || null\"\n      (change)=\"toggle($event)\"\n      class=\"peer absolute inset-0 size-full opacity-0 m-0 cursor-pointer disabled:cursor-not-allowed\"\n    />\n    <span [class]=\"boxClasses()\">\n      @if (indeterminate()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"size() === 'sm' ? 10 : 12\" [attr.height]=\"size() === 'sm' ? 10 : 12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" /></svg>\n      } @else if (checked()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"size() === 'sm' ? 10 : 12\" [attr.height]=\"size() === 'sm' ? 10 : 12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>\n      }\n    </span>\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"flex flex-col gap-0.5 -mt-px\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-[var(--color-foreground)] leading-tight\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"text-[var(--color-destructive)]\">*</span>\n          }\n        </span>\n      }\n      @if (description()) {\n        <span class=\"text-xs text-[var(--color-muted-foreground)]\">{{ description() }}</span>\n      }\n    </span>\n  }\n</label>\n\n@if (hasError()) {\n  <p class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">{{ errorMessage() }}</p>\n}\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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 }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+
+/**
+ * Menú desplegable compositional, sin dependencias. Maneja abrir/cerrar,
+ * posición, click-afuera y navegación por teclado.
+ */
+class DropdownComponent {
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    el = inject((ElementRef));
+    items = contentChildren(DropdownItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    panelClasses = computed(() => {
+        const base = 'absolute z-50 min-w-48 rounded-[var(--radius)] border border-[var(--color-border)] bg-[var(--color-background)] p-1 shadow-md text-[var(--color-foreground)]';
+        const side = this.side() === 'top' ? 'bottom-full mb-1.5' : 'top-full mt-1.5';
+        const align = this.align() === 'end' ? 'right-0' : 'left-0';
+        return [base, side, align].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.open.update((o) => !o);
+        if (this.open())
+            this.focusItem(0);
+    }
+    close() {
+        this.open.set(false);
+    }
+    onDocClick(event) {
+        if (this.open() && !this.el.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onKeydown(event) {
+        if (!this.open())
+            return;
+        const enabled = this.items().filter((i) => !i.disabled());
+        if (!enabled.length)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const active = document.activeElement;
+            const idx = enabled.findIndex((i) => i.isActive(active));
+            const next = event.key === 'ArrowDown'
+                ? (idx + 1) % enabled.length
+                : (idx - 1 + enabled.length) % enabled.length;
+            enabled[next].focus();
+        }
+    }
+    /** Enfoca el ítem habilitado en la posición dada (tras render). */
+    focusItem(index) {
+        setTimeout(() => {
+            const enabled = this.items().filter((i) => !i.disabled());
+            enabled[index]?.focus();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DropdownComponent, isStandalone: true, selector: "ui-dropdown", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "keydown": "onKeydown($event)" }, classAttribute: "relative inline-block" }, queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[uiDropdownTrigger]\" />\n\n@if (open()) {\n  <div role=\"menu\" [class]=\"panelClasses()\">\n    <ng-content />\n  </div>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dropdown', host: { class: 'relative inline-block' }, template: "<ng-content select=\"[uiDropdownTrigger]\" />\n\n@if (open()) {\n  <div role=\"menu\" [class]=\"panelClasses()\">\n    <ng-content />\n  </div>\n}\n" }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownItemComponent), { isSignal: true }] }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+/** Marca el elemento disparador del dropdown. */
+class DropdownTriggerDirective {
+    dd = inject(DropdownComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: DropdownTriggerDirective, isStandalone: true, selector: "[uiDropdownTrigger]", host: { listeners: { "click": "dd.toggle()" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "dd.open()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiDropdownTrigger]',
+                    host: {
+                        '(click)': 'dd.toggle()',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'dd.open()',
+                    },
+                }]
+        }] });
+/** Ítem seleccionable del menú. */
+class DropdownItemComponent {
+    destructive = input(false, { ...(ngDevMode ? { debugName: "destructive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    select = output();
+    dd = inject(DropdownComponent);
+    el = inject((ElementRef));
+    hostClasses = computed(() => {
+        const base = 'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm cursor-pointer select-none outline-none transition-colors';
+        const tone = this.destructive()
+            ? 'text-[var(--color-destructive)] hover:bg-[var(--color-destructive)]/10 focus:bg-[var(--color-destructive)]/10'
+            : 'text-[var(--color-foreground)] hover:bg-[var(--color-accent)] focus:bg-[var(--color-accent)]';
+        const disabled = this.disabled() ? 'opacity-50 pointer-events-none' : '';
+        return [base, tone, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    isActive(node) {
+        return node === this.el.nativeElement;
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.select.emit();
+        this.dd.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: DropdownItemComponent, isStandalone: true, selector: "ui-dropdown-item", inputs: { destructive: { classPropertyName: "destructive", publicName: "destructive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-disabled": "disabled() || null", "class": "hostClasses()" } }, ngImport: i0, template: `
+    <span class="shrink-0 flex items-center [&:empty]:hidden"><ng-content select="[slot=icon]" /></span>
+    <span class="flex-1 text-left"><ng-content /></span>
+    <span class="shrink-0 text-xs text-[var(--color-muted-foreground)] [&:empty]:hidden"><ng-content select="[slot=shortcut]" /></span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-dropdown-item',
+                    template: `
+    <span class="shrink-0 flex items-center [&:empty]:hidden"><ng-content select="[slot=icon]" /></span>
+    <span class="flex-1 text-left"><ng-content /></span>
+    <span class="shrink-0 text-xs text-[var(--color-muted-foreground)] [&:empty]:hidden"><ng-content select="[slot=shortcut]" /></span>
+  `,
+                    host: {
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '(click)': 'onClick()',
+                        '[class]': 'hostClasses()',
+                    },
+                }]
+        }], propDecorators: { destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+/** Encabezado de sección. */
+class DropdownLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: DropdownLabelComponent, isStandalone: true, selector: "ui-dropdown-label", host: { classAttribute: "block px-2 py-1.5 text-[11px] font-semibold uppercase tracking-widest text-[var(--color-muted-foreground)]" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-dropdown-label',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'block px-2 py-1.5 text-[11px] font-semibold uppercase tracking-widest text-[var(--color-muted-foreground)]',
+                    },
+                }]
+        }] });
+/** Línea divisoria. */
+class DropdownSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: DropdownSeparatorComponent, isStandalone: true, selector: "ui-dropdown-separator", host: { classAttribute: "-mx-1 my-1 block h-px bg-[var(--color-border)]" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DropdownSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-dropdown-separator',
+                    template: '',
+                    host: { class: '-mx-1 my-1 block h-px bg-[var(--color-border)]' },
+                }]
+        }] });
+
+let nextId$4 = 0;
+/**
+ * Campo de texto. Funciona con:
+ *  - Signal Forms (Angular 22) vía `[formField]` — implementa el contrato
+ *    FormValueControl por duck typing (value = model + errors/disabled/... = input).
+ *  - ControlValueAccessor — ngModel, Reactive Forms, formControlName.
+ *  - Two-way simple `[(value)]`.
+ */
+class InputComponent {
+    /** Fuente única de verdad del valor (Signal Forms + two-way). */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    id = input(`ui-input-${nextId$4++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Muestra el botón de ojito para revelar/ocultar la contraseña (solo type="password"). */
+    passwordToggle = input(true, { ...(ngDevMode ? { debugName: "passwordToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mensaje de error manual (tiene prioridad sobre los errors de Signal Forms). */
+    error = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Estado de validación que cablea Signal Forms automáticamente. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** disabled puede venir del input o de CVA (setDisabledState). */
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Estado y tipo efectivo para el toggle de contraseña. */
+    showPassword = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+    hasPasswordToggle = computed(() => this.type() === 'password' && this.passwordToggle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPasswordToggle" }] : /* istanbul ignore next */ []));
+    resolvedType = computed(() => this.type() === 'password' && this.showPassword() ? 'text' : this.type(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => {
+        if (this.error())
+            return this.error();
+        // Los errores de validación (Signal Forms) solo se muestran tras interactuar.
+        if (this.touched()) {
+            const first = this.errors()[0];
+            if (first)
+                return first.message ?? first.kind ?? 'Campo inválido';
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.error() || !!this.errorMessage() || (this.invalid() && this.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    describedById = computed(() => this.hasError() || this.hint() ? `${this.id()}-desc` : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => {
+        // Radio ligado al tamaño: menos alto -> menos redondez (estilo shadcn).
+        const sizeMap = {
+            sm: 'h-8 px-2.5 gap-2 text-xs rounded-lg',
+            md: 'h-9 px-3 gap-2 text-sm rounded-[10px]',
+            lg: 'h-10 px-3.5 gap-2 text-base rounded-[10px]',
+        };
+        const base = 'flex items-center border bg-[var(--color-background)] transition-all';
+        const state = this.hasError()
+            ? 'border-[var(--color-destructive)] focus-within:ring-[3px] focus-within:ring-[var(--color-destructive)]/25'
+            : 'border-[var(--color-input)] focus-within:border-[var(--color-ring)] focus-within:ring-[3px] focus-within:ring-[var(--color-ring)]/40';
+        const disabled = this.isDisabled()
+            ? 'opacity-50 cursor-not-allowed bg-[var(--color-muted)]/40'
+            : '';
+        return [base, sizeMap[this.size()], state, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const next = event.target.value;
+        this.value.set(next);
+        this.onChange(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: InputComponent, isStandalone: true, selector: "ui-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputComponent), multi: true },
+        ], ngImport: i0, template: "@if (label()) {\n  <label\n    [for]=\"id()\"\n    class=\"block mb-1.5 text-sm font-medium text-[var(--color-foreground)]\"\n  >\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-[var(--color-destructive)]\">*</span>\n    }\n  </label>\n}\n\n<div [class]=\"wrapperClasses()\">\n  <span class=\"shrink-0 flex items-center text-[var(--color-muted-foreground)]\">\n    <ng-content select=\"[slot=prefix]\" />\n  </span>\n\n  <input\n    [id]=\"id()\"\n    [type]=\"resolvedType()\"\n    [name]=\"name()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedById()\"\n    class=\"w-full min-w-0 bg-transparent border-0 p-0 outline-none text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed\"\n  />\n\n  <span class=\"shrink-0 flex items-center text-[var(--color-muted-foreground)]\">\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n\n  @if (hasPasswordToggle()) {\n    <button\n      type=\"button\"\n      (click)=\"showPassword.set(!showPassword())\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      class=\"shrink-0 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors cursor-pointer\"\n    >\n      @if (showPassword()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\" /><path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\" /><path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\" /><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" /></svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" /><circle cx=\"12\" cy=\"12\" r=\"3\" /></svg>\n      }\n    </button>\n  }\n</div>\n\n@if (hasError()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">\n    {{ errorMessage() }}\n  </p>\n} @else if (hint()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-muted-foreground)]\">\n    {{ hint() }}\n  </p>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-input', host: { class: 'block' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputComponent), multi: true },
+                    ], template: "@if (label()) {\n  <label\n    [for]=\"id()\"\n    class=\"block mb-1.5 text-sm font-medium text-[var(--color-foreground)]\"\n  >\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-[var(--color-destructive)]\">*</span>\n    }\n  </label>\n}\n\n<div [class]=\"wrapperClasses()\">\n  <span class=\"shrink-0 flex items-center text-[var(--color-muted-foreground)]\">\n    <ng-content select=\"[slot=prefix]\" />\n  </span>\n\n  <input\n    [id]=\"id()\"\n    [type]=\"resolvedType()\"\n    [name]=\"name()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedById()\"\n    class=\"w-full min-w-0 bg-transparent border-0 p-0 outline-none text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed\"\n  />\n\n  <span class=\"shrink-0 flex items-center text-[var(--color-muted-foreground)]\">\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n\n  @if (hasPasswordToggle()) {\n    <button\n      type=\"button\"\n      (click)=\"showPassword.set(!showPassword())\"\n      [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      class=\"shrink-0 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors cursor-pointer\"\n    >\n      @if (showPassword()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\" /><path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\" /><path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\" /><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" /></svg>\n      } @else {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" /><circle cx=\"12\" cy=\"12\" r=\"3\" /></svg>\n      }\n    </button>\n  }\n</div>\n\n@if (hasError()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">\n    {{ errorMessage() }}\n  </p>\n} @else if (hint()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-muted-foreground)]\">\n    {{ hint() }}\n  </p>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+
+/** Indicador giratorio. Hereda el color (currentColor). */
+class SpinnerComponent {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    px = computed(() => ({ sm: 16, md: 24, lg: 36 })[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "px" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: SpinnerComponent, isStandalone: true, selector: "ui-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex" }, ngImport: i0, template: `
+    <svg
+      [attr.width]="px()"
+      [attr.height]="px()"
+      class="animate-spin"
+      viewBox="0 0 24 24"
+      fill="none"
+      [attr.aria-label]="'Cargando'"
+      role="status"
+    >
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-90" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.37 0 0 5.37 0 12h4z"></path>
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-spinner',
+                    template: `
+    <svg
+      [attr.width]="px()"
+      [attr.height]="px()"
+      class="animate-spin"
+      viewBox="0 0 24 24"
+      fill="none"
+      [attr.aria-label]="'Cargando'"
+      role="status"
+    >
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-90" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.37 0 0 5.37 0 12h4z"></path>
+    </svg>
+  `,
+                    host: { class: 'inline-flex' },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/** Placeholder con pulso mientras carga el contenido real. */
+class SkeletonComponent {
+    width = input('100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input('1rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    circle = input(false, { ...(ngDevMode ? { debugName: "circle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rounded-full": "circle()", "class.rounded-md": "!circle()", "style.width": "width()", "style.height": "height()" }, classAttribute: "block animate-pulse bg-[var(--color-muted)]" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-skeleton',
+                    template: '',
+                    host: {
+                        class: 'block animate-pulse bg-[var(--color-muted)]',
+                        '[class.rounded-full]': 'circle()',
+                        '[class.rounded-md]': '!circle()',
+                        '[style.width]': 'width()',
+                        '[style.height]': 'height()',
+                    },
+                }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }] } });
+/** Barra de progreso (determinada con value 0-100, o indeterminada). */
+class ProgressComponent {
+    value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    clamped = computed(() => Math.max(0, Math.min(100, this.value())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: ProgressComponent, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class.h-1": "size() === 'sm'", "class.h-2": "size() === 'md'", "class.h-3": "size() === 'lg'", "attr.aria-valuenow": "indeterminate() ? null : clamped()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100" }, classAttribute: "block w-full overflow-hidden rounded-full bg-[var(--color-muted)]" }, ngImport: i0, template: `
+    <div
+      class="h-full rounded-full bg-[var(--color-primary)] transition-[width] duration-300"
+      [class.animate-progress-indeterminate]="indeterminate()"
+      [class.w-2/5]="indeterminate()"
+      [style.width.%]="indeterminate() ? null : clamped()"
+    ></div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-progress',
+                    template: `
+    <div
+      class="h-full rounded-full bg-[var(--color-primary)] transition-[width] duration-300"
+      [class.animate-progress-indeterminate]="indeterminate()"
+      [class.w-2/5]="indeterminate()"
+      [style.width.%]="indeterminate() ? null : clamped()"
+    ></div>
+  `,
+                    host: {
+                        role: 'progressbar',
+                        class: 'block w-full overflow-hidden rounded-full bg-[var(--color-muted)]',
+                        '[class.h-1]': "size() === 'sm'",
+                        '[class.h-2]': "size() === 'md'",
+                        '[class.h-3]': "size() === 'lg'",
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : clamped()',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+
+let nextId$3 = 0;
+/**
+ * Select compositional, sin dependencias. Combina el overlay del Dropdown con
+ * la integración de formularios del Input: Signal Forms (`[formField]`),
+ * ControlValueAccessor (ngModel/Reactive) y two-way `[(value)]`.
+ */
+class SelectComponent {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Selecciona…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    id = input(`ui-select-${nextId$3++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    el = inject((ElementRef));
+    options = contentChildren(OptionComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => {
+        if (this.error())
+            return this.error();
+        if (this.touched()) {
+            const first = this.errors()[0];
+            if (first)
+                return first.message ?? first.kind ?? 'Campo inválido';
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.error() || !!this.errorMessage() || (this.invalid() && this.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const v = this.value();
+        const opt = this.options().find((o) => o.value() === v);
+        return opt ? opt.getLabel() : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => {
+        const sizeMap = {
+            sm: 'h-8 px-2.5 text-xs rounded-lg',
+            md: 'h-9 px-3 text-sm rounded-[10px]',
+            lg: 'h-10 px-3.5 text-base rounded-[10px]',
+        };
+        const base = 'flex w-full items-center justify-between gap-2 border bg-[var(--color-background)] transition-all outline-none cursor-pointer text-left';
+        const state = this.hasError()
+            ? 'border-[var(--color-destructive)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-destructive)]/25'
+            : 'border-[var(--color-input)] focus-visible:border-[var(--color-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-ring)]/40';
+        const disabled = this.isDisabled()
+            ? 'opacity-50 cursor-not-allowed bg-[var(--color-muted)]/40'
+            : '';
+        return [base, sizeMap[this.size()], state, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    describedById = computed(() => this.hasError() || this.hint() ? `${this.id()}-desc` : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open.update((o) => !o);
+        if (this.open())
+            this.focusActive();
+    }
+    close() {
+        this.open.set(false);
+    }
+    /** Llamado por una ui-option al elegirse. */
+    choose(v) {
+        this.value.set(v);
+        this.onChange(v);
+        this.onTouched();
+        this.close();
+        const trigger = this.el.nativeElement.querySelector('[data-trigger]');
+        trigger?.focus();
+    }
+    onDocClick(event) {
+        if (this.open() && !this.el.nativeElement.contains(event.target))
+            this.close();
+    }
+    onKeydown(event) {
+        const enabled = this.options().filter((o) => !o.disabled());
+        if (!this.open()) {
+            if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.toggle();
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!enabled.length)
+                return;
+            const active = document.activeElement;
+            const idx = enabled.findIndex((o) => o.isActive(active));
+            const next = event.key === 'ArrowDown'
+                ? (idx + 1) % enabled.length
+                : (idx - 1 + enabled.length) % enabled.length;
+            enabled[next].focus();
+        }
+    }
+    focusActive() {
+        setTimeout(() => {
+            const opts = this.options().filter((o) => !o.disabled());
+            const sel = opts.find((o) => o.value() === this.value());
+            (sel ?? opts[0])?.focus();
+        });
+    }
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocClick($event)", "keydown": "onKeydown($event)" }, classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true },
+        ], queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label\n    [for]=\"id()\"\n    class=\"block mb-1.5 text-sm font-medium text-[var(--color-foreground)]\"\n  >\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-[var(--color-destructive)]\">*</span>\n    }\n  </label>\n}\n\n<div class=\"relative\">\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    data-trigger\n    [class]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedById()\"\n    (click)=\"toggle()\"\n  >\n    <span [class]=\"selectedLabel() ? 'text-[var(--color-foreground)]' : 'text-[var(--color-muted-foreground)]'\" class=\"truncate\">\n      {{ selectedLabel() || placeholder() }}\n    </span>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"shrink-0 text-[var(--color-muted-foreground)] transition-transform\"\n      [class.rotate-180]=\"open()\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <div\n    role=\"listbox\"\n    class=\"absolute z-50 left-0 right-0 mt-1.5 max-h-60 overflow-y-auto rounded-[var(--radius)] border border-[var(--color-border)] bg-[var(--color-background)] p-1 shadow-md\"\n    [class.hidden]=\"!open()\"\n  >\n    <ng-content />\n  </div>\n</div>\n\n@if (hasError()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">{{ errorMessage() }}</p>\n} @else if (hint()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-muted-foreground)]\">{{ hint() }}</p>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-select', host: { class: 'block' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true },
+                    ], template: "@if (label()) {\n  <label\n    [for]=\"id()\"\n    class=\"block mb-1.5 text-sm font-medium text-[var(--color-foreground)]\"\n  >\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-[var(--color-destructive)]\">*</span>\n    }\n  </label>\n}\n\n<div class=\"relative\">\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    data-trigger\n    [class]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"describedById()\"\n    (click)=\"toggle()\"\n  >\n    <span [class]=\"selectedLabel() ? 'text-[var(--color-foreground)]' : 'text-[var(--color-muted-foreground)]'\" class=\"truncate\">\n      {{ selectedLabel() || placeholder() }}\n    </span>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"shrink-0 text-[var(--color-muted-foreground)] transition-transform\"\n      [class.rotate-180]=\"open()\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <div\n    role=\"listbox\"\n    class=\"absolute z-50 left-0 right-0 mt-1.5 max-h-60 overflow-y-auto rounded-[var(--radius)] border border-[var(--color-border)] bg-[var(--color-background)] p-1 shadow-md\"\n    [class.hidden]=\"!open()\"\n  >\n    <ng-content />\n  </div>\n</div>\n\n@if (hasError()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">{{ errorMessage() }}</p>\n} @else if (hint()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-muted-foreground)]\">{{ hint() }}</p>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+/** Opción dentro de ui-select. */
+class OptionComponent {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    select = inject(SelectComponent);
+    el = inject((ElementRef));
+    selected = computed(() => this.select.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const base = 'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm cursor-pointer select-none outline-none transition-colors text-[var(--color-foreground)]';
+        const state = this.disabled()
+            ? 'opacity-50 pointer-events-none'
+            : 'hover:bg-[var(--color-accent)] focus:bg-[var(--color-accent)]';
+        return [base, state].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    getLabel() {
+        return this.el.nativeElement.textContent?.trim() ?? '';
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    isActive(node) {
+        return node === this.el.nativeElement;
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.select.choose(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OptionComponent, isStandalone: true, selector: "ui-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() || null", "class": "hostClasses()" } }, ngImport: i0, template: `
+    <span class="flex-1"><ng-content /></span>
+    @if (selected()) {
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--color-primary)]"><polyline points="20 6 9 17 4 12" /></svg>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-option',
+                    template: `
+    <span class="flex-1"><ng-content /></span>
+    @if (selected()) {
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--color-primary)]"><polyline points="20 6 9 17 4 12" /></svg>
+    }
+  `,
+                    host: {
+                        role: 'option',
+                        tabindex: '-1',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '(click)': 'onClick()',
+                        '[class]': 'hostClasses()',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/** Token de elipsis en la lista de páginas. */
+const GAP$1 = '…';
+/**
+ * Paginación. Two-way `[(page)]` (1-based). Modo 'numbers' (con elipsis) o
+ * 'compact' ('Página X de Y'). Selector opcional de items por página.
+ */
+class PaginationComponent {
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    totalPages = input(1, { ...(ngDevMode ? { debugName: "totalPages" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    variant = input('numbers', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Si se pasan opciones, se muestra el selector de items por página. */
+    pageSize = model(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    gap = GAP$1;
+    canPrev = computed(() => this.page() > 1 && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []));
+    canNext = computed(() => this.page() < this.totalPages() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+    /** Lista de páginas visibles con elipsis: 1 … 4 5 6 … 20 */
+    pages = computed(() => {
+        const total = this.totalPages();
+        const current = this.page();
+        if (total <= 7)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const result = [1];
+        const start = Math.max(2, current - 1);
+        const end = Math.min(total - 1, current + 1);
+        if (start > 2)
+            result.push(GAP$1);
+        for (let i = start; i <= end; i++)
+            result.push(i);
+        if (end < total - 1)
+            result.push(GAP$1);
+        result.push(total);
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    btnSize = computed(() => (this.size() === 'sm' ? 'size-8 text-xs' : 'size-9 text-sm'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "btnSize" }] : /* istanbul ignore next */ []));
+    // pageSize como string para el ui-select (que usa value:string)
+    pageSizeStr = computed(() => String(this.pageSize()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeStr" }] : /* istanbul ignore next */ []));
+    go(p) {
+        if (p < 1 || p > this.totalPages() || p === this.page() || this.disabled())
+            return;
+        this.page.set(p);
+    }
+    prev() {
+        if (this.canPrev())
+            this.page.set(this.page() - 1);
+    }
+    next() {
+        if (this.canNext())
+            this.page.set(this.page() + 1);
+    }
+    onPageSize(v) {
+        this.pageSize.set(Number(v));
+        this.page.set(1);
+    }
+    isGap(p) {
+        return p === GAP$1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PaginationComponent, isStandalone: true, selector: "ui-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation", "aria-label": "Paginaci\u00F3n" }, classAttribute: "flex items-center gap-3 flex-wrap" }, ngImport: i0, template: "@let baseBtn =\n  'inline-flex items-center justify-center rounded-lg border border-[var(--color-border)] text-[var(--color-foreground)] transition-colors disabled:opacity-40 disabled:pointer-events-none cursor-pointer hover:bg-[var(--color-accent)]';\n\n<div class=\"flex items-center gap-1\">\n  <!-- Prev -->\n  <button\n    type=\"button\"\n    [class]=\"baseBtn + ' ' + btnSize()\"\n    [disabled]=\"!canPrev()\"\n    (click)=\"prev()\"\n    aria-label=\"P\u00E1gina anterior\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\" /></svg>\n  </button>\n\n  @if (variant() === 'compact') {\n    <span class=\"px-3 text-sm text-[var(--color-muted-foreground)]\">\n      P\u00E1gina <span class=\"font-medium text-[var(--color-foreground)]\">{{ page() }}</span> de {{ totalPages() }}\n    </span>\n  } @else {\n    @for (p of pages(); track $index) {\n      @if (isGap(p)) {\n        <span class=\"inline-flex items-center justify-center text-[var(--color-muted-foreground)]\" [class]=\"btnSize()\">{{ gap }}</span>\n      } @else {\n        <button\n          type=\"button\"\n          (click)=\"go(p)\"\n          [attr.aria-current]=\"p === page() ? 'page' : null\"\n          [class]=\"btnSize()\"\n          class=\"inline-flex items-center justify-center rounded-lg border transition-colors cursor-pointer font-medium\"\n          [class.bg-[var(--color-primary)]]=\"p === page()\"\n          [class.text-[var(--color-primary-foreground)]]=\"p === page()\"\n          [class.border-[var(--color-primary)]]=\"p === page()\"\n          [class.border-[var(--color-border)]]=\"p !== page()\"\n          [class.text-[var(--color-foreground)]]=\"p !== page()\"\n          [class.hover:bg-[var(--color-accent)]]=\"p !== page()\"\n        >\n          {{ p }}\n        </button>\n      }\n    }\n  }\n\n  <!-- Next -->\n  <button\n    type=\"button\"\n    [class]=\"baseBtn + ' ' + btnSize()\"\n    [disabled]=\"!canNext()\"\n    (click)=\"next()\"\n    aria-label=\"P\u00E1gina siguiente\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\" /></svg>\n  </button>\n</div>\n\n@if (pageSizeOptions().length) {\n  <div class=\"flex items-center gap-2 text-sm text-[var(--color-muted-foreground)]\">\n    <span>Por p\u00E1gina:</span>\n    <div class=\"w-20\">\n      <ui-select [value]=\"pageSizeStr()\" (valueChange)=\"onPageSize($event)\" size=\"sm\">\n        @for (opt of pageSizeOptions(); track opt) {\n          <ui-option [value]=\"opt.toString()\">{{ opt }}</ui-option>\n        }\n      </ui-select>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: SelectComponent, selector: "ui-select", inputs: ["value", "placeholder", "label", "hint", "error", "size", "id", "disabled", "required", "invalid", "touched", "errors"], outputs: ["valueChange"] }, { kind: "component", type: OptionComponent, selector: "ui-option", inputs: ["value", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-pagination', imports: [SelectComponent, OptionComponent], host: { role: 'navigation', 'aria-label': 'Paginación', class: 'flex items-center gap-3 flex-wrap' }, template: "@let baseBtn =\n  'inline-flex items-center justify-center rounded-lg border border-[var(--color-border)] text-[var(--color-foreground)] transition-colors disabled:opacity-40 disabled:pointer-events-none cursor-pointer hover:bg-[var(--color-accent)]';\n\n<div class=\"flex items-center gap-1\">\n  <!-- Prev -->\n  <button\n    type=\"button\"\n    [class]=\"baseBtn + ' ' + btnSize()\"\n    [disabled]=\"!canPrev()\"\n    (click)=\"prev()\"\n    aria-label=\"P\u00E1gina anterior\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\" /></svg>\n  </button>\n\n  @if (variant() === 'compact') {\n    <span class=\"px-3 text-sm text-[var(--color-muted-foreground)]\">\n      P\u00E1gina <span class=\"font-medium text-[var(--color-foreground)]\">{{ page() }}</span> de {{ totalPages() }}\n    </span>\n  } @else {\n    @for (p of pages(); track $index) {\n      @if (isGap(p)) {\n        <span class=\"inline-flex items-center justify-center text-[var(--color-muted-foreground)]\" [class]=\"btnSize()\">{{ gap }}</span>\n      } @else {\n        <button\n          type=\"button\"\n          (click)=\"go(p)\"\n          [attr.aria-current]=\"p === page() ? 'page' : null\"\n          [class]=\"btnSize()\"\n          class=\"inline-flex items-center justify-center rounded-lg border transition-colors cursor-pointer font-medium\"\n          [class.bg-[var(--color-primary)]]=\"p === page()\"\n          [class.text-[var(--color-primary-foreground)]]=\"p === page()\"\n          [class.border-[var(--color-primary)]]=\"p === page()\"\n          [class.border-[var(--color-border)]]=\"p !== page()\"\n          [class.text-[var(--color-foreground)]]=\"p !== page()\"\n          [class.hover:bg-[var(--color-accent)]]=\"p !== page()\"\n        >\n          {{ p }}\n        </button>\n      }\n    }\n  }\n\n  <!-- Next -->\n  <button\n    type=\"button\"\n    [class]=\"baseBtn + ' ' + btnSize()\"\n    [disabled]=\"!canNext()\"\n    (click)=\"next()\"\n    aria-label=\"P\u00E1gina siguiente\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\" /></svg>\n  </button>\n</div>\n\n@if (pageSizeOptions().length) {\n  <div class=\"flex items-center gap-2 text-sm text-[var(--color-muted-foreground)]\">\n    <span>Por p\u00E1gina:</span>\n    <div class=\"w-20\">\n      <ui-select [value]=\"pageSizeStr()\" (valueChange)=\"onPageSize($event)\" size=\"sm\">\n        @for (opt of pageSizeOptions(); track opt) {\n          <ui-option [value]=\"opt.toString()\">{{ opt }}</ui-option>\n        }\n      </ui-select>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+let nextId$2 = 0;
+/**
+ * Grupo de selección única. El valor vive aquí. Funciona con Signal Forms
+ * (`[formField]`, FormValueControl), ControlValueAccessor y two-way `[(value)]`.
+ * Los ui-radio hijos lo inyectan por DI.
+ */
+class RadioGroupComponent {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    appearance = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    name = input(`ui-radio-group-${nextId$2++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => {
+        if (this.touched()) {
+            const first = this.errors()[0];
+            if (first)
+                return first.message ?? first.kind ?? 'Campo inválido';
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMessage() || (this.invalid() && this.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const dir = this.orientation() === 'horizontal' ? 'flex flex-row flex-wrap gap-3' : 'flex flex-col gap-3';
+        return dir;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    /** Llamado por un ui-radio hijo al seleccionarse. */
+    select(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: RadioGroupComponent, isStandalone: true, selector: "ui-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class": "hostClasses()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-radio-group',
+                    template: `<ng-content />`,
+                    host: { role: 'radiogroup', '[class]': 'hostClasses()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true },
+                    ],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+/** Una opción dentro de ui-radio-group. */
+class RadioComponent {
+    group = inject(RadioGroupComponent);
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    id = `ui-radio-${nextId$2++}`;
+    checked = computed(() => this.group.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.group.isDisabled() || this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    circleClasses = computed(() => {
+        const sizeMap = { sm: 'size-4', md: 'size-5' };
+        const base = 'shrink-0 flex items-center justify-center rounded-full border transition-all peer-focus-visible:ring-[3px] peer-focus-visible:ring-[var(--color-ring)]/40';
+        const state = this.checked()
+            ? 'border-[var(--color-primary)]'
+            : this.group.hasError()
+                ? 'border-[var(--color-destructive)]'
+                : 'border-[var(--color-input)]';
+        const disabled = this.isDisabled() ? 'opacity-50' : '';
+        return [base, sizeMap[this.group.size()], state, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circleClasses" }] : /* istanbul ignore next */ []));
+    dotClasses = computed(() => {
+        const sizeMap = { sm: 'size-1.5', md: 'size-2' };
+        return `rounded-full bg-[var(--color-primary)] ${sizeMap[this.group.size()]}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotClasses" }] : /* istanbul ignore next */ []));
+    cardClasses = computed(() => {
+        const base = 'rounded-[var(--radius)] border p-4 transition-all';
+        const state = this.checked()
+            ? 'border-[var(--color-primary)] ring-1 ring-[var(--color-primary)] bg-[var(--color-primary)]/5'
+            : 'border-[var(--color-border)] hover:border-[var(--color-muted-foreground)]/40';
+        const disabled = this.isDisabled() ? 'opacity-50' : '';
+        return [base, state, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardClasses" }] : /* istanbul ignore next */ []));
+    onSelect() {
+        if (!this.isDisabled())
+            this.group.select(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: RadioComponent, isStandalone: true, selector: "ui-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "@let card = group.appearance() === 'card';\n\n<label\n  [for]=\"id\"\n  [class]=\"card ? cardClasses() : ''\"\n  class=\"flex items-start gap-2.5\"\n  [class.cursor-pointer]=\"!isDisabled()\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n>\n  <span class=\"relative inline-flex items-center\">\n    <input\n      type=\"radio\"\n      [id]=\"id\"\n      [name]=\"group.name()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      (change)=\"onSelect()\"\n      class=\"peer absolute inset-0 size-full opacity-0 m-0 cursor-pointer disabled:cursor-not-allowed\"\n    />\n    <span [class]=\"circleClasses()\">\n      @if (checked()) {\n        <span [class]=\"dotClasses()\"></span>\n      }\n    </span>\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"flex flex-col gap-0.5 -mt-px\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-[var(--color-foreground)] leading-tight\">\n          {{ label() }}\n        </span>\n      }\n      @if (description()) {\n        <span class=\"text-xs text-[var(--color-muted-foreground)]\">{{ description() }}</span>\n      }\n    </span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-radio', host: { class: 'block' }, template: "@let card = group.appearance() === 'card';\n\n<label\n  [for]=\"id\"\n  [class]=\"card ? cardClasses() : ''\"\n  class=\"flex items-start gap-2.5\"\n  [class.cursor-pointer]=\"!isDisabled()\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n>\n  <span class=\"relative inline-flex items-center\">\n    <input\n      type=\"radio\"\n      [id]=\"id\"\n      [name]=\"group.name()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      (change)=\"onSelect()\"\n      class=\"peer absolute inset-0 size-full opacity-0 m-0 cursor-pointer disabled:cursor-not-allowed\"\n    />\n    <span [class]=\"circleClasses()\">\n      @if (checked()) {\n        <span [class]=\"dotClasses()\"></span>\n      }\n    </span>\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"flex flex-col gap-0.5 -mt-px\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-[var(--color-foreground)] leading-tight\">\n          {{ label() }}\n        </span>\n      }\n      @if (description()) {\n        <span class=\"text-xs text-[var(--color-muted-foreground)]\">{{ description() }}</span>\n      }\n    </span>\n  }\n</label>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/** Resuelve un path anidado: getByPath(row, 'direccion.ciudad'). */
+function getByPath(obj, path) {
+    if (!obj || !path)
+        return undefined;
+    return path.split('.').reduce((acc, key) => {
+        return acc && typeof acc === 'object' ? acc[key] : undefined;
+    }, obj);
+}
+
+/** Marca un template de celda para un field: <ng-template tableCell="estado">. */
+class TableCellDirective {
+    field = input.required({ ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), alias: 'tableCell' });
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: TableCellDirective, isStandalone: true, selector: "[tableCell]", inputs: { field: { classPropertyName: "field", publicName: "tableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TableCellDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tableCell]' }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCell", required: true }] }] } });
+/**
+ * Tabla data-driven. Pinta `columns` automáticamente (incluido anidado);
+ * para render custom, declara <ng-template tableCell="<field>"> y se usa solo
+ * en esa columna. Soporta sorting, selección, loading y estado vacío.
+ */
+class TableComponent {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    rowKey = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    emptyMessage = input('No hay resultados', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    sortChange = output();
+    selectionChange = output();
+    cellTemplates = contentChildren(TableCellDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    sort = signal({ field: '', direction: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    selectedKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    // Filas de skeleton para el estado de carga.
+    skeletonRows = [0, 1, 2, 3, 4];
+    templateFor(field) {
+        if (!field)
+            return null;
+        return this.cellTemplates().find((t) => t.field() === field)?.template ?? null;
+    }
+    value(row, field) {
+        return getByPath(row, field);
+    }
+    rows = computed(() => {
+        const list = [...this.data()];
+        const { field, direction } = this.sort();
+        if (!field || !direction)
+            return list;
+        return list.sort((a, b) => {
+            const av = getByPath(a, field);
+            const bv = getByPath(b, field);
+            if (av == null)
+                return 1;
+            if (bv == null)
+                return -1;
+            const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+            return direction === 'asc' ? cmp : -cmp;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    align(a) {
+        return a === 'right' ? 'text-right' : a === 'center' ? 'text-center' : 'text-left';
+    }
+    // --- Sorting ---
+    toggleSort(col) {
+        if (!col.sortable || !col.field)
+            return;
+        const cur = this.sort();
+        let direction;
+        if (cur.field !== col.field)
+            direction = 'asc';
+        else
+            direction = cur.direction === 'asc' ? 'desc' : cur.direction === 'desc' ? null : 'asc';
+        const next = { field: direction ? col.field : '', direction };
+        this.sort.set(next);
+        this.sortChange.emit(next);
+    }
+    sortDir(col) {
+        return this.sort().field === col.field ? this.sort().direction : null;
+    }
+    // --- Selección ---
+    keyOf(row) {
+        const k = this.rowKey();
+        return k ? getByPath(row, k) : row;
+    }
+    isSelected(row) {
+        return this.selectedKeys().has(this.keyOf(row));
+    }
+    toggleRow(row) {
+        const key = this.keyOf(row);
+        this.selectedKeys.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+        this.emitSelection();
+    }
+    allSelected = computed(() => {
+        const rows = this.rows();
+        return rows.length > 0 && rows.every((r) => this.selectedKeys().has(this.keyOf(r)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => {
+        const rows = this.rows();
+        const sel = rows.filter((r) => this.selectedKeys().has(this.keyOf(r))).length;
+        return sel > 0 && sel < rows.length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    toggleAll() {
+        const rows = this.rows();
+        this.selectedKeys.update((set) => {
+            const next = new Set(set);
+            if (rows.every((r) => next.has(this.keyOf(r)))) {
+                rows.forEach((r) => next.delete(this.keyOf(r)));
+            }
+            else {
+                rows.forEach((r) => next.add(this.keyOf(r)));
+            }
+            return next;
+        });
+        this.emitSelection();
+    }
+    emitSelection() {
+        const sel = this.data().filter((r) => this.selectedKeys().has(this.keyOf(r)));
+        this.selectionChange.emit(sel);
+    }
+    trackRow = (index, row) => (this.rowKey() ? this.keyOf(row) : index);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TableComponent, isStandalone: true, selector: "ui-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "cellTemplates", predicate: TableCellDirective, isSignal: true }], ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-[var(--radius)] border border-[var(--color-border)]\">\n  <table class=\"w-full text-left text-sm\">\n    <thead class=\"bg-[var(--color-muted)] text-[var(--color-muted-foreground)]\">\n      <tr>\n        @if (selectable()) {\n          <th class=\"w-10 px-4 py-2.5\">\n            <ui-checkbox\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of columns(); track col.header) {\n          <th\n            class=\"px-4 py-2.5 font-medium whitespace-nowrap\"\n            [class]=\"align(col.align)\"\n            [style.width]=\"col.width\"\n          >\n            @if (col.sortable && col.field) {\n              <button\n                type=\"button\"\n                (click)=\"toggleSort(col)\"\n                class=\"inline-flex items-center gap-1 hover:text-[var(--color-foreground)] transition-colors cursor-pointer\"\n              >\n                {{ col.header }}\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                  class=\"transition-opacity\"\n                  [class.opacity-30]=\"sortDir(col) === null\"\n                >\n                  @if (sortDir(col) === 'desc') {\n                    <path d=\"m6 9 6 6 6-6\" />\n                  } @else {\n                    <path d=\"m18 15-6-6-6 6\" />\n                  }\n                </svg>\n              </button>\n            } @else {\n              {{ col.header }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody class=\"text-[var(--color-foreground)]\">\n      @if (loading()) {\n        @for (s of skeletonRows; track s) {\n          <tr class=\"border-t border-[var(--color-border)]\">\n            @if (selectable()) {\n              <td class=\"px-4 py-3\"><ui-skeleton width=\"1rem\" height=\"1rem\" /></td>\n            }\n            @for (col of columns(); track col.header) {\n              <td class=\"px-4 py-3\"><ui-skeleton width=\"70%\" /></td>\n            }\n          </tr>\n        }\n      } @else if (rows().length === 0) {\n        <tr>\n          <td\n            [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\n            class=\"px-4 py-10 text-center text-[var(--color-muted-foreground)]\"\n          >\n            {{ emptyMessage() }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track trackRow($index, row)) {\n          <tr class=\"border-t border-[var(--color-border)] hover:bg-[var(--color-muted)]/40 transition-colors\">\n            @if (selectable()) {\n              <td class=\"px-4 py-3\">\n                <ui-checkbox [checked]=\"isSelected(row)\" (checkedChange)=\"toggleRow(row)\" />\n              </td>\n            }\n            @for (col of columns(); track col.header) {\n              <td class=\"px-4 py-3 align-middle\" [class]=\"align(col.align)\">\n                @if (templateFor(col.field); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(row, col.field), row, index: $index }\"\n                  />\n                } @else {\n                  {{ value(row, col.field) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["checked", "label", "description", "size", "id", "name", "disabled", "required", "indeterminate", "invalid", "touched", "errors"], outputs: ["checkedChange"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["width", "height", "circle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-table', imports: [NgTemplateOutlet, CheckboxComponent, SkeletonComponent], template: "<div class=\"w-full overflow-x-auto rounded-[var(--radius)] border border-[var(--color-border)]\">\n  <table class=\"w-full text-left text-sm\">\n    <thead class=\"bg-[var(--color-muted)] text-[var(--color-muted-foreground)]\">\n      <tr>\n        @if (selectable()) {\n          <th class=\"w-10 px-4 py-2.5\">\n            <ui-checkbox\n              [checked]=\"allSelected()\"\n              [indeterminate]=\"someSelected()\"\n              (checkedChange)=\"toggleAll()\"\n            />\n          </th>\n        }\n        @for (col of columns(); track col.header) {\n          <th\n            class=\"px-4 py-2.5 font-medium whitespace-nowrap\"\n            [class]=\"align(col.align)\"\n            [style.width]=\"col.width\"\n          >\n            @if (col.sortable && col.field) {\n              <button\n                type=\"button\"\n                (click)=\"toggleSort(col)\"\n                class=\"inline-flex items-center gap-1 hover:text-[var(--color-foreground)] transition-colors cursor-pointer\"\n              >\n                {{ col.header }}\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                  class=\"transition-opacity\"\n                  [class.opacity-30]=\"sortDir(col) === null\"\n                >\n                  @if (sortDir(col) === 'desc') {\n                    <path d=\"m6 9 6 6 6-6\" />\n                  } @else {\n                    <path d=\"m18 15-6-6-6 6\" />\n                  }\n                </svg>\n              </button>\n            } @else {\n              {{ col.header }}\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n\n    <tbody class=\"text-[var(--color-foreground)]\">\n      @if (loading()) {\n        @for (s of skeletonRows; track s) {\n          <tr class=\"border-t border-[var(--color-border)]\">\n            @if (selectable()) {\n              <td class=\"px-4 py-3\"><ui-skeleton width=\"1rem\" height=\"1rem\" /></td>\n            }\n            @for (col of columns(); track col.header) {\n              <td class=\"px-4 py-3\"><ui-skeleton width=\"70%\" /></td>\n            }\n          </tr>\n        }\n      } @else if (rows().length === 0) {\n        <tr>\n          <td\n            [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\n            class=\"px-4 py-10 text-center text-[var(--color-muted-foreground)]\"\n          >\n            {{ emptyMessage() }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track trackRow($index, row)) {\n          <tr class=\"border-t border-[var(--color-border)] hover:bg-[var(--color-muted)]/40 transition-colors\">\n            @if (selectable()) {\n              <td class=\"px-4 py-3\">\n                <ui-checkbox [checked]=\"isSelected(row)\" (checkedChange)=\"toggleRow(row)\" />\n              </td>\n            }\n            @for (col of columns(); track col.header) {\n              <td class=\"px-4 py-3 align-middle\" [class]=\"align(col.align)\">\n                @if (templateFor(col.field); as tpl) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"tpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: value(row, col.field), row, index: $index }\"\n                  />\n                } @else {\n                  {{ value(row, col.field) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableCellDirective), { isSignal: true }] }] } });
+
+/**
+ * Pestañas compositional. ui-tabs guarda la pestaña activa y arma la barra a
+ * partir de los ui-tab hijos; cada ui-tab proyecta su panel (visible si activo).
+ */
+class TabsComponent {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    variant = input('underline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tabs = contentChildren(TabComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Selecciona la primera pestaña si no hay valor.
+        effect(() => {
+            const list = this.tabs();
+            if (!this.value() && list.length)
+                this.value.set(list[0].value());
+        });
+    }
+    listClasses = computed(() => {
+        if (this.variant() === 'pills') {
+            return 'inline-flex items-center gap-1 rounded-[var(--radius)] bg-[var(--color-muted)] p-1';
+        }
+        return 'flex items-center gap-1 border-b border-[var(--color-border)]';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    select(v) {
+        this.value.set(v);
+    }
+    tabClasses(tab) {
+        const active = this.value() === tab.value();
+        const sizePad = this.size() === 'sm' ? 'h-8 px-2.5 text-xs gap-1.5' : 'h-9 px-3 text-sm gap-2';
+        const base = 'inline-flex items-center font-medium transition-colors outline-none cursor-pointer disabled:opacity-50 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--color-background)]';
+        if (this.variant() === 'pills') {
+            const state = active
+                ? 'bg-[var(--color-background)] text-[var(--color-foreground)] shadow-sm'
+                : 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]';
+            return [base, sizePad, 'rounded-[calc(var(--radius)-0.25rem)]', state].join(' ');
+        }
+        // underline
+        const state = active
+            ? 'text-[var(--color-foreground)] border-[var(--color-primary)]'
+            : 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] border-transparent';
+        return [base, sizePad, '-mb-px border-b-2', state].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<div role=\"tablist\" [class]=\"listClasses()\">\n  @for (tab of tabs(); track tab.value()) {\n    <button\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value() === tab.value()\"\n      [disabled]=\"tab.disabled()\"\n      (click)=\"select(tab.value())\"\n      [class]=\"tabClasses(tab)\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.iconTpl() ?? null\" />\n      {{ tab.label() }}\n    </button>\n  }\n</div>\n\n<div class=\"mt-4\">\n  <ng-content />\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tabs', imports: [NgTemplateOutlet], host: { class: 'block' }, template: "<div role=\"tablist\" [class]=\"listClasses()\">\n  @for (tab of tabs(); track tab.value()) {\n    <button\n      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value() === tab.value()\"\n      [disabled]=\"tab.disabled()\"\n      (click)=\"select(tab.value())\"\n      [class]=\"tabClasses(tab)\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.iconTpl() ?? null\" />\n      {{ tab.label() }}\n    </button>\n  }\n</div>\n\n<div class=\"mt-4\">\n  <ng-content />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
+/** Una pestaña: label/ícono para la barra + su panel proyectado. */
+class TabComponent {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    iconTpl = viewChild('icon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTpl" }] : /* istanbul ignore next */ []));
+    tabs = inject(TabsComponent);
+    isActive = computed(() => this.tabs.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TabComponent, isStandalone: true, selector: "ui-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" } }, viewQueries: [{ propertyName: "iconTpl", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #icon><ng-content select="[slot=icon]" /></ng-template>
+    @if (isActive()) {
+      <ng-content />
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tab',
+                    template: `
+    <ng-template #icon><ng-content select="[slot=icon]" /></ng-template>
+    @if (isActive()) {
+      <ng-content />
+    }
+  `,
+                    host: { role: 'tabpanel' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconTpl: [{ type: i0.ViewChild, args: ['icon', { isSignal: true }] }] } });
+
+let nextId$1 = 0;
+/**
+ * Campo de texto multilínea. Funciona con Signal Forms (`[formField]`),
+ * ControlValueAccessor (ngModel/Reactive) y two-way `[(value)]`.
+ */
+class TextareaComponent {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    error = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    id = input(`ui-textarea-${nextId$1++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    rows = input(4, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Crece en alto según el contenido. */
+    autoGrow = input(false, { ...(ngDevMode ? { debugName: "autoGrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    host = inject((ElementRef));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    errorMessage = computed(() => {
+        if (this.error())
+            return this.error();
+        if (this.touched()) {
+            const first = this.errors()[0];
+            if (first)
+                return first.message ?? first.kind ?? 'Campo inválido';
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.error() || !!this.errorMessage() || (this.invalid() && this.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    describedById = computed(() => this.hasError() || this.hint() ? `${this.id()}-desc` : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+    fieldClasses = computed(() => {
+        const base = 'w-full rounded-[10px] border bg-[var(--color-background)] px-3 py-2 text-sm text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)] transition-all outline-none resize-y disabled:cursor-not-allowed';
+        const state = this.hasError()
+            ? 'border-[var(--color-destructive)] focus:ring-[3px] focus:ring-[var(--color-destructive)]/25'
+            : 'border-[var(--color-input)] focus:border-[var(--color-ring)] focus:ring-[3px] focus:ring-[var(--color-ring)]/40';
+        const disabled = this.isDisabled() ? 'opacity-50 bg-[var(--color-muted)]/40' : '';
+        const grow = this.autoGrow() ? 'resize-none overflow-hidden' : '';
+        return [base, state, disabled, grow].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldClasses" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const el = event.target;
+        this.value.set(el.value);
+        this.onChange(el.value);
+        if (this.autoGrow())
+            this.grow(el);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    grow(el) {
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TextareaComponent, isStandalone: true, selector: "ui-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaComponent), multi: true },
+        ], ngImport: i0, template: "@if (label()) {\n  <label [for]=\"id()\" class=\"block mb-1.5 text-sm font-medium text-[var(--color-foreground)]\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-[var(--color-destructive)]\">*</span>\n    }\n  </label>\n}\n\n<textarea\n  [id]=\"id()\"\n  [name]=\"name()\"\n  [rows]=\"rows()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"isDisabled()\"\n  [required]=\"required()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n  [attr.aria-invalid]=\"hasError() || null\"\n  [attr.aria-describedby]=\"describedById()\"\n  [class]=\"fieldClasses()\"\n></textarea>\n\n@if (hasError()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">{{ errorMessage() }}</p>\n} @else if (hint()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-muted-foreground)]\">{{ hint() }}</p>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-textarea', host: { class: 'block' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaComponent), multi: true },
+                    ], template: "@if (label()) {\n  <label [for]=\"id()\" class=\"block mb-1.5 text-sm font-medium text-[var(--color-foreground)]\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"text-[var(--color-destructive)]\">*</span>\n    }\n  </label>\n}\n\n<textarea\n  [id]=\"id()\"\n  [name]=\"name()\"\n  [rows]=\"rows()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [disabled]=\"isDisabled()\"\n  [required]=\"required()\"\n  [value]=\"value()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n  [attr.aria-invalid]=\"hasError() || null\"\n  [attr.aria-describedby]=\"describedById()\"\n  [class]=\"fieldClasses()\"\n></textarea>\n\n@if (hasError()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-destructive)]\">{{ errorMessage() }}</p>\n} @else if (hint()) {\n  <p [id]=\"describedById()\" class=\"mt-1.5 text-xs text-[var(--color-muted-foreground)]\">{{ hint() }}</p>\n}\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+
+/** Tarjeta individual de toast. */
+class ToastComponent {
+    toast = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
+    close = output();
+    /** Controla la transición de entrada (false → true tras montar). */
+    shown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.shown.set(true));
+    }
+    iconColor = computed(() => {
+        const map = {
+            info: 'text-[var(--color-primary)]',
+            success: 'text-emerald-600',
+            warning: 'text-amber-600',
+            error: 'text-[var(--color-destructive)]',
+        };
+        return map[this.toast().type];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
+    runAction() {
+        this.toast().action?.handler();
+        this.close.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ToastComponent, isStandalone: true, selector: "ui-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div\n  class=\"flex items-start gap-3 w-80 max-w-[calc(100vw-2rem)] rounded-[var(--radius)] border border-[var(--color-border)] bg-[var(--color-background)] px-4 py-3 text-sm shadow-lg transition-all duration-300\"\n  [class.opacity-0]=\"!shown()\"\n  [class.translate-y-2]=\"!shown()\"\n  [class.opacity-100]=\"shown()\"\n>\n  <span class=\"shrink-0 mt-0.5\" [class]=\"iconColor()\">\n    @switch (toast().type) {\n      @case ('success') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" /><polyline points=\"22 4 12 14.01 9 11.01\" /></svg>\n      }\n      @case ('warning') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" /></svg>\n      }\n      @case ('error') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" /></svg>\n      }\n      @default {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" /></svg>\n      }\n    }\n  </span>\n\n  <div class=\"flex-1 min-w-0\">\n    @if (toast().title) {\n      <p class=\"font-semibold leading-tight text-[var(--color-foreground)]\">{{ toast().title }}</p>\n    }\n    <p class=\"text-[var(--color-muted-foreground)]\" [class.mt-0.5]=\"toast().title\">\n      {{ toast().message }}\n    </p>\n    @if (toast().action; as action) {\n      <button\n        type=\"button\"\n        (click)=\"runAction()\"\n        class=\"mt-2 text-xs font-semibold text-[var(--color-primary)] hover:underline underline-offset-2 cursor-pointer\"\n      >\n        {{ action.label }}\n      </button>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"close.emit()\"\n    aria-label=\"Cerrar\"\n    class=\"shrink-0 -mr-1 -mt-0.5 flex items-center justify-center size-6 rounded-md text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-accent)] transition-colors cursor-pointer\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>\n  </button>\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-toast', template: "<div\n  class=\"flex items-start gap-3 w-80 max-w-[calc(100vw-2rem)] rounded-[var(--radius)] border border-[var(--color-border)] bg-[var(--color-background)] px-4 py-3 text-sm shadow-lg transition-all duration-300\"\n  [class.opacity-0]=\"!shown()\"\n  [class.translate-y-2]=\"!shown()\"\n  [class.opacity-100]=\"shown()\"\n>\n  <span class=\"shrink-0 mt-0.5\" [class]=\"iconColor()\">\n    @switch (toast().type) {\n      @case ('success') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" /><polyline points=\"22 4 12 14.01 9 11.01\" /></svg>\n      }\n      @case ('warning') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" /></svg>\n      }\n      @case ('error') {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" /></svg>\n      }\n      @default {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" /></svg>\n      }\n    }\n  </span>\n\n  <div class=\"flex-1 min-w-0\">\n    @if (toast().title) {\n      <p class=\"font-semibold leading-tight text-[var(--color-foreground)]\">{{ toast().title }}</p>\n    }\n    <p class=\"text-[var(--color-muted-foreground)]\" [class.mt-0.5]=\"toast().title\">\n      {{ toast().message }}\n    </p>\n    @if (toast().action; as action) {\n      <button\n        type=\"button\"\n        (click)=\"runAction()\"\n        class=\"mt-2 text-xs font-semibold text-[var(--color-primary)] hover:underline underline-offset-2 cursor-pointer\"\n      >\n        {{ action.label }}\n      </button>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    (click)=\"close.emit()\"\n    aria-label=\"Cerrar\"\n    class=\"shrink-0 -mr-1 -mt-0.5 flex items-center justify-center size-6 rounded-md text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-accent)] transition-colors cursor-pointer\"\n  >\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+/** Contenedor flotante de toasts. Se auto-monta vía ToastService (interno). */
+class ToasterComponent {
+    svc = inject(ToastService);
+    containerClasses = computed(() => {
+        const base = 'fixed z-[100] flex flex-col gap-2 p-4 pointer-events-none [&>*]:pointer-events-auto';
+        const posMap = {
+            'top-left': 'top-0 left-0 items-start',
+            'top-center': 'top-0 left-1/2 -translate-x-1/2 items-center',
+            'top-right': 'top-0 right-0 items-end',
+            'bottom-left': 'bottom-0 left-0 items-start flex-col-reverse',
+            'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center flex-col-reverse',
+            'bottom-right': 'bottom-0 right-0 items-end flex-col-reverse',
+        };
+        return [base, posMap[this.svc.position()]].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ToasterComponent, isStandalone: true, selector: "ui-toaster", ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      @for (t of svc.toasts(); track t.id) {
+        <ui-toast [toast]="t" (close)="svc.dismiss(t.id)" />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ToastComponent, selector: "ui-toast", inputs: ["toast"], outputs: ["close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToasterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toaster',
+                    imports: [ToastComponent],
+                    template: `
+    <div [class]="containerClasses()">
+      @for (t of svc.toasts(); track t.id) {
+        <ui-toast [toast]="t" (close)="svc.dismiss(t.id)" />
+      }
+    </div>
+  `,
+                }]
+        }] });
+
+const MAX_TOASTS = 5;
+/**
+ * API de notificaciones. Auto-monta el contenedor en el <body> al primer uso
+ * (cero setup para el consumidor).
+ *
+ *   private toast = inject(ToastService);
+ *   toast.success('Guardado');
+ *   toast.error('Falló', { title: 'Error' });
+ */
+class ToastService {
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    toasts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    position = signal('bottom-right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    mounted = false;
+    seq = 0;
+    show(opts) {
+        this.ensureMounted();
+        const id = ++this.seq;
+        const toast = {
+            id,
+            type: opts.type ?? 'info',
+            title: opts.title,
+            message: opts.message,
+            action: opts.action,
+        };
+        this.toasts.update((list) => [...list, toast].slice(-MAX_TOASTS));
+        const duration = opts.duration ?? 5000;
+        if (duration > 0) {
+            setTimeout(() => this.dismiss(id), duration);
+        }
+        return id;
+    }
+    success(message, opts) {
+        return this.show({ ...opts, type: 'success', message });
+    }
+    error(message, opts) {
+        return this.show({ ...opts, type: 'error', message });
+    }
+    warning(message, opts) {
+        return this.show({ ...opts, type: 'warning', message });
+    }
+    info(message, opts) {
+        return this.show({ ...opts, type: 'info', message });
+    }
+    dismiss(id) {
+        this.toasts.update((list) => list.filter((t) => t.id !== id));
+    }
+    setPosition(position) {
+        this.position.set(position);
+    }
+    ensureMounted() {
+        if (this.mounted)
+            return;
+        const ref = createComponent(ToasterComponent, { environmentInjector: this.envInjector });
+        this.appRef.attachView(ref.hostView);
+        const node = ref.hostView.rootNodes[0];
+        document.body.appendChild(node);
+        this.mounted = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const GAP = 8; // separación entre trigger y tooltip (px)
+const MARGIN = 8; // margen mínimo al borde del viewport (px)
+/**
+ * Tooltip accesible sin dependencias: se añade a cualquier elemento.
+ * Posiciona un elemento flotante (position: fixed) con auto-flip y flecha.
+ *
+ *   <ui-button uiTooltip="Guardar" tooltipPlacement="top">Guardar</ui-button>
+ */
+class TooltipDirective {
+    host = inject((ElementRef));
+    renderer = inject(Renderer2);
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'uiTooltip' });
+    placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'tooltipPlacement' });
+    delay = input(300, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), alias: 'tooltipDelay', transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'tooltipDisabled', transform: booleanAttribute });
+    tooltipEl = null;
+    arrowEl = null;
+    openTimer = null;
+    tipId = `ui-tooltip-${Math.floor(performance.now() * 1000) % 1_000_000}`;
+    onEnter() {
+        this.scheduleShow();
+    }
+    onLeave() {
+        this.hide();
+    }
+    onEscape() {
+        this.hide();
+    }
+    scheduleShow() {
+        if (this.disabled() || !this.text() || this.tooltipEl)
+            return;
+        this.clearTimer();
+        this.openTimer = setTimeout(() => this.show(), this.delay());
+    }
+    show() {
+        if (this.tooltipEl)
+            return;
+        const tip = this.renderer.createElement('div');
+        tip.id = this.tipId;
+        tip.setAttribute('role', 'tooltip');
+        tip.className =
+            'fixed z-50 px-2 py-1 rounded-md text-xs font-medium shadow-md max-w-xs whitespace-normal pointer-events-none opacity-0 transition-opacity duration-150 bg-[var(--color-foreground)] text-[var(--color-background)]';
+        tip.textContent = this.text();
+        const arrow = this.renderer.createElement('div');
+        arrow.className = 'fixed z-50 size-2 rotate-45 pointer-events-none bg-[var(--color-foreground)]';
+        this.renderer.appendChild(document.body, tip);
+        this.renderer.appendChild(document.body, arrow);
+        this.tooltipEl = tip;
+        this.arrowEl = arrow;
+        this.host.nativeElement.setAttribute('aria-describedby', this.tipId);
+        this.position();
+        // fade-in tras posicionar
+        requestAnimationFrame(() => {
+            if (this.tooltipEl)
+                this.tooltipEl.style.opacity = '1';
+        });
+    }
+    position() {
+        if (!this.tooltipEl || !this.arrowEl)
+            return;
+        const trigger = this.host.nativeElement.getBoundingClientRect();
+        const tip = this.tooltipEl.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let place = this.placement();
+        // Auto-flip si no cabe en el lado elegido.
+        const fits = (p) => {
+            if (p === 'top')
+                return trigger.top - GAP - tip.height >= MARGIN;
+            if (p === 'bottom')
+                return trigger.bottom + GAP + tip.height <= vh - MARGIN;
+            if (p === 'left')
+                return trigger.left - GAP - tip.width >= MARGIN;
+            return trigger.right + GAP + tip.width <= vw - MARGIN; // right
+        };
+        const opposite = {
+            top: 'bottom',
+            bottom: 'top',
+            left: 'right',
+            right: 'left',
+        };
+        if (!fits(place) && fits(opposite[place]))
+            place = opposite[place];
+        let top = 0;
+        let left = 0;
+        let arrowTop = 0;
+        let arrowLeft = 0;
+        if (place === 'top' || place === 'bottom') {
+            left = trigger.left + trigger.width / 2 - tip.width / 2;
+            top = place === 'top' ? trigger.top - GAP - tip.height : trigger.bottom + GAP;
+            arrowLeft = trigger.left + trigger.width / 2 - 4;
+            arrowTop = place === 'top' ? trigger.top - GAP - 4 : trigger.bottom + GAP - 4;
+        }
+        else {
+            top = trigger.top + trigger.height / 2 - tip.height / 2;
+            left = place === 'left' ? trigger.left - GAP - tip.width : trigger.right + GAP;
+            arrowTop = trigger.top + trigger.height / 2 - 4;
+            arrowLeft = place === 'left' ? trigger.left - GAP - 4 : trigger.right + GAP - 4;
+        }
+        // Clamp horizontal/vertical al viewport.
+        left = Math.max(MARGIN, Math.min(left, vw - tip.width - MARGIN));
+        top = Math.max(MARGIN, Math.min(top, vh - tip.height - MARGIN));
+        this.tooltipEl.style.top = `${Math.round(top)}px`;
+        this.tooltipEl.style.left = `${Math.round(left)}px`;
+        this.arrowEl.style.top = `${Math.round(arrowTop)}px`;
+        this.arrowEl.style.left = `${Math.round(arrowLeft)}px`;
+    }
+    hide() {
+        this.clearTimer();
+        if (this.tooltipEl) {
+            this.renderer.removeChild(document.body, this.tooltipEl);
+            this.tooltipEl = null;
+        }
+        if (this.arrowEl) {
+            this.renderer.removeChild(document.body, this.arrowEl);
+            this.arrowEl = null;
+        }
+        this.host.nativeElement.removeAttribute('aria-describedby');
+    }
+    clearTimer() {
+        if (this.openTimer) {
+            clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: TooltipDirective, isStandalone: true, selector: "[uiTooltip]", inputs: { text: { classPropertyName: "text", publicName: "uiTooltip", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onEnter()", "focusin": "onEnter()", "mouseleave": "onLeave()", "focusout": "onLeave()", "document:keydown.escape": "onEscape()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTooltip]',
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiTooltip", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], onEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focusin']
+            }], onLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['focusout']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+let nextId = 0;
+/**
+ * Interruptor on/off. Funciona con Signal Forms (`[formField]`, contrato
+ * FormCheckboxControl), ControlValueAccessor (ngModel/Reactive) y two-way `[(checked)]`.
+ */
+class SwitchComponent {
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    id = input(`ui-switch-${nextId++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => {
+        const sizeMap = {
+            sm: 'h-4 w-7',
+            md: 'h-5 w-9',
+        };
+        const base = 'relative shrink-0 inline-flex items-center rounded-full transition-colors outline-none peer-focus-visible:ring-[3px] peer-focus-visible:ring-[var(--color-ring)]/40';
+        const state = this.checked()
+            ? 'bg-[var(--color-primary)]'
+            : 'bg-[var(--color-input)]';
+        const disabled = this.isDisabled() ? 'opacity-50' : '';
+        return [base, sizeMap[this.size()], state, disabled].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    thumbClasses = computed(() => {
+        // Tamaño del thumb y desplazamiento al activarse.
+        const sm = this.size() === 'sm';
+        const dims = sm ? 'size-3' : 'size-4';
+        const off = 'translate-x-0.5';
+        const on = sm ? 'translate-x-3.5' : 'translate-x-4';
+        const base = 'inline-block rounded-full bg-white shadow-sm transition-transform';
+        return [base, dims, this.checked() ? on : off].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbClasses" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    toggle(event) {
+        const next = event.target.checked;
+        this.checked.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SwitchComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true },
+        ], ngImport: i0, template: "<label\n  [for]=\"id()\"\n  class=\"flex items-start gap-2.5\"\n  [class.cursor-pointer]=\"!isDisabled()\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n>\n  <span class=\"relative inline-flex items-center\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      (change)=\"toggle($event)\"\n      class=\"peer absolute inset-0 size-full opacity-0 m-0 cursor-pointer disabled:cursor-not-allowed\"\n    />\n    <span [class]=\"trackClasses()\">\n      <span [class]=\"thumbClasses()\"></span>\n    </span>\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"flex flex-col gap-0.5 -mt-px\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-[var(--color-foreground)] leading-tight\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"text-[var(--color-destructive)]\">*</span>\n          }\n        </span>\n      }\n      @if (description()) {\n        <span class=\"text-xs text-[var(--color-muted-foreground)]\">{{ description() }}</span>\n      }\n    </span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-switch', host: { class: 'block' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true },
+                    ], template: "<label\n  [for]=\"id()\"\n  class=\"flex items-start gap-2.5\"\n  [class.cursor-pointer]=\"!isDisabled()\"\n  [class.cursor-not-allowed]=\"isDisabled()\"\n>\n  <span class=\"relative inline-flex items-center\">\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      (change)=\"toggle($event)\"\n      class=\"peer absolute inset-0 size-full opacity-0 m-0 cursor-pointer disabled:cursor-not-allowed\"\n    />\n    <span [class]=\"trackClasses()\">\n      <span [class]=\"thumbClasses()\"></span>\n    </span>\n  </span>\n\n  @if (label() || description()) {\n    <span class=\"flex flex-col gap-0.5 -mt-px\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-[var(--color-foreground)] leading-tight\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"text-[var(--color-destructive)]\">*</span>\n          }\n        </span>\n      }\n      @if (description()) {\n        <span class=\"text-xs text-[var(--color-muted-foreground)]\">{{ description() }}</span>\n      }\n    </span>\n  }\n</label>\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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 }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+function provideHighstack(config) {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            useFactory: () => {
+                const document = inject(DOCUMENT);
+                return () => {
+                    const body = document.body;
+                    // Remove pre-existing theme classes
+                    body.classList.forEach((className) => {
+                        if (className.startsWith('theme-')) {
+                            body.classList.remove(className);
+                        }
+                    });
+                    // Apply selected theme if not default
+                    if (config.theme && config.theme !== 'default') {
+                        body.classList.add(`theme-${config.theme}`);
+                    }
+                    // Apply dark mode
+                    body.classList.toggle('dark', !!config.dark);
+                };
+            },
+            multi: true,
+        },
+    ];
+}
 
 /*
  * Public API Surface of @highstacklabs2026/ui
@@ -57,5 +2218,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, ButtonComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DropdownComponent, DropdownItemComponent, DropdownLabelComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, OptionComponent, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TextareaComponent, ToastService, TooltipDirective, getByPath, provideHighstack };
 //# sourceMappingURL=highstacklabs2026-ui.mjs.map