@xosue-utils/helpers 0.2.0 → 0.2.3

package/fesm2022/xosue-utils-helpers.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, signal, computed, effect, Input, Component, input, output } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { inject, Injector, signal, computed, effect, Input, Component, input, output, booleanAttribute, model, forwardRef, contentChildren } from '@angular/core';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { LucideIconComponent, TextBtnComponent } from '@xosue-utils/actions';
@@ -136,12 +136,12 @@ class SmartPaginationComponent {
     ngOnDestroy() {
         this.queryParamsSub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SmartPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SmartPaginationComponent, isStandalone: true, selector: "smart-pagination", inputs: { resetOnChanges: "resetOnChanges", paramName: "paramName", emptyLabel: "emptyLabel", singlePageLabel: "singlePageLabel", data: "data" }, ngImport: i0, template: "@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">\u2026</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--border)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:var(--text-muted);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--surface) 80%,var(--border));color:var(--text-base)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--surface);color:var(--text-base);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--text-base) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--text-muted)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--border);color:var(--text-muted);margin:0;font-size:.8125rem}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SmartPaginationComponent, isStandalone: true, selector: "smart-pagination", inputs: { resetOnChanges: "resetOnChanges", paramName: "paramName", emptyLabel: "emptyLabel", singlePageLabel: "singlePageLabel", data: "data" }, ngImport: i0, template: "@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"14\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">\u2026</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"14\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex;user-select:none;-webkit-user-select:none}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--color-surface-muted, var(--color-surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--color-border, #e5e5e5)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:14px;font-weight:400;cursor:pointer;border:none;background-color:transparent;color:var(--color-fg-muted, #a3a3a3);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--color-surface, #ffffff) 80%,var(--color-border, #e5e5e5));color:var(--color-fg, #171717)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--color-surface, #ffffff);color:var(--color-fg, #171717);font-weight:400;box-shadow:0 1px 2px color-mix(in srgb,var(--color-fg, #171717) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--color-fg-muted, #a3a3a3)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--color-surface-muted, var(--color-surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--color-border, #e5e5e5);color:var(--color-fg-muted, #a3a3a3);margin:0;font-size:14px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SmartPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SmartPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-pagination', standalone: true, imports: [LucideIconComponent, CommonModule], template: "@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">\u2026</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"16\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--border)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;color:var(--text-muted);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--surface) 80%,var(--border));color:var(--text-base)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--surface);color:var(--text-base);font-weight:700;box-shadow:0 1px 2px color-mix(in srgb,var(--text-base) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--text-muted)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--surface-2, var(--surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--border);color:var(--text-muted);margin:0;font-size:.8125rem}\n"] }]
+            args: [{ selector: 'smart-pagination', standalone: true, imports: [LucideIconComponent, CommonModule], template: "@if (paginationData() && paginationData().total === 0) {\r\n  <p class=\"NonResults\">{{ emptyLabel }}</p>\r\n} @else if (paginationData() && paginationData().last_page > 1) {\r\n  <nav class=\"pagination\" aria-label=\"Paginaci\u00F3n\">\r\n    @if (currentPage() > 1) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() - 1)\" aria-label=\"Anterior\">\r\n        <lucide-icon name=\"chevron-left\" [size]=\"14\"></lucide-icon>\r\n      </button>\r\n    }\r\n\r\n    @for (p of pagesToDisplay(); track $index) {\r\n      @if (isPage(p)) {\r\n        <a\r\n          [class.active]=\"p === currentPage()\"\r\n          [href]=\"generateHref(p)\"\r\n          (click)=\"goToPage(p); $event.preventDefault()\"\r\n        >\r\n          {{ p }}\r\n        </a>\r\n      } @else {\r\n        <span class=\"ellipsis\">\u2026</span>\r\n      }\r\n    }\r\n\r\n    @if (currentPage() < lastPage()) {\r\n      <button type=\"button\" (click)=\"goToPage(currentPage() + 1)\" aria-label=\"Siguiente\">\r\n        <lucide-icon name=\"chevron-right\" [size]=\"14\"></lucide-icon>\r\n      </button>\r\n    }\r\n  </nav>\r\n} @else {\r\n  <p class=\"UniquePage\">{{ singlePageLabel }}</p>\r\n}\r\n", styles: [":host{width:max-content;height:32px;display:flex;user-select:none;-webkit-user-select:none}.pagination{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--color-surface-muted, var(--color-surface));border-radius:var(--radius-lg, 12px);padding:2px;border:1px solid var(--color-border, #e5e5e5)}.pagination a,.pagination button{min-width:28px;height:28px;padding:2px 8px;font-size:14px;font-weight:400;cursor:pointer;border:none;background-color:transparent;color:var(--color-fg-muted, #a3a3a3);border-radius:var(--radius-md, 8px);display:flex;justify-content:center;align-items:center;text-decoration:none;transition:background-color .15s ease,color .15s ease,transform .1s ease}.pagination a:hover,.pagination button:hover{background-color:color-mix(in srgb,var(--color-surface, #ffffff) 80%,var(--color-border, #e5e5e5));color:var(--color-fg, #171717)}.pagination a:active,.pagination button:active{transform:scale(.98)}.pagination a.active,.pagination button.active{background-color:var(--color-surface, #ffffff);color:var(--color-fg, #171717);font-weight:400;box-shadow:0 1px 2px color-mix(in srgb,var(--color-fg, #171717) 12%,transparent)}.pagination .ellipsis{display:flex;align-items:center;justify-content:center;width:max-content;padding:0 2px;color:var(--color-fg-muted, #a3a3a3)}.NonResults,.UniquePage{width:max-content;max-width:280px;height:32px;display:flex;align-items:center;gap:4px;background-color:var(--color-surface-muted, var(--color-surface));border-radius:var(--radius-lg, 12px);padding:4px 8px;border:1px solid var(--color-border, #e5e5e5);color:var(--color-fg-muted, #a3a3a3);margin:0;font-size:14px}\n"] }]
         }], propDecorators: { resetOnChanges: [{
                 type: Input
             }], paramName: [{
@@ -163,12 +163,12 @@ class EmptyStateComponent {
     secondaryLabel = input(null);
     primary = output();
     secondary = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: EmptyStateComponent, isStandalone: true, selector: "empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primary: "primary", secondary: "secondary" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: EmptyStateComponent, isStandalone: true, selector: "empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primary: "primary", secondary: "secondary" }, ngImport: i0, template: `
     <div class="EmptyState">
       @if (icon()) {
         <div class="EmptyState__Icon">
-          <lucide-icon [name]="icon()!" [size]="36"></lucide-icon>
+          <lucide-icon [name]="icon()!" [size]="24"></lucide-icon>
         </div>
       }
       <h3 class="EmptyState__Title">{{ title() }}</h3>
@@ -188,7 +188,7 @@ class EmptyStateComponent {
           @if (primaryLabel()) {
             <text-btn
               [label]="primaryLabel()!"
-              [icon]="primaryIcon()"
+              [icon]="primaryIcon() ?? ''"
               color="primary"
               (clicked)="primary.emit($event)"
             ></text-btn>
@@ -197,15 +197,15 @@ class EmptyStateComponent {
       }
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--surface-2, var(--surface));border:1px solid var(--border)}.EmptyState__Icon{display:flex;color:var(--text-muted)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--text-muted)}.EmptyState__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.EmptyState__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px 20px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--color-surface-muted, var(--color-surface));border:1px solid var(--color-border, #e5e5e5)}.EmptyState__Icon{display:flex;color:var(--color-fg-muted, #a3a3a3)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--color-fg-muted, #a3a3a3)}.EmptyState__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.EmptyState__Message{margin:0;max-width:28rem;font-size:14px;line-height:1.45;color:var(--color-fg-muted, #a3a3a3)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'empty-state', standalone: true, imports: [LucideIconComponent, TextBtnComponent], template: `
     <div class="EmptyState">
       @if (icon()) {
         <div class="EmptyState__Icon">
-          <lucide-icon [name]="icon()!" [size]="36"></lucide-icon>
+          <lucide-icon [name]="icon()!" [size]="24"></lucide-icon>
         </div>
       }
       <h3 class="EmptyState__Title">{{ title() }}</h3>
@@ -225,7 +225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
           @if (primaryLabel()) {
             <text-btn
               [label]="primaryLabel()!"
-              [icon]="primaryIcon()"
+              [icon]="primaryIcon() ?? ''"
               color="primary"
               (clicked)="primary.emit($event)"
             ></text-btn>
@@ -234,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
       }
       <ng-content></ng-content>
     </div>
-  `, styles: [":host{display:block;width:100%}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--surface-2, var(--surface));border:1px solid var(--border)}.EmptyState__Icon{display:flex;color:var(--text-muted)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--text-muted)}.EmptyState__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.EmptyState__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"] }]
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px 20px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--color-surface-muted, var(--color-surface));border:1px solid var(--color-border, #e5e5e5)}.EmptyState__Icon{display:flex;color:var(--color-fg-muted, #a3a3a3)}.EmptyState__Icon lucide-icon{--lucide-stroke: var(--color-fg-muted, #a3a3a3)}.EmptyState__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.EmptyState__Message{margin:0;max-width:28rem;font-size:14px;line-height:1.45;color:var(--color-fg-muted, #a3a3a3)}.EmptyState__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:4px}\n"] }]
         }] });
 
 class LoadErrorComponent {
@@ -243,11 +243,11 @@ class LoadErrorComponent {
     icon = input('triangle-alert');
     retryLabel = input('Reintentar');
     retry = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: LoadErrorComponent, isStandalone: true, selector: "load-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LoadErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: LoadErrorComponent, isStandalone: true, selector: "load-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, ngImport: i0, template: `
     <div class="LoadError">
       <div class="LoadError__Icon">
-        <lucide-icon [name]="icon()" [size]="36"></lucide-icon>
+        <lucide-icon [name]="icon()" [size]="24"></lucide-icon>
       </div>
       <h3 class="LoadError__Title">{{ title() }}</h3>
       @if (message()) {
@@ -263,14 +263,14 @@ class LoadErrorComponent {
       </div>
       <ng-content></ng-content>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:color-mix(in srgb,var(--error-bg, var(--surface)) 70%,var(--surface));border:1px solid var(--error-border, var(--border))}.LoadError__Icon{display:flex}.LoadError__Icon lucide-icon{--lucide-stroke: var(--error-text, var(--text-base))}.LoadError__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.LoadError__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.LoadError__Actions{display:flex;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px 20px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--color-danger-bg, var(--color-surface, #fef2f2));border:1px solid var(--color-danger-border, var(--color-border, #fca5a5))}.LoadError__Icon{display:flex;color:var(--color-danger-fg, var(--color-fg, #dc2626))}.LoadError__Icon lucide-icon{--lucide-stroke: var(--color-danger-fg, var(--color-fg, #dc2626))}.LoadError__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.LoadError__Message{margin:0;max-width:28rem;font-size:14px;line-height:1.45;color:var(--color-fg-muted, #a3a3a3)}.LoadError__Actions{display:flex;margin-top:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: TextBtnComponent, selector: "text-btn", inputs: ["label", "icon", "iconPosition", "iconSpin", "layout", "variant", "color", "rounded", "size", "ripple", "disabled", "buttonType", "href", "routerLink", "fit", "width", "textColor", "bgColor", "borderColor", "title"], outputs: ["clicked"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LoadErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'load-error', standalone: true, imports: [LucideIconComponent, TextBtnComponent], template: `
     <div class="LoadError">
       <div class="LoadError__Icon">
-        <lucide-icon [name]="icon()" [size]="36"></lucide-icon>
+        <lucide-icon [name]="icon()" [size]="24"></lucide-icon>
       </div>
       <h3 class="LoadError__Title">{{ title() }}</h3>
       @if (message()) {
@@ -286,15 +286,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
       </div>
       <ng-content></ng-content>
     </div>
-  `, styles: [":host{display:block;width:100%}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border-radius:var(--radius-xl, 16px);background:color-mix(in srgb,var(--error-bg, var(--surface)) 70%,var(--surface));border:1px solid var(--error-border, var(--border))}.LoadError__Icon{display:flex}.LoadError__Icon lucide-icon{--lucide-stroke: var(--error-text, var(--text-base))}.LoadError__Title{margin:0;font-size:1rem;font-weight:600;color:var(--text-base)}.LoadError__Message{margin:0;max-width:28rem;font-size:.875rem;line-height:1.45;color:var(--text-muted)}.LoadError__Actions{display:flex;margin-top:4px}\n"] }]
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.LoadError{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px 20px;text-align:center;border-radius:var(--radius-xl, 16px);background:var(--color-danger-bg, var(--color-surface, #fef2f2));border:1px solid var(--color-danger-border, var(--color-border, #fca5a5))}.LoadError__Icon{display:flex;color:var(--color-danger-fg, var(--color-fg, #dc2626))}.LoadError__Icon lucide-icon{--lucide-stroke: var(--color-danger-fg, var(--color-fg, #dc2626))}.LoadError__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.LoadError__Message{margin:0;max-width:28rem;font-size:14px;line-height:1.45;color:var(--color-fg-muted, #a3a3a3)}.LoadError__Actions{display:flex;margin-top:4px}\n"] }]
         }] });
 
 class SectionHeaderComponent {
     title = input.required();
     subtitle = input(null);
     eyebrow = input(null);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: SectionHeaderComponent, isStandalone: true, selector: "section-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SectionHeaderComponent, isStandalone: true, selector: "section-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <header class="SectionHeader">
       <div class="SectionHeader__Text">
         @if (eyebrow()) {
@@ -309,9 +309,9 @@ class SectionHeaderComponent {
         <ng-content></ng-content>
       </div>
     </header>
-  `, isInline: true, styles: [":host{display:block;width:100%}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.SectionHeader__Title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-base);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:.875rem;color:var(--text-muted);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] });
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted, #a3a3a3)}.SectionHeader__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:14px;color:var(--color-fg-muted, #a3a3a3);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SectionHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'section-header', standalone: true, template: `
     <header class="SectionHeader">
@@ -328,14 +328,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
         <ng-content></ng-content>
       </div>
     </header>
-  `, styles: [":host{display:block;width:100%}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.SectionHeader__Title{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-base);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:.875rem;color:var(--text-muted);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] }]
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.SectionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.SectionHeader__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.SectionHeader__Eyebrow{margin:0;font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted, #a3a3a3)}.SectionHeader__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717);line-height:1.25}.SectionHeader__Subtitle{margin:0;font-size:14px;color:var(--color-fg-muted, #a3a3a3);line-height:1.4}.SectionHeader__Actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}\n"] }]
         }] });
 
 class KeyValueListComponent {
     items = input([]);
     emptyValue = input('—');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: KeyValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: KeyValueListComponent, isStandalone: true, selector: "key-value-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KeyValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: KeyValueListComponent, isStandalone: true, selector: "key-value-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <dl class="KvList">
       @for (item of items(); track item.label + '-' + $index) {
         <div class="KvList__Row">
@@ -344,9 +344,9 @@ class KeyValueListComponent {
         </div>
       }
     </dl>
-  `, isInline: true, styles: [":host{display:block;width:100%}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--surface)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:.8125rem;color:var(--text-muted);font-weight:500}.KvList__Value{margin:0;font-size:.875rem;color:var(--text-base);word-break:break-word}\n"] });
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--color-border, #e5e5e5);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--color-surface, #ffffff)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--color-border, #e5e5e5)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:14px;color:var(--color-fg-muted, #a3a3a3);font-weight:400}.KvList__Value{margin:0;font-size:14px;color:var(--color-fg, #171717);word-break:break-word}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: KeyValueListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KeyValueListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'key-value-list', standalone: true, template: `
     <dl class="KvList">
@@ -357,7 +357,665 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
         </div>
       }
     </dl>
-  `, styles: [":host{display:block;width:100%}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--surface)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:.8125rem;color:var(--text-muted);font-weight:500}.KvList__Value{margin:0;font-size:.875rem;color:var(--text-base);word-break:break-word}\n"] }]
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.KvList{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--color-border, #e5e5e5);border-radius:var(--radius-lg, 12px);overflow:hidden;background:var(--color-surface, #ffffff)}.KvList__Row{display:grid;grid-template-columns:minmax(6rem,40%) 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--color-border, #e5e5e5)}.KvList__Row:last-child{border-bottom:none}.KvList__Label{margin:0;font-size:14px;color:var(--color-fg-muted, #a3a3a3);font-weight:400}.KvList__Value{margin:0;font-size:14px;color:var(--color-fg, #171717);word-break:break-word}\n"] }]
+        }] });
+
+class SkeletonComponent {
+    variant = input('line');
+    lines = input(3);
+    width = input('100%');
+    height = input('14px');
+    pulse = input(true, { transform: booleanAttribute });
+    get lineIndexes() {
+        return Array.from({ length: Math.max(1, this.lines()) }, (_, i) => i);
+    }
+    lineWidth(index) {
+        if (this.lines() <= 1)
+            return this.width();
+        return index === this.lines() - 1 ? '62%' : '100%';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SkeletonComponent, isStandalone: true, selector: "skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="Skeleton"
+      [class.Skeleton--circle]="variant() === 'circle'"
+      [class.Skeleton--rect]="variant() === 'rect'"
+      [class.Skeleton--static]="!pulse()"
+      [attr.aria-hidden]="true"
+    >
+      @if (variant() === 'line') {
+        @for (line of lineIndexes; track line) {
+          <span class="Skeleton__Line" [style.width]="lineWidth(line)"></span>
+        }
+      } @else {
+        <span class="Skeleton__Block" [style.width]="width()" [style.height]="height()"></span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Skeleton{display:flex;flex-direction:column;gap:4px;width:100%}.Skeleton--circle,.Skeleton--rect{width:auto}.Skeleton__Line,.Skeleton__Block{display:block;border-radius:8px;background:var(--color-surface-emphasis, #e5e5e5);animation:skeletonPulse 1.2s ease-in-out infinite alternate}.Skeleton__Line{height:14px}.Skeleton__Block{min-width:14px;min-height:14px}.Skeleton--circle .Skeleton__Block{border-radius:50%}.Skeleton--static .Skeleton__Line,.Skeleton--static .Skeleton__Block{animation:none}@keyframes skeletonPulse{0%{opacity:.55}to{opacity:1}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skeleton', standalone: true, template: `
+    <div
+      class="Skeleton"
+      [class.Skeleton--circle]="variant() === 'circle'"
+      [class.Skeleton--rect]="variant() === 'rect'"
+      [class.Skeleton--static]="!pulse()"
+      [attr.aria-hidden]="true"
+    >
+      @if (variant() === 'line') {
+        @for (line of lineIndexes; track line) {
+          <span class="Skeleton__Line" [style.width]="lineWidth(line)"></span>
+        }
+      } @else {
+        <span class="Skeleton__Block" [style.width]="width()" [style.height]="height()"></span>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Skeleton{display:flex;flex-direction:column;gap:4px;width:100%}.Skeleton--circle,.Skeleton--rect{width:auto}.Skeleton__Line,.Skeleton__Block{display:block;border-radius:8px;background:var(--color-surface-emphasis, #e5e5e5);animation:skeletonPulse 1.2s ease-in-out infinite alternate}.Skeleton__Line{height:14px}.Skeleton__Block{min-width:14px;min-height:14px}.Skeleton--circle .Skeleton__Block{border-radius:50%}.Skeleton--static .Skeleton__Line,.Skeleton--static .Skeleton__Block{animation:none}@keyframes skeletonPulse{0%{opacity:.55}to{opacity:1}}\n"] }]
+        }] });
+
+class SurfaceCardComponent {
+    title = input(null);
+    subtitle = input(null);
+    compact = input(false, { transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SurfaceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SurfaceCardComponent, isStandalone: true, selector: "surface-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="SurfaceCard" [class.SurfaceCard--compact]="compact()">
+      @if (title() || subtitle()) {
+        <div class="SurfaceCard__Head">
+          @if (title()) {
+            <p class="SurfaceCard__Title">{{ title() }}</p>
+          }
+          @if (subtitle()) {
+            <p class="SurfaceCard__Subtitle">{{ subtitle() }}</p>
+          }
+        </div>
+      }
+      <div class="SurfaceCard__Body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.SurfaceCard{display:flex;flex-direction:column;gap:4px;width:100%;padding:16px;border-radius:var(--radius-xl, 16px);background:var(--color-surface-muted, #f5f5f5)}.SurfaceCard--compact{padding:8px}.SurfaceCard__Head{display:flex;flex-direction:column;gap:4px}.SurfaceCard__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.SurfaceCard__Subtitle{margin:0;font-size:14px;font-weight:400;color:var(--color-fg-muted, #a3a3a3)}.SurfaceCard__Body{display:flex;flex-direction:column;gap:4px;min-width:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SurfaceCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'surface-card', standalone: true, template: `
+    <div class="SurfaceCard" [class.SurfaceCard--compact]="compact()">
+      @if (title() || subtitle()) {
+        <div class="SurfaceCard__Head">
+          @if (title()) {
+            <p class="SurfaceCard__Title">{{ title() }}</p>
+          }
+          @if (subtitle()) {
+            <p class="SurfaceCard__Subtitle">{{ subtitle() }}</p>
+          }
+        </div>
+      }
+      <div class="SurfaceCard__Body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.SurfaceCard{display:flex;flex-direction:column;gap:4px;width:100%;padding:16px;border-radius:var(--radius-xl, 16px);background:var(--color-surface-muted, #f5f5f5)}.SurfaceCard--compact{padding:8px}.SurfaceCard__Head{display:flex;flex-direction:column;gap:4px}.SurfaceCard__Title{margin:0;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.SurfaceCard__Subtitle{margin:0;font-size:14px;font-weight:400;color:var(--color-fg-muted, #a3a3a3)}.SurfaceCard__Body{display:flex;flex-direction:column;gap:4px;min-width:0}\n"] }]
+        }] });
+
+class AvatarComponent {
+    src = input(null);
+    name = input(null);
+    icon = input('user');
+    size = input(32);
+    broken = false;
+    initials = computed(() => {
+        const parts = (this.name() ?? '').trim().split(/\s+/).filter(Boolean);
+        if (!parts.length)
+            return '';
+        const first = parts[0][0] ?? '';
+        const second = parts.length > 1 ? parts[parts.length - 1][0] ?? '' : '';
+        return (first + second).toUpperCase();
+    });
+    iconSize() {
+        return Math.max(12, Math.round(this.size() * 0.44));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AvatarComponent, isStandalone: true, selector: "avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      class="Avatar"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [attr.aria-label]="name() || 'Avatar'"
+    >
+      @if (src() && !broken) {
+        <img class="Avatar__Img" [src]="src()!" alt="" (error)="broken = true" />
+      } @else if (initials()) {
+        <span class="Avatar__Initials">{{ initials() }}</span>
+      } @else {
+        <lucide-icon [name]="icon()" [size]="iconSize()"></lucide-icon>
+      }
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;flex-shrink:0;user-select:none;-webkit-user-select:none}.Avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:var(--color-surface-emphasis, #e5e5e5);color:var(--color-fg-secondary, #525252);font-size:14px;font-weight:400;line-height:1}.Avatar lucide-icon{--lucide-stroke: currentColor}.Avatar__Img{width:100%;height:100%;object-fit:cover}.Avatar__Initials{letter-spacing:.02em}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'avatar', standalone: true, imports: [LucideIconComponent], template: `
+    <span
+      class="Avatar"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [attr.aria-label]="name() || 'Avatar'"
+    >
+      @if (src() && !broken) {
+        <img class="Avatar__Img" [src]="src()!" alt="" (error)="broken = true" />
+      } @else if (initials()) {
+        <span class="Avatar__Initials">{{ initials() }}</span>
+      } @else {
+        <lucide-icon [name]="icon()" [size]="iconSize()"></lucide-icon>
+      }
+    </span>
+  `, styles: [":host{display:inline-flex;flex-shrink:0;user-select:none;-webkit-user-select:none}.Avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:var(--color-surface-emphasis, #e5e5e5);color:var(--color-fg-secondary, #525252);font-size:14px;font-weight:400;line-height:1}.Avatar lucide-icon{--lucide-stroke: currentColor}.Avatar__Img{width:100%;height:100%;object-fit:cover}.Avatar__Initials{letter-spacing:.02em}\n"] }]
+        }] });
+
+class ListRowComponent {
+    title = input.required();
+    subtitle = input(null);
+    icon = input(null);
+    avatarSrc = input(null);
+    avatarName = input(null);
+    chevron = input(false, { transform: booleanAttribute });
+    disabled = input(false, { transform: booleanAttribute });
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ListRowComponent, isStandalone: true, selector: "list-row", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarName: { classPropertyName: "avatarName", publicName: "avatarName", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    <div class="ListRow" [class.ListRow--disabled]="disabled()">
+      <button
+        type="button"
+        class="ListRow__Main"
+        [disabled]="disabled()"
+        (click)="clicked.emit($event)"
+      >
+        @if (avatarSrc() || avatarName()) {
+          <avatar [src]="avatarSrc()" [name]="avatarName()" [size]="32"></avatar>
+        } @else if (icon()) {
+          <span class="ListRow__Icon">
+            <lucide-icon [name]="icon()!" [size]="14"></lucide-icon>
+          </span>
+        }
+        <span class="ListRow__Text">
+          <span class="ListRow__Title">{{ title() }}</span>
+          @if (subtitle()) {
+            <span class="ListRow__Subtitle">{{ subtitle() }}</span>
+          }
+        </span>
+      </button>
+      <span class="ListRow__Trail">
+        <ng-content></ng-content>
+        @if (chevron()) {
+          <lucide-icon name="chevron-right" [size]="14"></lucide-icon>
+        }
+      </span>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.ListRow{display:flex;align-items:center;gap:4px;width:100%;border-radius:12px}.ListRow--disabled{opacity:.45}.ListRow__Main{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:8px;border:none;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.ListRow__Main:hover:not(:disabled){background:var(--color-surface-muted, #f5f5f5)}.ListRow__Main:active:not(:disabled){transform:scale(.98)}.ListRow__Main:disabled{cursor:not-allowed}.ListRow__Icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg-secondary, #525252)}.ListRow__Icon lucide-icon{--lucide-stroke: currentColor}.ListRow__Text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.ListRow__Title,.ListRow__Subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400}.ListRow__Title{color:var(--color-fg, #171717)}.ListRow__Subtitle{color:var(--color-fg-muted, #a3a3a3)}.ListRow__Trail{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;color:var(--color-fg-muted, #a3a3a3)}.ListRow__Trail lucide-icon{--lucide-stroke: currentColor}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "component", type: AvatarComponent, selector: "avatar", inputs: ["src", "name", "icon", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'list-row', standalone: true, imports: [LucideIconComponent, AvatarComponent], template: `
+    <div class="ListRow" [class.ListRow--disabled]="disabled()">
+      <button
+        type="button"
+        class="ListRow__Main"
+        [disabled]="disabled()"
+        (click)="clicked.emit($event)"
+      >
+        @if (avatarSrc() || avatarName()) {
+          <avatar [src]="avatarSrc()" [name]="avatarName()" [size]="32"></avatar>
+        } @else if (icon()) {
+          <span class="ListRow__Icon">
+            <lucide-icon [name]="icon()!" [size]="14"></lucide-icon>
+          </span>
+        }
+        <span class="ListRow__Text">
+          <span class="ListRow__Title">{{ title() }}</span>
+          @if (subtitle()) {
+            <span class="ListRow__Subtitle">{{ subtitle() }}</span>
+          }
+        </span>
+      </button>
+      <span class="ListRow__Trail">
+        <ng-content></ng-content>
+        @if (chevron()) {
+          <lucide-icon name="chevron-right" [size]="14"></lucide-icon>
+        }
+      </span>
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.ListRow{display:flex;align-items:center;gap:4px;width:100%;border-radius:12px}.ListRow--disabled{opacity:.45}.ListRow__Main{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:8px;border:none;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.ListRow__Main:hover:not(:disabled){background:var(--color-surface-muted, #f5f5f5)}.ListRow__Main:active:not(:disabled){transform:scale(.98)}.ListRow__Main:disabled{cursor:not-allowed}.ListRow__Icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg-secondary, #525252)}.ListRow__Icon lucide-icon{--lucide-stroke: currentColor}.ListRow__Text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.ListRow__Title,.ListRow__Subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400}.ListRow__Title{color:var(--color-fg, #171717)}.ListRow__Subtitle{color:var(--color-fg-muted, #a3a3a3)}.ListRow__Trail{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;color:var(--color-fg-muted, #a3a3a3)}.ListRow__Trail lucide-icon{--lucide-stroke: currentColor}\n"] }]
+        }] });
+
+class DataTableComponent {
+    columns = input([]);
+    rows = input([]);
+    loading = input(false);
+    emptyTitle = input('Sin filas');
+    emptyMessage = input('No hay datos para mostrar.');
+    emptyIcon = input('table');
+    rowClick = output();
+    gridCols() {
+        return `repeat(${Math.max(1, this.columns().length)}, minmax(0, 1fr))`;
+    }
+    cell(row, key) {
+        const value = row[key];
+        if (value == null || value === '')
+            return '—';
+        return String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DataTableComponent, isStandalone: true, selector: "data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: `
+    <div class="DataTable" role="table">
+      <div class="DataTable__Head" role="row" [style.grid-template-columns]="gridCols()">
+        @for (col of columns(); track col.key) {
+          <span class="DataTable__Cell DataTable__Cell--head" role="columnheader" [style.width]="col.width || null">
+            {{ col.label }}
+          </span>
+        }
+      </div>
+
+      @if (loading()) {
+        <div class="DataTable__Body">
+          @for (row of [0, 1, 2]; track row) {
+            <skeleton [lines]="1"></skeleton>
+          }
+        </div>
+      } @else if (!rows().length) {
+        <empty-state [title]="emptyTitle()" [message]="emptyMessage()" [icon]="emptyIcon()"></empty-state>
+      } @else {
+        <div class="DataTable__Body">
+          @for (row of rows(); track $index) {
+            <button type="button" class="DataTable__Row" role="row" [style.grid-template-columns]="gridCols()" (click)="rowClick.emit(row)">
+              @for (col of columns(); track col.key) {
+                <span class="DataTable__Cell" role="cell" [style.width]="col.width || null">
+                  {{ cell(row, col.key) }}
+                </span>
+              }
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.DataTable{display:flex;flex-direction:column;gap:4px;width:100%;overflow:auto}.DataTable__Head,.DataTable__Row{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;align-items:center;width:100%;min-width:0}.DataTable__Head{padding:8px;color:var(--color-fg-muted, #a3a3a3)}.DataTable__Body{display:flex;flex-direction:column;gap:4px}.DataTable__Row{padding:8px;border:none;border-radius:12px;background:var(--color-surface-muted, #f5f5f5);color:inherit;font:inherit;text-align:left;cursor:pointer}.DataTable__Row:hover{background:var(--color-surface-emphasis, #e5e5e5)}.DataTable__Row:active{transform:scale(.98)}.DataTable__Cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.DataTable__Cell--head{color:var(--color-fg-muted, #a3a3a3)}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "empty-state", inputs: ["title", "message", "icon", "primaryLabel", "primaryIcon", "secondaryLabel"], outputs: ["primary", "secondary"] }, { kind: "component", type: SkeletonComponent, selector: "skeleton", inputs: ["variant", "lines", "width", "height", "pulse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'data-table', standalone: true, imports: [EmptyStateComponent, SkeletonComponent], template: `
+    <div class="DataTable" role="table">
+      <div class="DataTable__Head" role="row" [style.grid-template-columns]="gridCols()">
+        @for (col of columns(); track col.key) {
+          <span class="DataTable__Cell DataTable__Cell--head" role="columnheader" [style.width]="col.width || null">
+            {{ col.label }}
+          </span>
+        }
+      </div>
+
+      @if (loading()) {
+        <div class="DataTable__Body">
+          @for (row of [0, 1, 2]; track row) {
+            <skeleton [lines]="1"></skeleton>
+          }
+        </div>
+      } @else if (!rows().length) {
+        <empty-state [title]="emptyTitle()" [message]="emptyMessage()" [icon]="emptyIcon()"></empty-state>
+      } @else {
+        <div class="DataTable__Body">
+          @for (row of rows(); track $index) {
+            <button type="button" class="DataTable__Row" role="row" [style.grid-template-columns]="gridCols()" (click)="rowClick.emit(row)">
+              @for (col of columns(); track col.key) {
+                <span class="DataTable__Cell" role="cell" [style.width]="col.width || null">
+                  {{ cell(row, col.key) }}
+                </span>
+              }
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.DataTable{display:flex;flex-direction:column;gap:4px;width:100%;overflow:auto}.DataTable__Head,.DataTable__Row{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;align-items:center;width:100%;min-width:0}.DataTable__Head{padding:8px;color:var(--color-fg-muted, #a3a3a3)}.DataTable__Body{display:flex;flex-direction:column;gap:4px}.DataTable__Row{padding:8px;border:none;border-radius:12px;background:var(--color-surface-muted, #f5f5f5);color:inherit;font:inherit;text-align:left;cursor:pointer}.DataTable__Row:hover{background:var(--color-surface-emphasis, #e5e5e5)}.DataTable__Row:active{transform:scale(.98)}.DataTable__Cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;color:var(--color-fg, #171717)}.DataTable__Cell--head{color:var(--color-fg-muted, #a3a3a3)}\n"] }]
+        }] });
+
+class AccordionItemComponent {
+    title = input.required();
+    icon = input(null);
+    disabled = input(false, { transform: booleanAttribute });
+    open = model(false);
+    group = inject(forwardRef(() => AccordionComponent), { optional: true, skipSelf: true });
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open.set(!this.open());
+        if (this.open())
+            this.group?.itemOpened(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AccordionItemComponent, isStandalone: true, selector: "accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: `
+    <div class="AccordionItem" [class.AccordionItem--open]="open()">
+      <button type="button" class="AccordionItem__Head" [disabled]="disabled()" (click)="toggle()">
+        @if (icon()) {
+          <lucide-icon [name]="icon()!" [size]="14"></lucide-icon>
+        }
+        <span class="AccordionItem__Title">{{ title() }}</span>
+        <lucide-icon name="chevron-down" [size]="14" class="AccordionItem__Chevron"></lucide-icon>
+      </button>
+      @if (open()) {
+        <div class="AccordionItem__Body">
+          <ng-content></ng-content>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.AccordionItem{display:flex;flex-direction:column;gap:4px;width:100%}.AccordionItem__Head{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:none;border-radius:12px;background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg, #171717);font:inherit;font-size:14px;font-weight:400;text-align:left;cursor:pointer}.AccordionItem__Head lucide-icon{--lucide-stroke: currentColor}.AccordionItem__Head:hover:not(:disabled){background:var(--color-surface-emphasis, #e5e5e5)}.AccordionItem__Head:disabled{opacity:.45;cursor:not-allowed}.AccordionItem__Title{flex:1;min-width:0}.AccordionItem__Chevron{flex-shrink:0;color:var(--color-fg-muted, #a3a3a3);transition:transform .18s ease}.AccordionItem--open .AccordionItem__Chevron{transform:rotate(180deg)}.AccordionItem__Body{display:flex;flex-direction:column;gap:4px;padding:4px 8px 8px;font-size:14px;color:var(--color-fg-secondary, #525252)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'accordion-item', standalone: true, imports: [LucideIconComponent], template: `
+    <div class="AccordionItem" [class.AccordionItem--open]="open()">
+      <button type="button" class="AccordionItem__Head" [disabled]="disabled()" (click)="toggle()">
+        @if (icon()) {
+          <lucide-icon [name]="icon()!" [size]="14"></lucide-icon>
+        }
+        <span class="AccordionItem__Title">{{ title() }}</span>
+        <lucide-icon name="chevron-down" [size]="14" class="AccordionItem__Chevron"></lucide-icon>
+      </button>
+      @if (open()) {
+        <div class="AccordionItem__Body">
+          <ng-content></ng-content>
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.AccordionItem{display:flex;flex-direction:column;gap:4px;width:100%}.AccordionItem__Head{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:none;border-radius:12px;background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg, #171717);font:inherit;font-size:14px;font-weight:400;text-align:left;cursor:pointer}.AccordionItem__Head lucide-icon{--lucide-stroke: currentColor}.AccordionItem__Head:hover:not(:disabled){background:var(--color-surface-emphasis, #e5e5e5)}.AccordionItem__Head:disabled{opacity:.45;cursor:not-allowed}.AccordionItem__Title{flex:1;min-width:0}.AccordionItem__Chevron{flex-shrink:0;color:var(--color-fg-muted, #a3a3a3);transition:transform .18s ease}.AccordionItem--open .AccordionItem__Chevron{transform:rotate(180deg)}.AccordionItem__Body{display:flex;flex-direction:column;gap:4px;padding:4px 8px 8px;font-size:14px;color:var(--color-fg-secondary, #525252)}\n"] }]
+        }] });
+
+class AccordionComponent {
+    multiple = input(false, { transform: booleanAttribute });
+    items = contentChildren(AccordionItemComponent);
+    itemOpened(opened) {
+        if (this.multiple())
+            return;
+        for (const item of this.items()) {
+            if (item !== opened)
+                item.open.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: AccordionComponent, isStandalone: true, selector: "accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: `
+    <div class="Accordion">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Accordion{display:flex;flex-direction:column;gap:4px;width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'accordion', standalone: true, template: `
+    <div class="Accordion">
+      <ng-content></ng-content>
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Accordion{display:flex;flex-direction:column;gap:4px;width:100%}\n"] }]
+        }] });
+
+class StepperComponent {
+    steps = input([]);
+    index = model(0);
+    clickable = input(false, { transform: booleanAttribute });
+    label = input('Pasos');
+    select(next) {
+        if (!this.clickable() || next === this.index())
+            return;
+        this.index.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: StepperComponent, isStandalone: true, selector: "stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, ngImport: i0, template: `
+    <ol class="Stepper" [attr.aria-label]="label()">
+      @for (step of steps(); track $index) {
+        <li
+          class="Stepper__Item"
+          [class.Stepper__Item--done]="$index < index()"
+          [class.Stepper__Item--current]="$index === index()"
+        >
+          <button
+            type="button"
+            class="Stepper__Btn"
+            [disabled]="!clickable() || $index === index()"
+            (click)="select($index)"
+          >
+            <span class="Stepper__Index">{{ $index + 1 }}</span>
+            <span class="Stepper__Text">
+              <span class="Stepper__Label">{{ step.label }}</span>
+              @if (step.description) {
+                <span class="Stepper__Desc">{{ step.description }}</span>
+              }
+            </span>
+          </button>
+        </li>
+      }
+    </ol>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Stepper{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}.Stepper__Item{flex:1;min-width:120px}.Stepper__Btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:none;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:default}.Stepper__Btn:not(:disabled){cursor:pointer}.Stepper__Btn:not(:disabled):hover{background:var(--color-surface-muted, #f5f5f5)}.Stepper__Index{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--color-surface-emphasis, #e5e5e5);color:var(--color-fg-muted, #a3a3a3);font-size:14px;font-weight:400}.Stepper__Item--done .Stepper__Index{background:color-mix(in srgb,var(--color-brand, #22c55e) 18%,var(--color-surface-muted, #f5f5f5));color:var(--color-fg-brand, #16a34a)}.Stepper__Item--current .Stepper__Index{background:var(--color-brand, #22c55e);color:var(--color-fg-inverse, #fafafa)}.Stepper__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.Stepper__Label,.Stepper__Desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400}.Stepper__Label{color:var(--color-fg-muted, #a3a3a3)}.Stepper__Item--done .Stepper__Label,.Stepper__Item--current .Stepper__Label{color:var(--color-fg, #171717)}.Stepper__Desc{color:var(--color-fg-muted, #a3a3a3)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stepper', standalone: true, template: `
+    <ol class="Stepper" [attr.aria-label]="label()">
+      @for (step of steps(); track $index) {
+        <li
+          class="Stepper__Item"
+          [class.Stepper__Item--done]="$index < index()"
+          [class.Stepper__Item--current]="$index === index()"
+        >
+          <button
+            type="button"
+            class="Stepper__Btn"
+            [disabled]="!clickable() || $index === index()"
+            (click)="select($index)"
+          >
+            <span class="Stepper__Index">{{ $index + 1 }}</span>
+            <span class="Stepper__Text">
+              <span class="Stepper__Label">{{ step.label }}</span>
+              @if (step.description) {
+                <span class="Stepper__Desc">{{ step.description }}</span>
+              }
+            </span>
+          </button>
+        </li>
+      }
+    </ol>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Stepper{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}.Stepper__Item{flex:1;min-width:120px}.Stepper__Btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:none;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:default}.Stepper__Btn:not(:disabled){cursor:pointer}.Stepper__Btn:not(:disabled):hover{background:var(--color-surface-muted, #f5f5f5)}.Stepper__Index{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--color-surface-emphasis, #e5e5e5);color:var(--color-fg-muted, #a3a3a3);font-size:14px;font-weight:400}.Stepper__Item--done .Stepper__Index{background:color-mix(in srgb,var(--color-brand, #22c55e) 18%,var(--color-surface-muted, #f5f5f5));color:var(--color-fg-brand, #16a34a)}.Stepper__Item--current .Stepper__Index{background:var(--color-brand, #22c55e);color:var(--color-fg-inverse, #fafafa)}.Stepper__Text{display:flex;flex-direction:column;gap:4px;min-width:0}.Stepper__Label,.Stepper__Desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400}.Stepper__Label{color:var(--color-fg-muted, #a3a3a3)}.Stepper__Item--done .Stepper__Label,.Stepper__Item--current .Stepper__Label{color:var(--color-fg, #171717)}.Stepper__Desc{color:var(--color-fg-muted, #a3a3a3)}\n"] }]
+        }] });
+
+class BreadcrumbsComponent {
+    items = input([]);
+    label = input('Ruta');
+    itemClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: BreadcrumbsComponent, isStandalone: true, selector: "breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    <nav class="Breadcrumbs" [attr.aria-label]="label()">
+      <ol class="Breadcrumbs__List">
+        @for (item of items(); track $index) {
+          @if ($index > 0) {
+            <li class="Breadcrumbs__Sep" aria-hidden="true">
+              <lucide-icon name="chevron-right" [size]="14"></lucide-icon>
+            </li>
+          }
+          <li class="Breadcrumbs__Item">
+            @if ($last) {
+              <span class="Breadcrumbs__Current">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="Breadcrumbs__Link" [routerLink]="item.routerLink" (click)="itemClick.emit(item)">{{ item.label }}</a>
+            } @else if (item.href) {
+              <a class="Breadcrumbs__Link" [href]="item.href" (click)="itemClick.emit(item)">{{ item.label }}</a>
+            } @else {
+              <button type="button" class="Breadcrumbs__Link" (click)="itemClick.emit(item)">{{ item.label }}</button>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Breadcrumbs__List{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}.Breadcrumbs__Sep{display:inline-flex;color:var(--color-fg-muted, #a3a3a3)}.Breadcrumbs__Sep lucide-icon{--lucide-stroke: currentColor}.Breadcrumbs__Link,.Breadcrumbs__Current{display:inline-flex;align-items:center;padding:2px 4px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-weight:400;text-decoration:none}.Breadcrumbs__Link{color:var(--color-fg-muted, #a3a3a3);cursor:pointer}.Breadcrumbs__Link:hover{color:var(--color-fg-brand, #16a34a)}.Breadcrumbs__Current{color:var(--color-fg, #171717)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'breadcrumbs', standalone: true, imports: [LucideIconComponent, RouterLink], template: `
+    <nav class="Breadcrumbs" [attr.aria-label]="label()">
+      <ol class="Breadcrumbs__List">
+        @for (item of items(); track $index) {
+          @if ($index > 0) {
+            <li class="Breadcrumbs__Sep" aria-hidden="true">
+              <lucide-icon name="chevron-right" [size]="14"></lucide-icon>
+            </li>
+          }
+          <li class="Breadcrumbs__Item">
+            @if ($last) {
+              <span class="Breadcrumbs__Current">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="Breadcrumbs__Link" [routerLink]="item.routerLink" (click)="itemClick.emit(item)">{{ item.label }}</a>
+            } @else if (item.href) {
+              <a class="Breadcrumbs__Link" [href]="item.href" (click)="itemClick.emit(item)">{{ item.label }}</a>
+            } @else {
+              <button type="button" class="Breadcrumbs__Link" (click)="itemClick.emit(item)">{{ item.label }}</button>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Breadcrumbs__List{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}.Breadcrumbs__Sep{display:inline-flex;color:var(--color-fg-muted, #a3a3a3)}.Breadcrumbs__Sep lucide-icon{--lucide-stroke: currentColor}.Breadcrumbs__Link,.Breadcrumbs__Current{display:inline-flex;align-items:center;padding:2px 4px;border:none;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-weight:400;text-decoration:none}.Breadcrumbs__Link{color:var(--color-fg-muted, #a3a3a3);cursor:pointer}.Breadcrumbs__Link:hover{color:var(--color-fg-brand, #16a34a)}.Breadcrumbs__Current{color:var(--color-fg, #171717)}\n"] }]
+        }] });
+
+class TabsComponent {
+    items = input([]);
+    value = model('');
+    label = input('Secciones');
+    disabled = input(false, { transform: booleanAttribute });
+    select(item) {
+        if (item.disabled || this.disabled() || item.value === this.value())
+            return;
+        this.value.set(item.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TabsComponent, isStandalone: true, selector: "tabs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    <div class="Tabs">
+      <div class="Tabs__Bar" role="tablist" [attr.aria-label]="label()">
+        @for (item of items(); track item.value) {
+          <button
+            type="button"
+            class="Tabs__Tab"
+            role="tab"
+            [class.Tabs__Tab--on]="item.value === value()"
+            [disabled]="item.disabled === true || disabled()"
+            [attr.aria-selected]="item.value === value()"
+            (click)="select(item)"
+          >
+            @if (item.icon) {
+              <lucide-icon [name]="item.icon" [size]="14"></lucide-icon>
+            }
+            <span>{{ item.label }}</span>
+          </button>
+        }
+      </div>
+      <div class="Tabs__Panel" role="tabpanel">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Tabs{display:flex;flex-direction:column;gap:8px;width:100%}.Tabs__Bar{display:flex;flex-wrap:wrap;gap:4px}.Tabs__Tab{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:none;border-radius:12px;background:transparent;color:var(--color-fg-muted, #a3a3a3);font:inherit;font-size:14px;font-weight:400;cursor:pointer}.Tabs__Tab lucide-icon{--lucide-stroke: currentColor}.Tabs__Tab:hover:not(:disabled):not(.Tabs__Tab--on){background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg, #171717)}.Tabs__Tab--on{background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg-brand, #16a34a)}.Tabs__Tab:disabled{opacity:.45;cursor:not-allowed}.Tabs__Panel{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:14px;color:var(--color-fg-secondary, #525252)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tabs', standalone: true, imports: [LucideIconComponent], template: `
+    <div class="Tabs">
+      <div class="Tabs__Bar" role="tablist" [attr.aria-label]="label()">
+        @for (item of items(); track item.value) {
+          <button
+            type="button"
+            class="Tabs__Tab"
+            role="tab"
+            [class.Tabs__Tab--on]="item.value === value()"
+            [disabled]="item.disabled === true || disabled()"
+            [attr.aria-selected]="item.value === value()"
+            (click)="select(item)"
+          >
+            @if (item.icon) {
+              <lucide-icon [name]="item.icon" [size]="14"></lucide-icon>
+            }
+            <span>{{ item.label }}</span>
+          </button>
+        }
+      </div>
+      <div class="Tabs__Panel" role="tabpanel">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Tabs{display:flex;flex-direction:column;gap:8px;width:100%}.Tabs__Bar{display:flex;flex-wrap:wrap;gap:4px}.Tabs__Tab{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:none;border-radius:12px;background:transparent;color:var(--color-fg-muted, #a3a3a3);font:inherit;font-size:14px;font-weight:400;cursor:pointer}.Tabs__Tab lucide-icon{--lucide-stroke: currentColor}.Tabs__Tab:hover:not(:disabled):not(.Tabs__Tab--on){background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg, #171717)}.Tabs__Tab--on{background:var(--color-surface-muted, #f5f5f5);color:var(--color-fg-brand, #16a34a)}.Tabs__Tab:disabled{opacity:.45;cursor:not-allowed}.Tabs__Panel{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:14px;color:var(--color-fg-secondary, #525252)}\n"] }]
+        }] });
+
+class NoticeComponent {
+    tone = input('info');
+    title = input(null);
+    message = input(null);
+    icon = input(null);
+    resolvedIcon() {
+        if (this.icon())
+            return this.icon();
+        switch (this.tone()) {
+            case 'success':
+                return 'check-circle';
+            case 'warning':
+                return 'triangle-alert';
+            case 'danger':
+                return 'circle-alert';
+            default:
+                return 'info';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: NoticeComponent, isStandalone: true, selector: "notice", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="Notice"
+      [class.Notice--info]="tone() === 'info'"
+      [class.Notice--success]="tone() === 'success'"
+      [class.Notice--warning]="tone() === 'warning'"
+      [class.Notice--danger]="tone() === 'danger'"
+      role="status"
+    >
+      <span class="Notice__Icon">
+        <lucide-icon [name]="resolvedIcon()" [size]="14"></lucide-icon>
+      </span>
+      <div class="Notice__Body">
+        @if (title()) {
+          <p class="Notice__Title">{{ title() }}</p>
+        }
+        @if (message()) {
+          <p class="Notice__Message">{{ message() }}</p>
+        }
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Notice{display:flex;align-items:flex-start;gap:8px;width:100%;padding:8px;border-radius:12px;font-size:14px;font-weight:400}.Notice lucide-icon{--lucide-stroke: currentColor}.Notice--info{background:color-mix(in srgb,var(--color-info-bg, #eff6ff) 88%,var(--color-surface, #ffffff));color:var(--color-info-fg, #2563eb)}.Notice--success{background:color-mix(in srgb,var(--color-success-bg, #f0fdf4) 88%,var(--color-surface, #ffffff));color:var(--color-success-fg, #16a34a)}.Notice--warning{background:color-mix(in srgb,var(--color-warning-bg, #fffbeb) 88%,var(--color-surface, #ffffff));color:var(--color-warning-fg, #d97706)}.Notice--danger{background:color-mix(in srgb,var(--color-danger-bg, #fef2f2) 88%,var(--color-surface, #ffffff));color:var(--color-danger-fg, #dc2626)}.Notice__Icon{display:inline-flex;flex-shrink:0;margin-top:2px}.Notice__Body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.Notice__Title,.Notice__Message{margin:0;font-size:14px;font-weight:400}.Notice__Title{color:inherit}.Notice__Message{color:var(--color-fg-secondary, #525252)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'notice', standalone: true, imports: [LucideIconComponent], template: `
+    <div
+      class="Notice"
+      [class.Notice--info]="tone() === 'info'"
+      [class.Notice--success]="tone() === 'success'"
+      [class.Notice--warning]="tone() === 'warning'"
+      [class.Notice--danger]="tone() === 'danger'"
+      role="status"
+    >
+      <span class="Notice__Icon">
+        <lucide-icon [name]="resolvedIcon()" [size]="14"></lucide-icon>
+      </span>
+      <div class="Notice__Body">
+        @if (title()) {
+          <p class="Notice__Title">{{ title() }}</p>
+        }
+        @if (message()) {
+          <p class="Notice__Message">{{ message() }}</p>
+        }
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;user-select:none;-webkit-user-select:none}.Notice{display:flex;align-items:flex-start;gap:8px;width:100%;padding:8px;border-radius:12px;font-size:14px;font-weight:400}.Notice lucide-icon{--lucide-stroke: currentColor}.Notice--info{background:color-mix(in srgb,var(--color-info-bg, #eff6ff) 88%,var(--color-surface, #ffffff));color:var(--color-info-fg, #2563eb)}.Notice--success{background:color-mix(in srgb,var(--color-success-bg, #f0fdf4) 88%,var(--color-surface, #ffffff));color:var(--color-success-fg, #16a34a)}.Notice--warning{background:color-mix(in srgb,var(--color-warning-bg, #fffbeb) 88%,var(--color-surface, #ffffff));color:var(--color-warning-fg, #d97706)}.Notice--danger{background:color-mix(in srgb,var(--color-danger-bg, #fef2f2) 88%,var(--color-surface, #ffffff));color:var(--color-danger-fg, #dc2626)}.Notice__Icon{display:inline-flex;flex-shrink:0;margin-top:2px}.Notice__Body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.Notice__Title,.Notice__Message{margin:0;font-size:14px;font-weight:400}.Notice__Title{color:inherit}.Notice__Message{color:var(--color-fg-secondary, #525252)}\n"] }]
         }] });
 
 /*
@@ -368,5 +1026,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EmptyStateComponent, KeyValueListComponent, LoadErrorComponent, SectionHeaderComponent, SmartPaginationComponent };
+export { AccordionComponent, AccordionItemComponent, AvatarComponent, BreadcrumbsComponent, DataTableComponent, EmptyStateComponent, KeyValueListComponent, ListRowComponent, LoadErrorComponent, NoticeComponent, SectionHeaderComponent, SkeletonComponent, SmartPaginationComponent, StepperComponent, SurfaceCardComponent, TabsComponent };
 //# sourceMappingURL=xosue-utils-helpers.mjs.map