@kaufmann-lab/ui 0.1.24 → 0.1.26

package/fesm2022/kaufmann-lab-ui-core.mjs

@@ -1004,6 +1004,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * títulos protagonistas de pantalla completa (ej. bienvenida del home vía
  * `kf-page-header[size=xl|xxl]`) — ver tokens/base.css.
  *
+ * `body-sm`/`body-sm-muted` son el paso intermedio entre `body` (1rem) y
+ * `caption` (0.75rem): 0.875rem (`--kf-font-size-body-sm`), para texto de
+ * apoyo en filas y paneles densos. Mismo criterio de color que `body`/
+ * `body-muted`: `body-sm` hereda el color de texto y `body-sm-muted` usa el
+ * atenuado.
+ *
  * `overline`/`overline-strong` son para el patrón "texto chico en mayúsculas
  * junto a un dato" (ej. el label "RUC" de `kf-company-selector`, el badge de
  * `kf-admin-badge`) — antes de estas variantes, ese patrón se reimplementaba
@@ -1015,6 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *
  *   <kf-text as="h1" variant="title-lg">Bienvenido de nuevo</kf-text>
  *   <kf-text as="p" variant="body-muted">Ingresá con tu cuenta corporativa.</kf-text>
+ *   <kf-text as="span" variant="body-sm">Última actualización hace 5 min</kf-text>
  *   <kf-text as="span" variant="caption" tone="error">Campo obligatorio</kf-text>
  *   <kf-text as="span" variant="overline">RUC</kf-text>
  *   <kf-text as="span" variant="overline-strong" tone="warn">Vista administrador</kf-text>
@@ -1052,11 +1059,11 @@ class Text {
         return classes.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Text, isStandalone: true, selector: "kf-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n  de un <ng-content> por cada rama del @switch: Angular solo conecta la\n  proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n  que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n  rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n  Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n  @case ('h1') {\n    <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n  }\n  @case ('span') {\n    <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n  }\n  @default {\n    <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n  }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Text, isStandalone: true, selector: "kf-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n  de un <ng-content> por cada rama del @switch: Angular solo conecta la\n  proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n  que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n  rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n  Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n  @case ('h1') {\n    <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n  }\n  @case ('span') {\n    <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n  }\n  @default {\n    <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n  }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--body-sm{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body)}.kf-text--body-sm-muted{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-text', imports: [NgTemplateOutlet], template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n  de un <ng-content> por cada rama del @switch: Angular solo conecta la\n  proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n  que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n  rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n  Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n  @case ('h1') {\n    <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n  }\n  @case ('span') {\n    <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n  }\n  @default {\n    <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n  }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"] }]
+            args: [{ selector: 'kf-text', imports: [NgTemplateOutlet], template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n  de un <ng-content> por cada rama del @switch: Angular solo conecta la\n  proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n  que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n  rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n  Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n  @case ('h1') {\n    <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n  }\n  @case ('span') {\n    <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n  }\n  @default {\n    <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n  }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--body-sm{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body)}.kf-text--body-sm-muted{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"] }]
         }], propDecorators: { as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
 
 /**
@@ -2897,6 +2904,28 @@ const TYPEAHEAD_RESET_MS = 500;
  *              panelTitle="Ordenar por" panelWidth="content"
  *              [options]="sortOptions" [value]="sort()" (valueChange)="sort.set($event)" />
  *
+ * `width="fit"` ajusta el ancho al contenido: mide la opción más larga (y el
+ * placeholder) con la tipografía real y no cambia al elegir otra, hasta un
+ * tope de `--kf-select-fit-max-width` (20rem por defecto; lo que no entra se
+ * trunca con elipsis). Pensado para selects en barras de herramientas o
+ * encabezados donde un ancho fijo deja espacio vacío. La medición se hace
+ * con una pasada invisible de todas las opciones, así que conviene para
+ * listas cortas o medianas; con cientos de opciones usar un ancho fijo. Si
+ * alguna opción trae `tag`, también se reserva el hueco del tag más ancho,
+ * por lo que elegir una opción con tag tampoco cambia el ancho. Conviene
+ * combinarlo con `panelWidth="content"`: con el default (`"trigger"`) el panel
+ * mide lo mismo que el trigger y las opciones, que suman su propio padding
+ * (y su tag, si lo traen), pueden quedar truncadas.
+ *
+ *   <kf-select width="fit" label="División" hideLabel [options]="divisions" [value]="division()" (valueChange)="..." />
+ *
+ * `size="sm"` fija la altura del trigger en 32px (`--kf-select-min-height`)
+ * para filas de filtros densas, sin tocar el padding horizontal ni el
+ * `variant`. El default (`'md'`) no cambia nada. Para otra altura puntual,
+ * declarar `--kf-select-min-height` en el propio `kf-select`.
+ *
+ *   <kf-select size="sm" width="fit" [options]="ranges" [value]="range()" (valueChange)="..." />
+ *
  * Teclado (patrón listbox de WAI-ARIA): ArrowDown/ArrowUp sobre el trigger
  * cerrado lo abren; al abrir, el foco pasa a la opción seleccionada (o al
  * buscador, si está visible). En el panel, flechas y Home/End mueven el
@@ -2944,9 +2973,16 @@ class Select {
      * comportamiento actual sin cambios para consumidores existentes.
      * 'full' ocupa el 100% del contenedor — para selects dentro de layouts
      * flex/grid donde el ancho fijo no encaja (ej. un footer de sidebar).
+     * 'fit' mide el contenido (opción más larga) con un tope.
      */
     width = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Altura del trigger. 'md' (default) conserva la altura histórica; 'sm'
+     * la fija en 32px para barras de filtros densas.
+     */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
      * se activa solo cuando `options().length` supera `searchThreshold()`. Si
@@ -3016,6 +3052,27 @@ class Select {
         return `${name}: ${this.triggerText()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Textos que `width="fit"` mide para dimensionar el trigger: el de cada
+     * opción tal como se vería en el trigger (`shortLabel` o `label`) y el
+     * placeholder. Sin repetidos.
+     */
+    fitTexts = computed(() => {
+        if (this.width() !== 'fit') {
+            return [];
+        }
+        const texts = this.normalizedOptions().map((option) => option.shortLabel ?? option.label);
+        return [...new Set([...texts, this.placeholder()])];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fitTexts" }] : /* istanbul ignore next */ []));
+    /** Tags distintos de las opciones, para reservar el hueco del más ancho con `width="fit"`. */
+    fitTags = computed(() => {
+        if (this.width() !== 'fit') {
+            return [];
+        }
+        return [...new Set(this.normalizedOptions().flatMap((option) => option.tag ?? []))];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fitTags" }] : /* istanbul ignore next */ []));
     showSearch = computed(() => this.searchable() ?? this.normalizedOptions().length > this.searchThreshold(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
     /** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
@@ -3331,7 +3388,7 @@ class Select {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span class=\"kf-select__value\" [class.kf-select__value--placeholder]=\"!selectedOption()\">\n    {{ triggerText() }}\n  </span>\n  @if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'", "class.kf-select--width-fit": "width() === 'fit'", "class.kf-select--size-sm": "size() === 'sm'" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span\n    class=\"kf-select__value\"\n    [class.kf-select__value--placeholder]=\"!selectedOption()\"\n    [class.kf-select__value--fit]=\"width() === 'fit'\"\n  >\n    @if (width() === 'fit') {\n      <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n      <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n        \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n      <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n        @for (text of fitTexts(); track text) {\n          <span>{{ text }}</span>\n        }\n      </span>\n    } @else {\n      {{ triggerText() }}\n    }\n  </span>\n  @if (width() === 'fit' && fitTags().length) {\n    <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n      dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n    <span class=\"kf-select__tag-slot\">\n      @for (tag of fitTags(); track tag) {\n        <kf-badge\n          class=\"kf-select__tag\"\n          [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n          [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n          >{{ tag }}</kf-badge\n        >\n      }\n    </span>\n  } @else if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -3340,8 +3397,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.kf-select--width-sm]': "width() === 'sm'",
                         '[class.kf-select--width-lg]': "width() === 'lg'",
                         '[class.kf-select--width-full]': "width() === 'full'",
-                    }, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span class=\"kf-select__value\" [class.kf-select__value--placeholder]=\"!selectedOption()\">\n    {{ triggerText() }}\n  </span>\n  @if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+                        '[class.kf-select--width-fit]': "width() === 'fit'",
+                        '[class.kf-select--size-sm]': "size() === 'sm'",
+                    }, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  @if (prefix(); as prefixText) {\n    <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n  }\n  <span\n    class=\"kf-select__value\"\n    [class.kf-select__value--placeholder]=\"!selectedOption()\"\n    [class.kf-select__value--fit]=\"width() === 'fit'\"\n  >\n    @if (width() === 'fit') {\n      <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n      <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n        \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n      <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n        @for (text of fitTexts(); track text) {\n          <span>{{ text }}</span>\n        }\n      </span>\n    } @else {\n      {{ triggerText() }}\n    }\n  </span>\n  @if (width() === 'fit' && fitTags().length) {\n    <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n      dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n    <span class=\"kf-select__tag-slot\">\n      @for (tag of fitTags(); track tag) {\n        <kf-badge\n          class=\"kf-select__tag\"\n          [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n          [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n          >{{ tag }}</kf-badge\n        >\n      }\n    </span>\n  } @else if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 const SIBLINGS = 1;
 /**
@@ -3415,7 +3474,7 @@ class Pagination {
         this.pageChange.emit(clamped);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Pagination, isStandalone: true, selector: "kf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-pagination\">\n  <div class=\"kf-pagination__info kf-caption-text\" aria-live=\"polite\">\n    <ng-content />\n  </div>\n\n  <div class=\"kf-pagination__controls\">\n    @if (pageSizeOptions().length > 0) {\n      <div class=\"kf-pagination__size\">\n        <span class=\"kf-pagination__size-label kf-caption-text\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          ariaLabel=\"Filas por p\u00E1gina\"\n          [options]=\"pageSizeSelectOptions()\"\n          [value]=\"pageSizeValue()\"\n          (valueChange)=\"setPageSize($event)\"\n        />\n      </div>\n      @if (hasNav()) {\n        <div class=\"kf-pagination__divider\" aria-hidden=\"true\"></div>\n      }\n    }\n\n    @if (hasNav()) {\n      <nav class=\"kf-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() <= 1\"\n          aria-label=\"P\u00E1gina anterior\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          \u2039\n        </button>\n\n        @for (item of items(); track $index) {\n          @if (item.type === 'page') {\n            <button\n              type=\"button\"\n              class=\"kf-pagination__page\"\n              [class.kf-pagination__page--active]=\"item.page === page()\"\n              [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n              [attr.aria-label]=\"'Ir a la p\u00E1gina ' + item.page\"\n              (click)=\"goTo(item.page)\"\n            >\n              {{ item.page }}\n            </button>\n          } @else {\n            <span class=\"kf-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n          }\n        }\n\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() >= pages()\"\n          aria-label=\"P\u00E1gina siguiente\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          \u203A\n        </button>\n      </nav>\n    }\n  </div>\n</div>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:block;font-family:var(--kf-font-body)}.kf-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);flex-wrap:wrap}.kf-pagination__info:empty{display:none}.kf-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-pagination__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-pagination__size-label{white-space:nowrap}.kf-pagination__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-pagination__nav{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-pagination__control,.kf-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--kf-space-xs);font:inherit;font-size:.85rem;color:var(--kf-color-text);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-pagination__control:hover:not(:disabled),.kf-pagination__page:hover:not(.kf-pagination__page--active){background:var(--kf-color-surface);border-color:var(--kf-color-border-strong)}.kf-pagination__control:focus-visible,.kf-pagination__page:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-pagination__control:disabled{opacity:.5;cursor:not-allowed}.kf-pagination__page--active{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary);cursor:default}.kf-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--kf-color-text-muted)}@media(max-width:480px){.kf-pagination__controls{width:100%}.kf-pagination__divider{display:none}}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Pagination, isStandalone: true, selector: "kf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-pagination\">\n  <div class=\"kf-pagination__info kf-caption-text\" aria-live=\"polite\">\n    <ng-content />\n  </div>\n\n  <div class=\"kf-pagination__controls\">\n    @if (pageSizeOptions().length > 0) {\n      <div class=\"kf-pagination__size\">\n        <span class=\"kf-pagination__size-label kf-caption-text\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          ariaLabel=\"Filas por p\u00E1gina\"\n          [options]=\"pageSizeSelectOptions()\"\n          [value]=\"pageSizeValue()\"\n          (valueChange)=\"setPageSize($event)\"\n        />\n      </div>\n      @if (hasNav()) {\n        <div class=\"kf-pagination__divider\" aria-hidden=\"true\"></div>\n      }\n    }\n\n    @if (hasNav()) {\n      <nav class=\"kf-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() <= 1\"\n          aria-label=\"P\u00E1gina anterior\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          \u2039\n        </button>\n\n        @for (item of items(); track $index) {\n          @if (item.type === 'page') {\n            <button\n              type=\"button\"\n              class=\"kf-pagination__page\"\n              [class.kf-pagination__page--active]=\"item.page === page()\"\n              [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n              [attr.aria-label]=\"'Ir a la p\u00E1gina ' + item.page\"\n              (click)=\"goTo(item.page)\"\n            >\n              {{ item.page }}\n            </button>\n          } @else {\n            <span class=\"kf-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n          }\n        }\n\n        <button\n          type=\"button\"\n          class=\"kf-pagination__control\"\n          [disabled]=\"page() >= pages()\"\n          aria-label=\"P\u00E1gina siguiente\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          \u203A\n        </button>\n      </nav>\n    }\n  </div>\n</div>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:block;font-family:var(--kf-font-body)}.kf-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);flex-wrap:wrap}.kf-pagination__info:empty{display:none}.kf-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-pagination__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-pagination__size-label{white-space:nowrap}.kf-pagination__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-pagination__nav{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-pagination__control,.kf-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--kf-space-xs);font:inherit;font-size:.85rem;color:var(--kf-color-text);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-pagination__control:hover:not(:disabled),.kf-pagination__page:hover:not(.kf-pagination__page--active){background:var(--kf-color-surface);border-color:var(--kf-color-border-strong)}.kf-pagination__control:focus-visible,.kf-pagination__page:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-pagination__control:disabled{opacity:.5;cursor:not-allowed}.kf-pagination__page--active{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary);cursor:default}.kf-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--kf-color-text-muted)}@media(max-width:480px){.kf-pagination__controls{width:100%}.kf-pagination__divider{display:none}}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Pagination, decorators: [{
             type: Component,
@@ -4895,7 +4954,7 @@ class CursorPager {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CursorPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CursorPager, isStandalone: true, selector: "kf-cursor-pager", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, hasPrevious: { classPropertyName: "hasPrevious", publicName: "hasPrevious", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-cursor-pager\">\n  <div class=\"kf-cursor-pager__summary\" role=\"status\" aria-live=\"polite\">{{ summary() }}</div>\n\n  <div class=\"kf-cursor-pager__controls\">\n    @if (sizeOptions().length > 0) {\n      <div class=\"kf-cursor-pager__size\">\n        <span class=\"kf-cursor-pager__size-label\" aria-hidden=\"true\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          label=\"Filas por p\u00E1gina\"\n          hideLabel\n          [options]=\"sizeOptions()\"\n          [value]=\"sizeValue()\"\n          (valueChange)=\"onPageSize($event)\"\n        />\n      </div>\n      <span class=\"kf-cursor-pager__divider\" aria-hidden=\"true\"></span>\n    }\n\n    <nav class=\"kf-cursor-pager__nav\" [attr.aria-label]=\"ariaLabel()\">\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button\"\n        [attr.aria-disabled]=\"!hasPrevious()\"\n        (click)=\"onPrevious()\"\n      >\n        <kf-icon name=\"chevron-left\" size=\"sm\" />\n        Anterior\n      </button>\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button kf-cursor-pager__button--next\"\n        [attr.aria-disabled]=\"!hasNext()\"\n        (click)=\"onNext()\"\n      >\n        Siguiente\n        <kf-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n    </nav>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-cursor-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kf-space-md)}.kf-cursor-pager__summary{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text)}.kf-cursor-pager__summary:empty{display:none}.kf-cursor-pager__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-cursor-pager__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__size-label{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text);white-space:nowrap}.kf-cursor-pager__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-cursor-pager__nav{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:32px;padding:0 var(--kf-space-sm);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);cursor:pointer}.kf-cursor-pager__button:hover:not([aria-disabled=true]){background:var(--kf-color-white);border-color:var(--kf-color-text-muted)}.kf-cursor-pager__button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-cursor-pager__button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:599.98px){.kf-cursor-pager__controls{width:100%}.kf-cursor-pager__divider{display:none}.kf-cursor-pager__nav{width:100%}.kf-cursor-pager__button{flex:1 1 0;min-height:36px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CursorPager, isStandalone: true, selector: "kf-cursor-pager", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, hasPrevious: { classPropertyName: "hasPrevious", publicName: "hasPrevious", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-cursor-pager\">\n  <div class=\"kf-cursor-pager__summary\" role=\"status\" aria-live=\"polite\">{{ summary() }}</div>\n\n  <div class=\"kf-cursor-pager__controls\">\n    @if (sizeOptions().length > 0) {\n      <div class=\"kf-cursor-pager__size\">\n        <span class=\"kf-cursor-pager__size-label\" aria-hidden=\"true\">Filas</span>\n        <kf-select\n          variant=\"compact\"\n          label=\"Filas por p\u00E1gina\"\n          hideLabel\n          [options]=\"sizeOptions()\"\n          [value]=\"sizeValue()\"\n          (valueChange)=\"onPageSize($event)\"\n        />\n      </div>\n      <span class=\"kf-cursor-pager__divider\" aria-hidden=\"true\"></span>\n    }\n\n    <nav class=\"kf-cursor-pager__nav\" [attr.aria-label]=\"ariaLabel()\">\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button\"\n        [attr.aria-disabled]=\"!hasPrevious()\"\n        (click)=\"onPrevious()\"\n      >\n        <kf-icon name=\"chevron-left\" size=\"sm\" />\n        Anterior\n      </button>\n      <button\n        type=\"button\"\n        class=\"kf-cursor-pager__button kf-cursor-pager__button--next\"\n        [attr.aria-disabled]=\"!hasNext()\"\n        (click)=\"onNext()\"\n      >\n        Siguiente\n        <kf-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n    </nav>\n  </div>\n</div>\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-cursor-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kf-space-md)}.kf-cursor-pager__summary{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text)}.kf-cursor-pager__summary:empty{display:none}.kf-cursor-pager__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-cursor-pager__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__size-label{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text);white-space:nowrap}.kf-cursor-pager__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-cursor-pager__nav{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:32px;padding:0 var(--kf-space-sm);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);cursor:pointer}.kf-cursor-pager__button:hover:not([aria-disabled=true]){background:var(--kf-color-white);border-color:var(--kf-color-text-muted)}.kf-cursor-pager__button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-cursor-pager__button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:599.98px){.kf-cursor-pager__controls{width:100%}.kf-cursor-pager__divider{display:none}.kf-cursor-pager__nav{width:100%}.kf-cursor-pager__button{flex:1 1 0;min-height:36px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CursorPager, decorators: [{
             type: Component,
@@ -6245,7 +6304,7 @@ class Filter {
         this.fieldChange.emit({ key, value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n  @for (field of fields(); track field.key) {\n    @switch (field.type) {\n      @case ('select') {\n        <kf-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"optionsFor(field.key)\"\n          [value]=\"singleValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valueChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('multi-select') {\n        <kf-multi-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"multiOptionsFor(field.key)\"\n          [values]=\"multiValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valuesChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('search') {\n        <kf-input\n          [label]=\"field.label ?? ''\"\n          [icon]=\"field.icon ?? 'search'\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          [ngModel]=\"singleValueFor(field.key)\"\n          (ngModelChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n    }\n    @if (!stacked && field.showDivider) {\n      <kf-divider orientation=\"vertical\" />\n    }\n  }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n  <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n  <div class=\"kf-filter kf-filter--stack\">\n    <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n  </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "hideLabel", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n  @for (field of fields(); track field.key) {\n    @switch (field.type) {\n      @case ('select') {\n        <kf-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"optionsFor(field.key)\"\n          [value]=\"singleValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valueChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('multi-select') {\n        <kf-multi-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"multiOptionsFor(field.key)\"\n          [values]=\"multiValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valuesChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('search') {\n        <kf-input\n          [label]=\"field.label ?? ''\"\n          [icon]=\"field.icon ?? 'search'\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          [ngModel]=\"singleValueFor(field.key)\"\n          (ngModelChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n    }\n    @if (!stacked && field.showDivider) {\n      <kf-divider orientation=\"vertical\" />\n    }\n  }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n  <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n  <div class=\"kf-filter kf-filter--stack\">\n    <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n  </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "hideLabel", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, decorators: [{
             type: Component,
@@ -7233,6 +7292,22 @@ const FOCUSABLE = 'input:not([disabled]), select:not([disabled]), textarea:not([
  *   <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
  *   <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
  *
+ * ## Ancho: `size` y `width`
+ * `size` (`'sm'` 480px, `'md'` 640px, `'lg'` 880px, `'xl'` 1120px) elige un
+ * ancho con nombre; sin `size` ni `width` el ancho es el histórico de 480px.
+ * `width` sigue aceptando cualquier valor CSS y, si se pasa, manda sobre
+ * `size`. En pantallas angostas el panel nunca supera el ancho del viewport.
+ *
+ *   <kf-modal [(open)]="open" title="Nuevo ticket" size="xl">…</kf-modal>
+ *
+ * ## Separadores: `dividers`
+ * Con `dividers` el encabezado y el footer quedan separados del cuerpo por
+ * una línea (`--kf-color-border`); el del footer solo aparece si hay
+ * acciones. Sirve cuando el cuerpo se desplaza (`maxHeight`) y su contenido
+ * no debe cortarse contra los botones. Sin `dividers` no cambia nada.
+ *
+ *   <kf-modal [(open)]="open" title="Nuevo ticket" size="lg" dividers maxHeight="85vh">…</kf-modal>
+ *
  * ## Modal de listado (alto acotado, filtros fijos)
  * Para un diálogo con mucho contenido (ej. elegir un ítem entre cientos):
  * - `maxHeight` (ej. `"85vh"`) acota el panel; solo `.kf-modal__body` se
@@ -7268,6 +7343,11 @@ class Modal {
      *  angostas, mismo `min()` de siempre. */
     width = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Ancho con nombre sobre `--kf-modal-width`; `width` lo pisa si ambos están. */
+    size = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Línea bajo el encabezado y sobre el footer (si tiene acciones). */
+    dividers = input(false, { ...(ngDevMode ? { debugName: "dividers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Alto máximo del panel (ej. `"85vh"`); con valor, solo el cuerpo se
      *  desplaza. Sin valor (default) el panel crece con su contenido. */
     maxHeight = input(null, /* @ts-ignore */
@@ -7376,12 +7456,12 @@ class Modal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Modal, isStandalone: true, selector: "kf-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenOnMobile: { classPropertyName: "fullscreenOnMobile", publicName: "fullscreenOnMobile", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Modal, isStandalone: true, selector: "kf-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenOnMobile: { classPropertyName: "fullscreenOnMobile", publicName: "fullscreenOnMobile", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [class.kf-modal--dividers]=\"dividers()\"\n  [attr.data-size]=\"size()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Modal, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-modal', imports: [Icon], template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fullscreenOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenOnMobile", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onHostClick: [{
+            args: [{ selector: 'kf-modal', imports: [Icon], template: "<dialog\n  #dialog\n  class=\"kf-modal\"\n  [class.kf-modal--bounded]=\"!!maxHeight()\"\n  [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n  [class.kf-modal--dividers]=\"dividers()\"\n  [attr.data-size]=\"size()\"\n  [style.--kf-modal-width]=\"width()\"\n  [style.--kf-modal-max-height]=\"maxHeight()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div #panel class=\"kf-modal__panel\">\n      <div class=\"kf-modal__head\">\n        <div class=\"kf-modal__heading\">\n          @if (title()) {\n            <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n          }\n          <ng-content select=\"[kf-modal-meta]\" />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            class=\"kf-modal__close\"\n            aria-label=\"Cerrar di\u00E1logo\"\n            (click)=\"open.set(false)\"\n          >\n            <kf-icon name=\"x\" size=\"sm\" />\n          </button>\n        }\n      </div>\n      <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n      <div class=\"kf-modal__body\"><ng-content /></div>\n      <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fullscreenOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenOnMobile", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onHostClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -8166,6 +8246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *     userInitials="TS"
  *     userName="Tomás Soto"
  *     [showCart]="true"
+ *     [cartCount]="3"
  *     (cartClick)="onCartClick()"
  *   >
  *     <kf-drawer-session
@@ -8204,8 +8285,23 @@ class PortalHeader {
     userName = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
     showCart = input(false, { ...(ngDevMode ? { debugName: "showCart" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Cantidad de ítems en el carrito. Con 0 (default) no se muestra el
+     * contador; sobre 99 se muestra "99+". */
+    cartCount = input(0, { ...(ngDevMode ? { debugName: "cartCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     sessionClick = output();
     cartClick = output();
+    cartCountLabel = computed(() => {
+        const count = this.cartCount();
+        return count > 99 ? '99+' : String(count);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cartCountLabel" }] : /* istanbul ignore next */ []));
+    cartAriaLabel = computed(() => {
+        const count = this.cartCount();
+        if (count <= 0)
+            return 'Carrito de compras';
+        return `Carrito de compras, ${count} ${count === 1 ? 'elemento' : 'elementos'}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cartAriaLabel" }] : /* istanbul ignore next */ []));
     /** Visibilidad del drawer de navegación mobile (bajo los 768px). Se pasa a
      * `kf-drawer` como `[(open)]` — `PortalHeader` ya no implementa overlay,
      * `Escape` ni atrapado de foco por su cuenta, eso vive en `Drawer`. */
@@ -8265,12 +8361,12 @@ class PortalHeader {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PortalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PortalHeader, isStandalone: true, selector: "kf-portal-header", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, adminActions: { classPropertyName: "adminActions", publicName: "adminActions", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, userInitials: { classPropertyName: "userInitials", publicName: "userInitials", isSignal: true, isRequired: true, transformFunction: null }, tagline: { classPropertyName: "tagline", publicName: "tagline", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, showCart: { classPropertyName: "showCart", publicName: "showCart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sessionClick: "sessionClick", cartClick: "cartClick" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "sessionButtonRef", first: true, predicate: ["sessionButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "navItemAnchors", predicate: ["navItemAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isAdmin()) {\n  <div class=\"kf-portal-header__admin-bar\">\n    <div class=\"kf-portal-header__admin-inner\">\n      <kf-admin-badge inline />\n      <div class=\"kf-portal-header__admin-actions\">\n        @for (action of adminActions(); track action.label) {\n          <a class=\"kf-portal-header__admin-action\" [href]=\"action.href\">{{ action.label }}</a>\n        }\n      </div>\n    </div>\n  </div>\n}\n<div class=\"kf-portal-header__brand-bar\">\n  <div class=\"kf-portal-header__brand-inner\">\n    <div class=\"kf-portal-header__top-row\">\n      <div class=\"kf-portal-header__logo-group\">\n        @if (logoSrc()) {\n          <img class=\"kf-portal-header__logo-img\" [src]=\"logoSrc()\" [alt]=\"logoAlt() || brand()\" />\n        } @else {\n          <span class=\"kf-portal-header__logo\">{{ brand() }}</span>\n        }\n        @if (tagline()) {\n          <span class=\"kf-portal-header__logo-sep\" aria-hidden=\"true\"></span>\n          <span class=\"kf-portal-header__logo-tag\">{{ tagline() }}</span>\n        }\n      </div>\n\n      <div class=\"kf-portal-header__actions\">\n        @if (showCart()) {\n          <button\n            type=\"button\"\n            class=\"kf-portal-header__cart\"\n            aria-label=\"Carrito de compras\"\n            (click)=\"cartClick.emit()\"\n          >\n            <kf-icon name=\"cart\" size=\"md\" />\n          </button>\n        }\n\n        <button\n          #sessionButton\n          type=\"button\"\n          class=\"kf-portal-header__session\"\n          [class.kf-portal-header__session--expanded]=\"userName()\"\n          (click)=\"sessionClick.emit()\"\n        >\n          @if (userName()) {\n            <kf-avatar [initials]=\"userInitials()\" />\n            <span class=\"kf-portal-header__session-who\">\n              <span class=\"kf-portal-header__session-greeting\">Hola</span>\n              <span class=\"kf-portal-header__session-name\">{{ userName() }}</span>\n            </span>\n            <kf-icon name=\"chevron-down\" size=\"sm\" class=\"kf-portal-header__session-chevron\" />\n          } @else {\n            <kf-avatar [initials]=\"userInitials()\" pill />\n          }\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"kf-portal-header__menu-toggle\"\n          [attr.aria-expanded]=\"mobileMenuOpen()\"\n          aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n          (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\"\n        >\n          <kf-icon [name]=\"mobileMenuOpen() ? 'x' : 'menu'\" size=\"md\" />\n        </button>\n      </div>\n    </div>\n\n    <nav class=\"kf-portal-header__nav\">\n      <span class=\"kf-portal-header__nav-thumb\" [style]=\"thumbStyle()\" aria-hidden=\"true\"></span>\n      @for (item of navItems(); track item.label) {\n        <a\n          #navItemAnchor\n          class=\"kf-portal-header__nav-item\"\n          [class.kf-portal-header__nav-item--active]=\"item.active\"\n          [href]=\"item.href\"\n        >\n          {{ item.label }}\n        </a>\n      }\n    </nav>\n  </div>\n</div>\n\n<kf-drawer [(open)]=\"mobileMenuOpen\" ariaLabel=\"Men\u00FA de navegaci\u00F3n\">\n  <div kf-drawer-header>\n    <ng-content select=\"[kf-portal-header-extra]\" />\n  </div>\n  @for (item of navItems(); track item.label) {\n    <a\n      class=\"kf-portal-header__mobile-nav-item\"\n      [class.kf-portal-header__mobile-nav-item--active]=\"item.active\"\n      [href]=\"item.href\"\n      (click)=\"mobileMenuOpen.set(false)\"\n    >\n      @if (item.icon) {\n        <kf-icon [name]=\"item.icon\" size=\"sm\" />\n      }\n      <span class=\"kf-portal-header__mobile-nav-item-label\">{{ item.label }}</span>\n      <kf-icon name=\"chevron-right\" size=\"sm\" />\n    </a>\n  }\n  <div kf-drawer-footer>\n    <ng-content select=\"[kf-portal-header-footer]\" />\n  </div>\n</kf-drawer>\n", styles: [":host{display:block;position:sticky;top:0;z-index:30;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{padding-block:var(--kf-space-xs);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__brand-inner{display:flex;flex-direction:column;max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__top-row{display:flex;align-items:center;gap:var(--kf-space-lg);min-height:60px;padding-block:var(--kf-space-sm) 4px}.kf-portal-header__logo-group{display:flex;align-items:center;gap:var(--kf-space-md);flex:1 1 auto;min-width:0}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase}.kf-portal-header__logo-img{height:28px;width:auto;display:block}.kf-portal-header__logo-sep{flex:none;width:1px;height:30px;background:#fff3}.kf-portal-header__logo-tag{font-family:var(--kf-font-title);font-weight:400;font-size:1.1875rem;color:#ffffffc7}.kf-portal-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-portal-header__cart{flex:none;width:46px;height:46px;border-radius:var(--kf-radius-pill);border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--kf-color-white);display:grid;place-items:center;cursor:pointer}.kf-portal-header__cart:hover{background:#ffffff1a;border-color:#ffffff4d}.kf-portal-header__nav{display:flex;align-items:center;gap:2px;padding:4px;margin-bottom:var(--kf-space-sm);background:#ffffff14;border-radius:var(--kf-radius-pill);width:fit-content;max-width:100%;position:relative}.kf-portal-header__nav-thumb{position:absolute;top:4px;bottom:4px;left:0;background:var(--kf-color-white);border-radius:var(--kf-radius-pill);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .15s linear;pointer-events:none}.kf-portal-header__nav-item{position:relative;padding:var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-pill);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white);background:#ffffff14}.kf-portal-header__nav-item--active{color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}.kf-portal-header__session--expanded{display:flex;align-items:center;gap:var(--kf-space-sm);padding:7px 12px 7px 8px;background:var(--kf-color-primary);border-radius:var(--kf-radius-pill)}.kf-portal-header__session--expanded:hover{background:var(--kf-color-primary-active)}.kf-portal-header__session-who{display:flex;flex-direction:column;line-height:1.2;color:var(--kf-color-white)}.kf-portal-header__session-greeting{font-size:.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffffffb3}.kf-portal-header__session-name{font-size:.875rem;font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-portal-header__session-chevron{color:#ffffffd9}.kf-portal-header__menu-toggle{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-white);cursor:pointer}.kf-portal-header__menu-toggle:hover{background:#ffffff1a}.kf-portal-header__mobile-nav-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-xs);color:var(--kf-color-text);font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--kf-radius-sm)}.kf-portal-header__mobile-nav-item:hover{background:var(--kf-color-surface)}.kf-portal-header__mobile-nav-item--active{color:var(--kf-color-primary-active);background:var(--kf-color-primary-soft)}.kf-portal-header__mobile-nav-item-label{flex:1 1 auto}.kf-portal-header__mobile-nav-item kf-icon:last-child{color:#171d2559}@media(max-width:768px){.kf-portal-header__nav,.kf-portal-header__session{display:none}.kf-portal-header__menu-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: AdminBadge, selector: "kf-admin-badge", inputs: ["inline"] }, { kind: "component", type: Avatar, selector: "kf-avatar", inputs: ["initials", "src", "round", "pill"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Drawer, selector: "kf-drawer", inputs: ["open", "side", "role", "ariaLabel", "title", "closeLabel"], outputs: ["openChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PortalHeader, isStandalone: true, selector: "kf-portal-header", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, adminActions: { classPropertyName: "adminActions", publicName: "adminActions", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, userInitials: { classPropertyName: "userInitials", publicName: "userInitials", isSignal: true, isRequired: true, transformFunction: null }, tagline: { classPropertyName: "tagline", publicName: "tagline", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, showCart: { classPropertyName: "showCart", publicName: "showCart", isSignal: true, isRequired: false, transformFunction: null }, cartCount: { classPropertyName: "cartCount", publicName: "cartCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sessionClick: "sessionClick", cartClick: "cartClick" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "sessionButtonRef", first: true, predicate: ["sessionButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "navItemAnchors", predicate: ["navItemAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isAdmin()) {\n  <div class=\"kf-portal-header__admin-bar\">\n    <div class=\"kf-portal-header__admin-inner\">\n      <kf-admin-badge inline />\n      <div class=\"kf-portal-header__admin-actions\">\n        @for (action of adminActions(); track action.label) {\n          <a class=\"kf-portal-header__admin-action\" [href]=\"action.href\">{{ action.label }}</a>\n        }\n      </div>\n    </div>\n  </div>\n}\n<div class=\"kf-portal-header__brand-bar\">\n  <div class=\"kf-portal-header__brand-inner\">\n    <div class=\"kf-portal-header__top-row\">\n      <div class=\"kf-portal-header__logo-group\">\n        @if (logoSrc()) {\n          <img class=\"kf-portal-header__logo-img\" [src]=\"logoSrc()\" [alt]=\"logoAlt() || brand()\" />\n        } @else {\n          <span class=\"kf-portal-header__logo\">{{ brand() }}</span>\n        }\n        @if (tagline()) {\n          <span class=\"kf-portal-header__logo-sep\" aria-hidden=\"true\"></span>\n          <span class=\"kf-portal-header__logo-tag\">{{ tagline() }}</span>\n        }\n      </div>\n\n      <div class=\"kf-portal-header__actions\">\n        @if (showCart()) {\n          <button\n            type=\"button\"\n            class=\"kf-portal-header__cart\"\n            [attr.aria-label]=\"cartAriaLabel()\"\n            (click)=\"cartClick.emit()\"\n          >\n            <kf-icon name=\"cart\" size=\"md\" />\n            @if (cartCount() > 0) {\n              <span class=\"kf-portal-header__cart-count\" aria-hidden=\"true\">{{\n                cartCountLabel()\n              }}</span>\n            }\n          </button>\n        }\n\n        <button\n          #sessionButton\n          type=\"button\"\n          class=\"kf-portal-header__session\"\n          [class.kf-portal-header__session--expanded]=\"userName()\"\n          (click)=\"sessionClick.emit()\"\n        >\n          @if (userName()) {\n            <kf-avatar [initials]=\"userInitials()\" />\n            <span class=\"kf-portal-header__session-who\">\n              <span class=\"kf-portal-header__session-greeting\">Hola</span>\n              <span class=\"kf-portal-header__session-name\">{{ userName() }}</span>\n            </span>\n            <kf-icon name=\"chevron-down\" size=\"sm\" class=\"kf-portal-header__session-chevron\" />\n          } @else {\n            <kf-avatar [initials]=\"userInitials()\" pill />\n          }\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"kf-portal-header__menu-toggle\"\n          [attr.aria-expanded]=\"mobileMenuOpen()\"\n          aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n          (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\"\n        >\n          <kf-icon [name]=\"mobileMenuOpen() ? 'x' : 'menu'\" size=\"md\" />\n        </button>\n      </div>\n    </div>\n\n    <nav class=\"kf-portal-header__nav\">\n      <span class=\"kf-portal-header__nav-thumb\" [style]=\"thumbStyle()\" aria-hidden=\"true\"></span>\n      @for (item of navItems(); track item.label) {\n        <a\n          #navItemAnchor\n          class=\"kf-portal-header__nav-item\"\n          [class.kf-portal-header__nav-item--active]=\"item.active\"\n          [href]=\"item.href\"\n        >\n          {{ item.label }}\n        </a>\n      }\n    </nav>\n  </div>\n</div>\n\n<kf-drawer [(open)]=\"mobileMenuOpen\" ariaLabel=\"Men\u00FA de navegaci\u00F3n\">\n  <div kf-drawer-header>\n    <ng-content select=\"[kf-portal-header-extra]\" />\n  </div>\n  @for (item of navItems(); track item.label) {\n    <a\n      class=\"kf-portal-header__mobile-nav-item\"\n      [class.kf-portal-header__mobile-nav-item--active]=\"item.active\"\n      [href]=\"item.href\"\n      (click)=\"mobileMenuOpen.set(false)\"\n    >\n      @if (item.icon) {\n        <kf-icon [name]=\"item.icon\" size=\"sm\" />\n      }\n      <span class=\"kf-portal-header__mobile-nav-item-label\">{{ item.label }}</span>\n      <kf-icon name=\"chevron-right\" size=\"sm\" />\n    </a>\n  }\n  <div kf-drawer-footer>\n    <ng-content select=\"[kf-portal-header-footer]\" />\n  </div>\n</kf-drawer>\n", styles: [":host{display:block;position:sticky;top:0;z-index:30;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{padding-block:var(--kf-space-xs);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__brand-inner{display:flex;flex-direction:column;max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__top-row{display:flex;align-items:center;gap:var(--kf-space-lg);min-height:60px;padding-block:var(--kf-space-sm) 4px}.kf-portal-header__logo-group{display:flex;align-items:center;gap:var(--kf-space-md);flex:1 1 auto;min-width:0}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase}.kf-portal-header__logo-img{height:28px;width:auto;display:block}.kf-portal-header__logo-sep{flex:none;width:1px;height:30px;background:#fff3}.kf-portal-header__logo-tag{font-family:var(--kf-font-title);font-weight:400;font-size:1.1875rem;color:#ffffffc7}.kf-portal-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-portal-header__cart{position:relative;flex:none;width:46px;height:46px;border-radius:var(--kf-radius-pill);border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--kf-color-white);display:grid;place-items:center;cursor:pointer}.kf-portal-header__cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--kf-color-tertiary-deep);border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white);font-size:.6875rem;font-weight:700;line-height:1;pointer-events:none}.kf-portal-header__cart:hover{background:#ffffff1a;border-color:#ffffff4d}.kf-portal-header__nav{display:flex;align-items:center;gap:2px;padding:4px;margin-bottom:var(--kf-space-sm);background:#ffffff14;border-radius:var(--kf-radius-pill);width:fit-content;max-width:100%;position:relative}.kf-portal-header__nav-thumb{position:absolute;top:4px;bottom:4px;left:0;background:var(--kf-color-white);border-radius:var(--kf-radius-pill);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .15s linear;pointer-events:none}.kf-portal-header__nav-item{position:relative;padding:var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-pill);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white);background:#ffffff14}.kf-portal-header__nav-item--active{color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}.kf-portal-header__session--expanded{display:flex;align-items:center;gap:var(--kf-space-sm);padding:7px 12px 7px 8px;background:var(--kf-color-primary);border-radius:var(--kf-radius-pill)}.kf-portal-header__session--expanded:hover{background:var(--kf-color-primary-active)}.kf-portal-header__session-who{display:flex;flex-direction:column;line-height:1.2;color:var(--kf-color-white)}.kf-portal-header__session-greeting{font-size:.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffffffb3}.kf-portal-header__session-name{font-size:.875rem;font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-portal-header__session-chevron{color:#ffffffd9}.kf-portal-header__menu-toggle{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-white);cursor:pointer}.kf-portal-header__menu-toggle:hover{background:#ffffff1a}.kf-portal-header__mobile-nav-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-xs);color:var(--kf-color-text);font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--kf-radius-sm)}.kf-portal-header__mobile-nav-item:hover{background:var(--kf-color-surface)}.kf-portal-header__mobile-nav-item--active{color:var(--kf-color-primary-active);background:var(--kf-color-primary-soft)}.kf-portal-header__mobile-nav-item-label{flex:1 1 auto}.kf-portal-header__mobile-nav-item kf-icon:last-child{color:#171d2559}@media(max-width:768px){.kf-portal-header__nav,.kf-portal-header__session{display:none}.kf-portal-header__menu-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: AdminBadge, selector: "kf-admin-badge", inputs: ["inline"] }, { kind: "component", type: Avatar, selector: "kf-avatar", inputs: ["initials", "src", "round", "pill"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Drawer, selector: "kf-drawer", inputs: ["open", "side", "role", "ariaLabel", "title", "closeLabel"], outputs: ["openChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PortalHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-portal-header', imports: [AdminBadge, Avatar, Icon, Drawer], template: "@if (isAdmin()) {\n  <div class=\"kf-portal-header__admin-bar\">\n    <div class=\"kf-portal-header__admin-inner\">\n      <kf-admin-badge inline />\n      <div class=\"kf-portal-header__admin-actions\">\n        @for (action of adminActions(); track action.label) {\n          <a class=\"kf-portal-header__admin-action\" [href]=\"action.href\">{{ action.label }}</a>\n        }\n      </div>\n    </div>\n  </div>\n}\n<div class=\"kf-portal-header__brand-bar\">\n  <div class=\"kf-portal-header__brand-inner\">\n    <div class=\"kf-portal-header__top-row\">\n      <div class=\"kf-portal-header__logo-group\">\n        @if (logoSrc()) {\n          <img class=\"kf-portal-header__logo-img\" [src]=\"logoSrc()\" [alt]=\"logoAlt() || brand()\" />\n        } @else {\n          <span class=\"kf-portal-header__logo\">{{ brand() }}</span>\n        }\n        @if (tagline()) {\n          <span class=\"kf-portal-header__logo-sep\" aria-hidden=\"true\"></span>\n          <span class=\"kf-portal-header__logo-tag\">{{ tagline() }}</span>\n        }\n      </div>\n\n      <div class=\"kf-portal-header__actions\">\n        @if (showCart()) {\n          <button\n            type=\"button\"\n            class=\"kf-portal-header__cart\"\n            aria-label=\"Carrito de compras\"\n            (click)=\"cartClick.emit()\"\n          >\n            <kf-icon name=\"cart\" size=\"md\" />\n          </button>\n        }\n\n        <button\n          #sessionButton\n          type=\"button\"\n          class=\"kf-portal-header__session\"\n          [class.kf-portal-header__session--expanded]=\"userName()\"\n          (click)=\"sessionClick.emit()\"\n        >\n          @if (userName()) {\n            <kf-avatar [initials]=\"userInitials()\" />\n            <span class=\"kf-portal-header__session-who\">\n              <span class=\"kf-portal-header__session-greeting\">Hola</span>\n              <span class=\"kf-portal-header__session-name\">{{ userName() }}</span>\n            </span>\n            <kf-icon name=\"chevron-down\" size=\"sm\" class=\"kf-portal-header__session-chevron\" />\n          } @else {\n            <kf-avatar [initials]=\"userInitials()\" pill />\n          }\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"kf-portal-header__menu-toggle\"\n          [attr.aria-expanded]=\"mobileMenuOpen()\"\n          aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n          (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\"\n        >\n          <kf-icon [name]=\"mobileMenuOpen() ? 'x' : 'menu'\" size=\"md\" />\n        </button>\n      </div>\n    </div>\n\n    <nav class=\"kf-portal-header__nav\">\n      <span class=\"kf-portal-header__nav-thumb\" [style]=\"thumbStyle()\" aria-hidden=\"true\"></span>\n      @for (item of navItems(); track item.label) {\n        <a\n          #navItemAnchor\n          class=\"kf-portal-header__nav-item\"\n          [class.kf-portal-header__nav-item--active]=\"item.active\"\n          [href]=\"item.href\"\n        >\n          {{ item.label }}\n        </a>\n      }\n    </nav>\n  </div>\n</div>\n\n<kf-drawer [(open)]=\"mobileMenuOpen\" ariaLabel=\"Men\u00FA de navegaci\u00F3n\">\n  <div kf-drawer-header>\n    <ng-content select=\"[kf-portal-header-extra]\" />\n  </div>\n  @for (item of navItems(); track item.label) {\n    <a\n      class=\"kf-portal-header__mobile-nav-item\"\n      [class.kf-portal-header__mobile-nav-item--active]=\"item.active\"\n      [href]=\"item.href\"\n      (click)=\"mobileMenuOpen.set(false)\"\n    >\n      @if (item.icon) {\n        <kf-icon [name]=\"item.icon\" size=\"sm\" />\n      }\n      <span class=\"kf-portal-header__mobile-nav-item-label\">{{ item.label }}</span>\n      <kf-icon name=\"chevron-right\" size=\"sm\" />\n    </a>\n  }\n  <div kf-drawer-footer>\n    <ng-content select=\"[kf-portal-header-footer]\" />\n  </div>\n</kf-drawer>\n", styles: [":host{display:block;position:sticky;top:0;z-index:30;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{padding-block:var(--kf-space-xs);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__brand-inner{display:flex;flex-direction:column;max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__top-row{display:flex;align-items:center;gap:var(--kf-space-lg);min-height:60px;padding-block:var(--kf-space-sm) 4px}.kf-portal-header__logo-group{display:flex;align-items:center;gap:var(--kf-space-md);flex:1 1 auto;min-width:0}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase}.kf-portal-header__logo-img{height:28px;width:auto;display:block}.kf-portal-header__logo-sep{flex:none;width:1px;height:30px;background:#fff3}.kf-portal-header__logo-tag{font-family:var(--kf-font-title);font-weight:400;font-size:1.1875rem;color:#ffffffc7}.kf-portal-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-portal-header__cart{flex:none;width:46px;height:46px;border-radius:var(--kf-radius-pill);border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--kf-color-white);display:grid;place-items:center;cursor:pointer}.kf-portal-header__cart:hover{background:#ffffff1a;border-color:#ffffff4d}.kf-portal-header__nav{display:flex;align-items:center;gap:2px;padding:4px;margin-bottom:var(--kf-space-sm);background:#ffffff14;border-radius:var(--kf-radius-pill);width:fit-content;max-width:100%;position:relative}.kf-portal-header__nav-thumb{position:absolute;top:4px;bottom:4px;left:0;background:var(--kf-color-white);border-radius:var(--kf-radius-pill);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .15s linear;pointer-events:none}.kf-portal-header__nav-item{position:relative;padding:var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-pill);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white);background:#ffffff14}.kf-portal-header__nav-item--active{color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}.kf-portal-header__session--expanded{display:flex;align-items:center;gap:var(--kf-space-sm);padding:7px 12px 7px 8px;background:var(--kf-color-primary);border-radius:var(--kf-radius-pill)}.kf-portal-header__session--expanded:hover{background:var(--kf-color-primary-active)}.kf-portal-header__session-who{display:flex;flex-direction:column;line-height:1.2;color:var(--kf-color-white)}.kf-portal-header__session-greeting{font-size:.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffffffb3}.kf-portal-header__session-name{font-size:.875rem;font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-portal-header__session-chevron{color:#ffffffd9}.kf-portal-header__menu-toggle{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-white);cursor:pointer}.kf-portal-header__menu-toggle:hover{background:#ffffff1a}.kf-portal-header__mobile-nav-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-xs);color:var(--kf-color-text);font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--kf-radius-sm)}.kf-portal-header__mobile-nav-item:hover{background:var(--kf-color-surface)}.kf-portal-header__mobile-nav-item--active{color:var(--kf-color-primary-active);background:var(--kf-color-primary-soft)}.kf-portal-header__mobile-nav-item-label{flex:1 1 auto}.kf-portal-header__mobile-nav-item kf-icon:last-child{color:#171d2559}@media(max-width:768px){.kf-portal-header__nav,.kf-portal-header__session{display:none}.kf-portal-header__menu-toggle{display:inline-flex}}\n"] }]
-        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], adminActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminActions", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], userInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInitials", required: true }] }], tagline: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagline", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], showCart: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCart", required: false }] }], sessionClick: [{ type: i0.Output, args: ["sessionClick"] }], cartClick: [{ type: i0.Output, args: ["cartClick"] }], sessionButtonRef: [{ type: i0.ViewChild, args: ['sessionButton', { ...{ read: ElementRef }, isSignal: true }] }], navItemAnchors: [{ type: i0.ViewChildren, args: ['navItemAnchor', { isSignal: true }] }], onWindowResize: [{
+            args: [{ selector: 'kf-portal-header', imports: [AdminBadge, Avatar, Icon, Drawer], template: "@if (isAdmin()) {\n  <div class=\"kf-portal-header__admin-bar\">\n    <div class=\"kf-portal-header__admin-inner\">\n      <kf-admin-badge inline />\n      <div class=\"kf-portal-header__admin-actions\">\n        @for (action of adminActions(); track action.label) {\n          <a class=\"kf-portal-header__admin-action\" [href]=\"action.href\">{{ action.label }}</a>\n        }\n      </div>\n    </div>\n  </div>\n}\n<div class=\"kf-portal-header__brand-bar\">\n  <div class=\"kf-portal-header__brand-inner\">\n    <div class=\"kf-portal-header__top-row\">\n      <div class=\"kf-portal-header__logo-group\">\n        @if (logoSrc()) {\n          <img class=\"kf-portal-header__logo-img\" [src]=\"logoSrc()\" [alt]=\"logoAlt() || brand()\" />\n        } @else {\n          <span class=\"kf-portal-header__logo\">{{ brand() }}</span>\n        }\n        @if (tagline()) {\n          <span class=\"kf-portal-header__logo-sep\" aria-hidden=\"true\"></span>\n          <span class=\"kf-portal-header__logo-tag\">{{ tagline() }}</span>\n        }\n      </div>\n\n      <div class=\"kf-portal-header__actions\">\n        @if (showCart()) {\n          <button\n            type=\"button\"\n            class=\"kf-portal-header__cart\"\n            [attr.aria-label]=\"cartAriaLabel()\"\n            (click)=\"cartClick.emit()\"\n          >\n            <kf-icon name=\"cart\" size=\"md\" />\n            @if (cartCount() > 0) {\n              <span class=\"kf-portal-header__cart-count\" aria-hidden=\"true\">{{\n                cartCountLabel()\n              }}</span>\n            }\n          </button>\n        }\n\n        <button\n          #sessionButton\n          type=\"button\"\n          class=\"kf-portal-header__session\"\n          [class.kf-portal-header__session--expanded]=\"userName()\"\n          (click)=\"sessionClick.emit()\"\n        >\n          @if (userName()) {\n            <kf-avatar [initials]=\"userInitials()\" />\n            <span class=\"kf-portal-header__session-who\">\n              <span class=\"kf-portal-header__session-greeting\">Hola</span>\n              <span class=\"kf-portal-header__session-name\">{{ userName() }}</span>\n            </span>\n            <kf-icon name=\"chevron-down\" size=\"sm\" class=\"kf-portal-header__session-chevron\" />\n          } @else {\n            <kf-avatar [initials]=\"userInitials()\" pill />\n          }\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"kf-portal-header__menu-toggle\"\n          [attr.aria-expanded]=\"mobileMenuOpen()\"\n          aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n          (click)=\"mobileMenuOpen.set(!mobileMenuOpen())\"\n        >\n          <kf-icon [name]=\"mobileMenuOpen() ? 'x' : 'menu'\" size=\"md\" />\n        </button>\n      </div>\n    </div>\n\n    <nav class=\"kf-portal-header__nav\">\n      <span class=\"kf-portal-header__nav-thumb\" [style]=\"thumbStyle()\" aria-hidden=\"true\"></span>\n      @for (item of navItems(); track item.label) {\n        <a\n          #navItemAnchor\n          class=\"kf-portal-header__nav-item\"\n          [class.kf-portal-header__nav-item--active]=\"item.active\"\n          [href]=\"item.href\"\n        >\n          {{ item.label }}\n        </a>\n      }\n    </nav>\n  </div>\n</div>\n\n<kf-drawer [(open)]=\"mobileMenuOpen\" ariaLabel=\"Men\u00FA de navegaci\u00F3n\">\n  <div kf-drawer-header>\n    <ng-content select=\"[kf-portal-header-extra]\" />\n  </div>\n  @for (item of navItems(); track item.label) {\n    <a\n      class=\"kf-portal-header__mobile-nav-item\"\n      [class.kf-portal-header__mobile-nav-item--active]=\"item.active\"\n      [href]=\"item.href\"\n      (click)=\"mobileMenuOpen.set(false)\"\n    >\n      @if (item.icon) {\n        <kf-icon [name]=\"item.icon\" size=\"sm\" />\n      }\n      <span class=\"kf-portal-header__mobile-nav-item-label\">{{ item.label }}</span>\n      <kf-icon name=\"chevron-right\" size=\"sm\" />\n    </a>\n  }\n  <div kf-drawer-footer>\n    <ng-content select=\"[kf-portal-header-footer]\" />\n  </div>\n</kf-drawer>\n", styles: [":host{display:block;position:sticky;top:0;z-index:30;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{padding-block:var(--kf-space-xs);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__brand-inner{display:flex;flex-direction:column;max-width:var(--kf-header-max-width, none);margin:0 auto;padding:0 var(--kf-space-lg)}.kf-portal-header__top-row{display:flex;align-items:center;gap:var(--kf-space-lg);min-height:60px;padding-block:var(--kf-space-sm) 4px}.kf-portal-header__logo-group{display:flex;align-items:center;gap:var(--kf-space-md);flex:1 1 auto;min-width:0}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase}.kf-portal-header__logo-img{height:28px;width:auto;display:block}.kf-portal-header__logo-sep{flex:none;width:1px;height:30px;background:#fff3}.kf-portal-header__logo-tag{font-family:var(--kf-font-title);font-weight:400;font-size:1.1875rem;color:#ffffffc7}.kf-portal-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-portal-header__cart{position:relative;flex:none;width:46px;height:46px;border-radius:var(--kf-radius-pill);border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--kf-color-white);display:grid;place-items:center;cursor:pointer}.kf-portal-header__cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--kf-color-tertiary-deep);border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white);font-size:.6875rem;font-weight:700;line-height:1;pointer-events:none}.kf-portal-header__cart:hover{background:#ffffff1a;border-color:#ffffff4d}.kf-portal-header__nav{display:flex;align-items:center;gap:2px;padding:4px;margin-bottom:var(--kf-space-sm);background:#ffffff14;border-radius:var(--kf-radius-pill);width:fit-content;max-width:100%;position:relative}.kf-portal-header__nav-thumb{position:absolute;top:4px;bottom:4px;left:0;background:var(--kf-color-white);border-radius:var(--kf-radius-pill);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .15s linear;pointer-events:none}.kf-portal-header__nav-item{position:relative;padding:var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-pill);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white);background:#ffffff14}.kf-portal-header__nav-item--active{color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}.kf-portal-header__session--expanded{display:flex;align-items:center;gap:var(--kf-space-sm);padding:7px 12px 7px 8px;background:var(--kf-color-primary);border-radius:var(--kf-radius-pill)}.kf-portal-header__session--expanded:hover{background:var(--kf-color-primary-active)}.kf-portal-header__session-who{display:flex;flex-direction:column;line-height:1.2;color:var(--kf-color-white)}.kf-portal-header__session-greeting{font-size:.65625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffffffb3}.kf-portal-header__session-name{font-size:.875rem;font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-portal-header__session-chevron{color:#ffffffd9}.kf-portal-header__menu-toggle{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-white);cursor:pointer}.kf-portal-header__menu-toggle:hover{background:#ffffff1a}.kf-portal-header__mobile-nav-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-xs);color:var(--kf-color-text);font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--kf-radius-sm)}.kf-portal-header__mobile-nav-item:hover{background:var(--kf-color-surface)}.kf-portal-header__mobile-nav-item--active{color:var(--kf-color-primary-active);background:var(--kf-color-primary-soft)}.kf-portal-header__mobile-nav-item-label{flex:1 1 auto}.kf-portal-header__mobile-nav-item kf-icon:last-child{color:#171d2559}@media(max-width:768px){.kf-portal-header__nav,.kf-portal-header__session{display:none}.kf-portal-header__menu-toggle{display:inline-flex}}\n"] }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], adminActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminActions", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], userInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInitials", required: true }] }], tagline: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagline", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], showCart: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCart", required: false }] }], cartCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "cartCount", required: false }] }], sessionClick: [{ type: i0.Output, args: ["sessionClick"] }], cartClick: [{ type: i0.Output, args: ["cartClick"] }], sessionButtonRef: [{ type: i0.ViewChild, args: ['sessionButton', { ...{ read: ElementRef }, isSignal: true }] }], navItemAnchors: [{ type: i0.ViewChildren, args: ['navItemAnchor', { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -8933,6 +9029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+const INTERACTIVE_CONTENT = 'a, button, input, select, textarea, label, [tabindex], ' +
+    '[role="button"], [role="link"], [role="checkbox"], [role="switch"]';
 /**
  * Indicador numérico compacto: label + valor grande con ícono, para grillas
  * densas de KPIs. Con `cta` en vez de `value` se convierte en un bloque de
@@ -8948,6 +9046,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *   <kf-stat-tile label="Estado" hasProjectedValue>
  *     <kf-badge valueContent [tone]="stateTone()">{{ stateLabel() }}</kf-badge>
  *   </kf-stat-tile>
+ *
+ * `interactive` convierte el tile en un botón (`role="button"`, enfocable,
+ * Enter y Espacio) que emite `tileClick`: para un KPI que filtra o despliega
+ * algo. El click sobre un control proyectado dentro del tile (link, botón,
+ * campo) no emite `tileClick`; el de texto común sí. `pressed`
+ * (`aria-pressed`) lo vuelve un botón de alternancia, útil como filtro; `expanded` (`aria-expanded`) indica que controla un panel
+ * desplegable. Ambos son `boolean | null`: `null` (default) no emite el
+ * atributo. El estado `pressed` se marca con un borde y el anillo
+ * `--kf-stat-tile-ring`; el foco de teclado usa `--kf-shadow-focus`. Sin
+ * `interactive` el tile se comporta exactamente como antes (los demás inputs
+ * se ignoran), y con `cta` tampoco aplica: ya contiene su propio link.
+ *
+ * Distinto de `kf-stat-card` (`clickable` + `pressed`): esa card tiene el
+ * ícono circular a la izquierda y un chevron; el tile conserva label arriba,
+ * ícono a la derecha, valor y nota, y suma `expanded`.
+ *
+ *   <kf-stat-tile interactive label="En ruta" value="12" icon="truck"
+ *     [pressed]="filter() === 'route'" (tileClick)="toggleFilter('route')" />
  */
 class StatTile {
     cta = input(false, { ...(ngDevMode ? { debugName: "cta" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -8990,22 +9106,85 @@ class StatTile {
      * que `actionClick` de `kf-panel`, sin depender de `@angular/router`.
      */
     actionClick = output();
+    /** Convierte el tile en un botón; ver la descripción de la clase. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Estado de alternancia (`aria-pressed`); `null` = no aplica. */
+    pressed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    /** El tile controla un panel (`aria-expanded`); `null` = no aplica. */
+    expanded = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Activación del tile interactivo: click, Enter o Espacio. */
+    tileClick = output();
+    /** La variante CTA ya tiene su propio link: no puede ser además un botón. */
+    isInteractive = computed(() => this.interactive() && !this.cta(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     /** Texto real de la nota. `null` significa "no reservar la línea": pasa
      * solo cuando el consumidor no declaró ni nota ni placeholder. */
     noteText = computed(() => this.note() || this.notePlaceholder() || null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noteText" }] : /* istanbul ignore next */ []));
+    onActivate(event) {
+        if (this.isInteractive() && !this.isFromProjectedControl(event)) {
+            this.tileClick.emit();
+        }
+    }
+    /**
+     * Un control proyectado dentro del tile (link, botón, campo…) tiene su
+     * propia acción: su click no debe contar como activar el tile. El texto o
+     * los spans comunes sí activan, por eso se busca el control con `closest`
+     * y no se compara `target` con `currentTarget`.
+     */
+    isFromProjectedControl(event) {
+        const host = event.currentTarget;
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return false;
+        }
+        const control = target.closest(INTERACTIVE_CONTENT);
+        return !!control && control !== host && host.contains(control);
+    }
+    /**
+     * Teclado de un botón nativo: Enter activa al presionar y Espacio al soltar
+     * (en `keydown` solo se frena el scroll de la página). Solo cuenta cuando el
+     * foco está en el propio tile, no en contenido proyectado dentro de él.
+     */
+    onKeydown(event) {
+        if (!this.isInteractive() || event.target !== event.currentTarget) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.tileClick.emit();
+        }
+        else if (event.key === ' ') {
+            event.preventDefault();
+        }
+    }
+    onKeyup(event) {
+        if (this.isInteractive() && event.target === event.currentTarget && event.key === ' ') {
+            this.tileClick.emit();
+        }
+    }
     noteIsPlaceholder = computed(() => !this.note() && !!this.notePlaceholder(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noteIsPlaceholder" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatTile, isStandalone: true, selector: "kf-stat-tile", inputs: { cta: { classPropertyName: "cta", publicName: "cta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, notePlaceholder: { classPropertyName: "notePlaceholder", publicName: "notePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, valueMissing: { classPropertyName: "valueMissing", publicName: "valueMissing", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedValue: { classPropertyName: "hasProjectedValue", publicName: "hasProjectedValue", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { properties: { "class.kf-stat-tile--cta": "cta()", "class.kf-stat-tile--inline": "!cta() && variant() === \"inline\"" } }, ngImport: i0, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a 2 l\u00EDneas. -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatTile, isStandalone: true, selector: "kf-stat-tile", inputs: { cta: { classPropertyName: "cta", publicName: "cta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, notePlaceholder: { classPropertyName: "notePlaceholder", publicName: "notePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, valueMissing: { classPropertyName: "valueMissing", publicName: "valueMissing", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedValue: { classPropertyName: "hasProjectedValue", publicName: "hasProjectedValue", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", tileClick: "tileClick" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" }, properties: { "class.kf-stat-tile--cta": "cta()", "class.kf-stat-tile--inline": "!cta() && variant() === \"inline\"", "class.kf-stat-tile--interactive": "isInteractive()", "attr.role": "isInteractive() ? \"button\" : null", "attr.tabindex": "isInteractive() ? 0 : null", "attr.aria-pressed": "isInteractive() ? pressed() : null", "attr.aria-expanded": "isInteractive() ? expanded() : null" } }, ngImport: i0, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a 2 l\u00EDneas. -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatTile, decorators: [{
             type: Component,
             args: [{ selector: 'kf-stat-tile', imports: [Icon, Link], host: {
                         '[class.kf-stat-tile--cta]': 'cta()',
                         '[class.kf-stat-tile--inline]': '!cta() && variant() === "inline"',
-                    }, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a 2 l\u00EDneas. -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600}\n"] }]
-        }], propDecorators: { cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "cta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], notePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "notePlaceholder", required: false }] }], valueMissing: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMissing", required: false }] }], hasProjectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedValue", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+                        '[class.kf-stat-tile--interactive]': 'isInteractive()',
+                        '[attr.role]': 'isInteractive() ? "button" : null',
+                        '[attr.tabindex]': 'isInteractive() ? 0 : null',
+                        '[attr.aria-pressed]': 'isInteractive() ? pressed() : null',
+                        '[attr.aria-expanded]': 'isInteractive() ? expanded() : null',
+                        '(click)': 'onActivate($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(keyup)': 'onKeyup($event)',
+                    }, template: "@if (cta()) {\n  <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n  @if (description()) {\n    <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n  }\n  @if (actionLabel()) {\n    <kf-link\n      class=\"kf-stat-tile__cta-action\"\n      [href]=\"actionHref() || '#'\"\n      showArrow\n      (click)=\"actionClick.emit($event)\"\n    >\n      {{ actionLabel() }}\n    </kf-link>\n  }\n} @else {\n  <div class=\"kf-stat-tile__head\">\n    <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n      una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n    <span\n      class=\"kf-stat-tile__label\"\n      [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n      >{{ label() }}</span\n    >\n    @if (icon(); as iconName) {\n      <span class=\"kf-stat-tile__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  @if (hasProjectedValue()) {\n    <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n      estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n      caso las resuelve el propio contenido proyectado (el badge trae su\n      tono). -->\n    <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n      <ng-content select=\"[valueContent]\" />\n    </span>\n  } @else {\n    <span\n      class=\"kf-stat-tile__value\"\n      [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n      [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n      [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n      [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n      [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n      >{{ value() }}</span\n    >\n  }\n\n  <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n    fila. El `title` deja disponible el texto completo, recortado a 2 l\u00EDneas. -->\n  @if (noteText(); as note) {\n    <span\n      class=\"kf-stat-tile__note\"\n      [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n      [title]=\"note\"\n      >{{ note }}</span\n    >\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"] }]
+        }], propDecorators: { cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "cta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], notePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "notePlaceholder", required: false }] }], valueMissing: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMissing", required: false }] }], hasProjectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedValue", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], tileClick: [{ type: i0.Output, args: ["tileClick"] }] } });
 
 /**
  * Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
@@ -9027,6 +9206,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kf-status-pill', template: "<span class=\"kf-status-pill\" [class]=\"'kf-status-pill--' + tone()\">\n  @if (dot()) {\n    <span class=\"kf-status-pill__dot\"></span>\n  }\n  <ng-content />\n</span>\n", styles: [":host{display:inline-block}.kf-status-pill{display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid currentColor;border-radius:var(--kf-radius-pill);background:transparent;font:inherit;font-size:.75rem;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.kf-status-pill__dot{width:6px;height:6px;border-radius:var(--kf-radius-pill);background:currentColor;flex-shrink:0}.kf-status-pill--blue{color:var(--kf-color-info)}.kf-status-pill--ok{color:var(--kf-color-success)}.kf-status-pill--warn{color:var(--kf-color-warning)}.kf-status-pill--error{color:var(--kf-color-error)}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
 
+/**
+ * Interruptor de activar/desactivar con efecto inmediato (preferencias,
+ * ajustes). Para elegir opciones dentro de un formulario que se envía al
+ * final, usar `kf-checkbox`.
+ *
+ * Es un `<button role="switch" aria-checked>`: el lector de pantalla anuncia
+ * el estado con el propio rol, por eso no hay texto extra de "activado". Enter
+ * y Espacio lo alternan como en cualquier botón.
+ *
+ * `label` es obligatorio: da el nombre accesible aunque no se vea. Con
+ * `hideLabel` se oculta el texto y pasa a `aria-label`, para un interruptor
+ * cuyo contexto ya lo explica la fila que lo contiene.
+ *
+ * `checked` es two-way (`model`). Implementa `ControlValueAccessor`, así que
+ * también funciona con `formControlName`/`ngModel`; en ese modo `writeValue`
+ * escribe en el mismo `checked`. `disabled` del input y el del formulario se
+ * combinan: basta con que uno esté activo.
+ *
+ * `writeValue` (el formulario escribiendo el valor por código, ej.
+ * `setValue`/`reset`) también emite `checkedChange`, porque escribe en el
+ * `model`. Combinar `[(checked)]` con `formControlName`/`ngModel` en el mismo
+ * switch hace que el valor llegue dos veces al consumidor: usar una sola de
+ * las dos vías, o ignorar en el handler el eco que no cambia el valor.
+ *
+ * El color sale de roles (`--kf-color-primary` encendido,
+ * `--kf-color-border-control` apagado) y el foco de `--kf-shadow-focus`; no
+ * recibe colores.
+ *
+ *   <kf-switch label="Fijar indicadores" [(checked)]="pinned" />
+ *   <kf-switch label="Mapa junto a la tabla" hideLabel size="sm" formControlName="splitMap" />
+ */
+class Switch {
+    /** Nombre accesible y texto visible (salvo con `hideLabel`). */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Oculta el texto y lo deja como `aria-label`. */
+    hideLabel = input(false, { ...(ngDevMode ? { debugName: "hideLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Estado encendido, two-way: `[(checked)]="pinned"`. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabledByForm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const next = !this.checked();
+        this.checked.set(next);
+        this.onChangeFn(next);
+    }
+    onBlur() {
+        this.onTouchedFn();
+    }
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByForm.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Switch, isStandalone: true, selector: "kf-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Switch),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"kf-switch\"\n  [class.kf-switch--sm]=\"size() === 'sm'\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"hideLabel() ? label() : null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (blur)=\"onBlur()\"\n>\n  <span class=\"kf-switch__track\" aria-hidden=\"true\">\n    <span class=\"kf-switch__thumb\"></span>\n  </span>\n  @if (!hideLabel()) {\n    <span class=\"kf-switch__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Switch, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-switch', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Switch),
+                            multi: true,
+                        },
+                    ], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"kf-switch\"\n  [class.kf-switch--sm]=\"size() === 'sm'\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"hideLabel() ? label() : null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (blur)=\"onBlur()\"\n>\n  <span class=\"kf-switch__track\" aria-hidden=\"true\">\n    <span class=\"kf-switch__thumb\"></span>\n  </span>\n  @if (!hideLabel()) {\n    <span class=\"kf-switch__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+
 /**
  * Barra de tabs subrayada: un indicador se desliza hasta la pestaña activa.
  * La posición se mide (`offsetLeft`/`offsetWidth`) después de cada render,
@@ -9704,5 +9975,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, Switch, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
 //# sourceMappingURL=kaufmann-lab-ui-core.mjs.map