@kaufmann-lab/ui 0.1.18 → 0.1.19

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, computed, effect, Component, model, output, numberAttribute, contentChildren, signal, DestroyRef, viewChild, forwardRef, TemplateRef, contentChild, ElementRef, ViewContainerRef, HostListener, afterRenderEffect, afterNextRender, ChangeDetectionStrategy, viewChildren, Injector, Input as Input$1, Directive, Injectable } from '@angular/core';
+import { input, booleanAttribute, inject, computed, effect, Component, model, output, ElementRef, Injector, signal, afterNextRender, ChangeDetectionStrategy, numberAttribute, contentChildren, DestroyRef, viewChild, forwardRef, TemplateRef, contentChild, ViewContainerRef, HostListener, afterRenderEffect, viewChildren, Input as Input$1, Directive, Injectable } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
@@ -1385,6 +1385,304 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kf-bucket-progress', template: "<div class=\"kf-bucket-progress__head\">\n  <span class=\"kf-bucket-progress__title\">{{ title() }}</span>\n  @if (summary()) {\n    <span class=\"kf-bucket-progress__summary\">{{ summary() }}</span>\n  }\n</div>\n\n<div class=\"kf-bucket-progress__bar\" role=\"img\" [attr.aria-label]=\"ariaLabel()\">\n  @for (item of visibleItems(); track item.key) {\n    <span\n      class=\"kf-bucket-progress__segment\"\n      [style.flex-grow]=\"item.count\"\n      [style.background]=\"item.color\"\n    ></span>\n  }\n</div>\n\n<div class=\"kf-bucket-progress__legend\">\n  @for (item of visibleItems(); track item.key) {\n    <span class=\"kf-bucket-progress__legend-item\">\n      <span class=\"kf-bucket-progress__dot\" [style.background]=\"item.color\"></span>\n      {{ item.count }} {{ item.label }}\n    </span>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);font-family:var(--kf-font-body)}.kf-bucket-progress__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);flex-wrap:wrap}.kf-bucket-progress__title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink);font-size:.95rem}.kf-bucket-progress__summary{font-size:.85rem;color:var(--kf-color-text-muted)}.kf-bucket-progress__bar{display:flex;gap:2px;height:8px}.kf-bucket-progress__segment{border-radius:2px;transition:flex-grow .3s ease}@media(prefers-reduced-motion:reduce){.kf-bucket-progress__segment{transition:none}}.kf-bucket-progress__legend{display:flex;flex-wrap:wrap;gap:var(--kf-space-md)}.kf-bucket-progress__legend-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--kf-color-text-muted)}.kf-bucket-progress__dot{width:8px;height:8px;border-radius:2px;flex:none}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
 
+const DEFAULT_MONTH_NAMES = [
+    'Enero',
+    'Febrero',
+    'Marzo',
+    'Abril',
+    'Mayo',
+    'Junio',
+    'Julio',
+    'Agosto',
+    'Septiembre',
+    'Octubre',
+    'Noviembre',
+    'Diciembre',
+];
+const DEFAULT_WEEKDAY_LABELS = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
+const DEFAULT_WEEKDAY_NAMES = [
+    'lunes',
+    'martes',
+    'miércoles',
+    'jueves',
+    'viernes',
+    'sábado',
+    'domingo',
+];
+/**
+ * Selector de fecha de un solo mes, con grilla semanal que parte en lunes.
+ *
+ * Las fechas viajan como strings ISO (`YYYY-MM-DD`, y `YYYY-MM` para el mes
+ * visible) y se calculan en UTC, así la zona horaria del navegador nunca
+ * corre una fecha un día.
+ *
+ * `availableDates` en `null` deja seleccionable toda fecha dentro de
+ * `min`/`max`; un arreglo deja seleccionables SOLO esas fechas (el resto se
+ * rinde deshabilitado). `markedDates` es independiente: agrega un punto
+ * marcador sin afectar si la fecha se puede elegir.
+ *
+ * Patrón WAI-ARIA `grid` con roving tabindex: las flechas mueven por
+ * día/semana, Home/End van al inicio/fin de la semana y PageUp/PageDown
+ * cambian de mes; el foco cruza los límites del mes.
+ *
+ *   <kf-calendar
+ *     [(value)]="date"
+ *     [(month)]="month"
+ *     [min]="today"
+ *     [availableDates]="freeDates()"
+ *     [markedDates]="eventDates()"
+ *     [loading]="loadingAvailability()"
+ *   >
+ *     <p footer>Leyenda</p>
+ *   </kf-calendar>
+ */
+class Calendar {
+    static nextId = 0;
+    /** Fecha seleccionada, ISO `YYYY-MM-DD`. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Mes visible, `YYYY-MM`. En `null` se deriva de `value` y, si no hay, de hoy. */
+    month = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    /** Fecha mínima seleccionable (inclusive), ISO. */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Fecha máxima seleccionable (inclusive), ISO. */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** `null`: toda fecha dentro de `min`/`max` es seleccionable. Arreglo: solo esas fechas. */
+    availableDates = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableDates" }] : /* istanbul ignore next */ []));
+    /** Fechas con punto marcador, independiente de si son seleccionables. */
+    markedDates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markedDates" }] : /* istanbul ignore next */ []));
+    /** Reemplaza el "hoy" local (tests/SSR), ISO. */
+    today = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    /** Atenúa la grilla y bloquea la selección mientras carga la disponibilidad. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('Calendario', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Los 12 nombres de mes, partiendo en enero. */
+    monthNames = input(DEFAULT_MONTH_NAMES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthNames" }] : /* istanbul ignore next */ []));
+    /** Las 7 iniciales visibles de los días, partiendo en lunes. */
+    weekdayLabels = input(DEFAULT_WEEKDAY_LABELS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    /** Los 7 nombres completos de los días, partiendo en lunes — se usan en los nombres accesibles. */
+    weekdayNames = input(DEFAULT_WEEKDAY_NAMES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayNames" }] : /* istanbul ignore next */ []));
+    /** Se agrega al nombre accesible de una fecha marcada. */
+    markedLabel = input('marcado', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markedLabel" }] : /* istanbul ignore next */ []));
+    previousMonthLabel = input('Mes anterior', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []));
+    nextMonthLabel = input('Mes siguiente', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    focusedDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    titleId = `kf-calendar-title-${Calendar.nextId++}`;
+    todayIso = computed(() => this.today() ?? localTodayIso(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayIso" }] : /* istanbul ignore next */ []));
+    displayedMonth = computed(() => this.month() ?? this.value()?.slice(0, 7) ?? this.todayIso().slice(0, 7), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []));
+    title = computed(() => {
+        const [year, month] = parseParts(this.displayedMonth());
+        return `${this.monthNames()[month - 1]} ${year}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    minMonth = computed(() => this.min()?.slice(0, 7) ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minMonth" }] : /* istanbul ignore next */ []));
+    maxMonth = computed(() => this.max()?.slice(0, 7) ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxMonth" }] : /* istanbul ignore next */ []));
+    canGoPrevious = computed(() => this.isMonthNavigable(shiftMonth(this.displayedMonth(), -1)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : /* istanbul ignore next */ []));
+    canGoNext = computed(() => this.isMonthNavigable(shiftMonth(this.displayedMonth(), 1)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
+    availableSet = computed(() => {
+        const dates = this.availableDates();
+        return dates ? new Set(dates) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableSet" }] : /* istanbul ignore next */ []));
+    markedSet = computed(() => new Set(this.markedDates()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markedSet" }] : /* istanbul ignore next */ []));
+    weeks = computed(() => {
+        const month = this.displayedMonth();
+        const firstDay = `${month}-01`;
+        const lastDay = addDays(`${shiftMonth(month, 1)}-01`, -1);
+        const start = addDays(firstDay, -weekdayIndex(firstDay));
+        const end = addDays(lastDay, 6 - weekdayIndex(lastDay));
+        const weeks = [];
+        let week = [];
+        for (let iso = start; iso <= end; iso = addDays(iso, 1)) {
+            week.push(this.buildDay(iso, month));
+            if (week.length === 7) {
+                weeks.push(week);
+                week = [];
+            }
+        }
+        return weeks;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    /** La única celda con `tabindex="0"` (roving tabindex). */
+    activeDate = computed(() => {
+        const month = this.displayedMonth();
+        const inMonth = (iso) => iso?.slice(0, 7) === month;
+        const focused = this.focusedDate();
+        if (inMonth(focused)) {
+            return focused;
+        }
+        const value = this.value();
+        if (inMonth(value)) {
+            return value;
+        }
+        const today = this.todayIso();
+        if (inMonth(today)) {
+            return today;
+        }
+        const firstSelectable = this.weeks()
+            .flat()
+            .find((day) => day.selectable);
+        return firstSelectable?.iso ?? `${month}-01`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    previousMonth() {
+        if (this.canGoPrevious()) {
+            this.month.set(shiftMonth(this.displayedMonth(), -1));
+        }
+    }
+    nextMonth() {
+        if (this.canGoNext()) {
+            this.month.set(shiftMonth(this.displayedMonth(), 1));
+        }
+    }
+    selectDay(day) {
+        if (!day.selectable || this.loading()) {
+            return;
+        }
+        this.focusedDate.set(day.iso);
+        if (day.iso !== this.value()) {
+            this.value.set(day.iso);
+        }
+    }
+    onDayFocus(iso) {
+        this.focusedDate.set(iso);
+    }
+    onDayKeydown(event, iso) {
+        const target = keyboardTarget(event.key, iso);
+        if (target === null) {
+            return;
+        }
+        event.preventDefault();
+        const targetMonth = target.slice(0, 7);
+        if (!this.isMonthNavigable(targetMonth)) {
+            return;
+        }
+        this.focusedDate.set(target);
+        if (targetMonth !== this.displayedMonth()) {
+            this.month.set(targetMonth);
+        }
+        // Si cambió el mes, la celda destino todavía no existe en el DOM.
+        afterNextRender(() => this.focusDay(target), { injector: this.injector });
+    }
+    focusDay(iso) {
+        this.host.nativeElement.querySelector(`[data-date="${iso}"]`)?.focus();
+    }
+    isMonthNavigable(month) {
+        const min = this.minMonth();
+        const max = this.maxMonth();
+        return (min === null || month >= min) && (max === null || month <= max);
+    }
+    buildDay(iso, displayedMonth) {
+        const [year, month, day] = parseParts(iso);
+        const inMonth = iso.slice(0, 7) === displayedMonth;
+        const min = this.min();
+        const max = this.max();
+        const available = this.availableSet();
+        const marked = this.markedSet().has(iso);
+        const weekdayName = this.weekdayNames()[weekdayIndex(iso)];
+        const monthName = this.monthNames()[month - 1].toLowerCase();
+        const baseLabel = `${weekdayName} ${day} de ${monthName} de ${year}`;
+        return {
+            iso,
+            day,
+            inMonth,
+            selectable: inMonth &&
+                (min === null || iso >= min) &&
+                (max === null || iso <= max) &&
+                (available === null || available.has(iso)),
+            selected: iso === this.value(),
+            marked,
+            today: iso === this.todayIso(),
+            ariaLabel: marked ? `${baseLabel}, ${this.markedLabel()}` : baseLabel,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Calendar, isStandalone: true, selector: "kf-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, availableDates: { classPropertyName: "availableDates", publicName: "availableDates", isSignal: true, isRequired: false, transformFunction: null }, markedDates: { classPropertyName: "markedDates", publicName: "markedDates", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, monthNames: { classPropertyName: "monthNames", publicName: "monthNames", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null }, weekdayNames: { classPropertyName: "weekdayNames", publicName: "weekdayNames", isSignal: true, isRequired: false, transformFunction: null }, markedLabel: { classPropertyName: "markedLabel", publicName: "markedLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", month: "monthChange" }, ngImport: i0, template: "<div class=\"kf-calendar\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"kf-calendar__header\">\n    <kf-button\n      variant=\"ghost\"\n      shape=\"circle\"\n      size=\"lg\"\n      type=\"button\"\n      icon=\"chevron-left\"\n      [ariaLabel]=\"previousMonthLabel()\"\n      [disabled]=\"!canGoPrevious()\"\n      (click)=\"previousMonth()\"\n    />\n    <kf-text\n      class=\"kf-calendar__title\"\n      as=\"span\"\n      variant=\"title-sm\"\n      aria-live=\"polite\"\n      [attr.id]=\"titleId\"\n      >{{ title() }}</kf-text\n    >\n    <kf-button\n      variant=\"ghost\"\n      shape=\"circle\"\n      size=\"lg\"\n      type=\"button\"\n      icon=\"chevron-right\"\n      [ariaLabel]=\"nextMonthLabel()\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"nextMonth()\"\n    />\n  </div>\n\n  <div\n    class=\"kf-calendar__grid\"\n    role=\"grid\"\n    [class.kf-calendar__grid--loading]=\"loading()\"\n    [attr.aria-labelledby]=\"titleId\"\n    [attr.aria-busy]=\"loading() || null\"\n  >\n    <div class=\"kf-calendar__row\" role=\"row\">\n      @for (label of weekdayLabels(); track $index) {\n        <span\n          class=\"kf-calendar__weekday kf-overline-text\"\n          role=\"columnheader\"\n          [attr.aria-label]=\"weekdayNames()[$index]\"\n          >{{ label }}</span\n        >\n      }\n    </div>\n\n    @for (week of weeks(); track week[0].iso) {\n      <div class=\"kf-calendar__row\" role=\"row\">\n        @for (day of week; track day.iso) {\n          @if (day.inMonth) {\n            <button\n              type=\"button\"\n              role=\"gridcell\"\n              class=\"kf-calendar__day\"\n              [class.kf-calendar__day--selectable]=\"day.selectable\"\n              [class.kf-calendar__day--selected]=\"day.selected\"\n              [class.kf-calendar__day--today]=\"day.today\"\n              [class.kf-calendar__day--marked]=\"day.marked\"\n              [attr.data-date]=\"day.iso\"\n              [attr.aria-label]=\"day.ariaLabel\"\n              [attr.aria-selected]=\"day.selected\"\n              [attr.aria-disabled]=\"!day.selectable\"\n              [attr.aria-current]=\"day.today ? 'date' : null\"\n              [attr.tabindex]=\"day.iso === activeDate() ? 0 : -1\"\n              (click)=\"selectDay(day)\"\n              (focus)=\"onDayFocus(day.iso)\"\n              (keydown)=\"onDayKeydown($event, day.iso)\"\n            >\n              {{ day.day }}\n            </button>\n          } @else {\n            <span role=\"gridcell\" class=\"kf-calendar__day kf-calendar__day--outside\">\n              <span aria-hidden=\"true\">{{ day.day }}</span>\n            </span>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</div>\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)}:host{display:block}.kf-calendar{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-calendar__title{flex:1;text-align:center}.kf-calendar__grid{display:flex;flex-direction:column;gap:2px;transition:opacity .2s ease}.kf-calendar__grid--loading{opacity:.5;cursor:progress}.kf-calendar__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.kf-calendar__weekday{display:flex;align-items:center;justify-content:center;min-height:32px}.kf-calendar__day{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0;box-sizing:border-box;border:none;border-radius:var(--kf-radius-sm);background:transparent;font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted);cursor:default;transition:background-color .14s,color .14s}.kf-calendar__day--selectable{font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink);cursor:pointer}.kf-calendar__grid--loading .kf-calendar__day--selectable{cursor:progress}.kf-calendar__day--selectable:hover:not(.kf-calendar__day--selected){background:var(--kf-color-primary-soft)}.kf-calendar__day:focus-visible{z-index:1;outline:2px solid var(--kf-color-primary);outline-offset:1px}.kf-calendar__day--today{box-shadow:inset 0 0 0 1.5px var(--kf-color-primary)}.kf-calendar__day--selected{background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-calendar__day--selected:hover{background:var(--kf-color-primary-hover)}.kf-calendar__day--outside{color:var(--kf-color-gray-400)}.kf-calendar__day--marked:after{content:\"\";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary)}.kf-calendar__day--selected.kf-calendar__day--marked:after{background:var(--kf-color-white)}@media(prefers-reduced-motion:reduce){.kf-calendar__grid,.kf-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: Button, selector: "kf-button", inputs: ["variant", "size", "shape", "disabled", "type", "icon", "block", "loading", "ariaLabel", "ariaExpanded", "ariaPressed"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Calendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Button, Text], template: "<div class=\"kf-calendar\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <div class=\"kf-calendar__header\">\n    <kf-button\n      variant=\"ghost\"\n      shape=\"circle\"\n      size=\"lg\"\n      type=\"button\"\n      icon=\"chevron-left\"\n      [ariaLabel]=\"previousMonthLabel()\"\n      [disabled]=\"!canGoPrevious()\"\n      (click)=\"previousMonth()\"\n    />\n    <kf-text\n      class=\"kf-calendar__title\"\n      as=\"span\"\n      variant=\"title-sm\"\n      aria-live=\"polite\"\n      [attr.id]=\"titleId\"\n      >{{ title() }}</kf-text\n    >\n    <kf-button\n      variant=\"ghost\"\n      shape=\"circle\"\n      size=\"lg\"\n      type=\"button\"\n      icon=\"chevron-right\"\n      [ariaLabel]=\"nextMonthLabel()\"\n      [disabled]=\"!canGoNext()\"\n      (click)=\"nextMonth()\"\n    />\n  </div>\n\n  <div\n    class=\"kf-calendar__grid\"\n    role=\"grid\"\n    [class.kf-calendar__grid--loading]=\"loading()\"\n    [attr.aria-labelledby]=\"titleId\"\n    [attr.aria-busy]=\"loading() || null\"\n  >\n    <div class=\"kf-calendar__row\" role=\"row\">\n      @for (label of weekdayLabels(); track $index) {\n        <span\n          class=\"kf-calendar__weekday kf-overline-text\"\n          role=\"columnheader\"\n          [attr.aria-label]=\"weekdayNames()[$index]\"\n          >{{ label }}</span\n        >\n      }\n    </div>\n\n    @for (week of weeks(); track week[0].iso) {\n      <div class=\"kf-calendar__row\" role=\"row\">\n        @for (day of week; track day.iso) {\n          @if (day.inMonth) {\n            <button\n              type=\"button\"\n              role=\"gridcell\"\n              class=\"kf-calendar__day\"\n              [class.kf-calendar__day--selectable]=\"day.selectable\"\n              [class.kf-calendar__day--selected]=\"day.selected\"\n              [class.kf-calendar__day--today]=\"day.today\"\n              [class.kf-calendar__day--marked]=\"day.marked\"\n              [attr.data-date]=\"day.iso\"\n              [attr.aria-label]=\"day.ariaLabel\"\n              [attr.aria-selected]=\"day.selected\"\n              [attr.aria-disabled]=\"!day.selectable\"\n              [attr.aria-current]=\"day.today ? 'date' : null\"\n              [attr.tabindex]=\"day.iso === activeDate() ? 0 : -1\"\n              (click)=\"selectDay(day)\"\n              (focus)=\"onDayFocus(day.iso)\"\n              (keydown)=\"onDayKeydown($event, day.iso)\"\n            >\n              {{ day.day }}\n            </button>\n          } @else {\n            <span role=\"gridcell\" class=\"kf-calendar__day kf-calendar__day--outside\">\n              <span aria-hidden=\"true\">{{ day.day }}</span>\n            </span>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <ng-content select=\"[footer]\" />\n</div>\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)}:host{display:block}.kf-calendar{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-calendar__title{flex:1;text-align:center}.kf-calendar__grid{display:flex;flex-direction:column;gap:2px;transition:opacity .2s ease}.kf-calendar__grid--loading{opacity:.5;cursor:progress}.kf-calendar__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.kf-calendar__weekday{display:flex;align-items:center;justify-content:center;min-height:32px}.kf-calendar__day{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0;box-sizing:border-box;border:none;border-radius:var(--kf-radius-sm);background:transparent;font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted);cursor:default;transition:background-color .14s,color .14s}.kf-calendar__day--selectable{font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink);cursor:pointer}.kf-calendar__grid--loading .kf-calendar__day--selectable{cursor:progress}.kf-calendar__day--selectable:hover:not(.kf-calendar__day--selected){background:var(--kf-color-primary-soft)}.kf-calendar__day:focus-visible{z-index:1;outline:2px solid var(--kf-color-primary);outline-offset:1px}.kf-calendar__day--today{box-shadow:inset 0 0 0 1.5px var(--kf-color-primary)}.kf-calendar__day--selected{background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-calendar__day--selected:hover{background:var(--kf-color-primary-hover)}.kf-calendar__day--outside{color:var(--kf-color-gray-400)}.kf-calendar__day--marked:after{content:\"\";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary)}.kf-calendar__day--selected.kf-calendar__day--marked:after{background:var(--kf-color-white)}@media(prefers-reduced-motion:reduce){.kf-calendar__grid,.kf-calendar__day{transition:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], availableDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDates", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], monthNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthNames", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], weekdayNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayNames", required: false }] }], markedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedLabel", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }] } });
+function pad(value) {
+    return String(value).padStart(2, '0');
+}
+function parseParts(iso) {
+    return iso.split('-').map(Number);
+}
+function fromUtc(date) {
+    return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+}
+function localTodayIso() {
+    const now = new Date();
+    return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+}
+function addDays(iso, days) {
+    const [year, month, day] = parseParts(iso);
+    return fromUtc(new Date(Date.UTC(year, month - 1, day + days)));
+}
+/** 0 = lunes … 6 = domingo. */
+function weekdayIndex(iso) {
+    const [year, month, day] = parseParts(iso);
+    return (new Date(Date.UTC(year, month - 1, day)).getUTCDay() + 6) % 7;
+}
+function shiftMonth(yearMonth, delta) {
+    const [year, month] = parseParts(yearMonth);
+    const date = new Date(Date.UTC(year, month - 1 + delta, 1));
+    return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}`;
+}
+/** Mismo día en otro mes, acotado al último día de ese mes. */
+function shiftDateByMonths(iso, delta) {
+    const targetMonth = shiftMonth(iso.slice(0, 7), delta);
+    const lastDay = parseParts(addDays(`${shiftMonth(targetMonth, 1)}-01`, -1))[2];
+    const day = Math.min(parseParts(iso)[2], lastDay);
+    return `${targetMonth}-${pad(day)}`;
+}
+function keyboardTarget(key, iso) {
+    switch (key) {
+        case 'ArrowLeft':
+            return addDays(iso, -1);
+        case 'ArrowRight':
+            return addDays(iso, 1);
+        case 'ArrowUp':
+            return addDays(iso, -7);
+        case 'ArrowDown':
+            return addDays(iso, 7);
+        case 'Home':
+            return addDays(iso, -weekdayIndex(iso));
+        case 'End':
+            return addDays(iso, 6 - weekdayIndex(iso));
+        case 'PageUp':
+            return shiftDateByMonths(iso, -1);
+        case 'PageDown':
+            return shiftDateByMonths(iso, 1);
+        default:
+            return null;
+    }
+}
+
 /**
  * Contenedor base con esquinas redondeadas y sombra sutil — la base visual
  * de paneles, tarjetas de métrica, tablas y bloques de contenido de todo el
@@ -3510,6 +3808,10 @@ class Input {
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Teclado virtual sugerido en mobile (ej. `"numeric"` para montos o
+     * kilometraje) — sin valor, el navegador decide según `type`. */
+    inputmode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputmode" }] : /* istanbul ignore next */ []));
     /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inputId = `kf-input-${Input.nextId++}`;
@@ -3587,13 +3889,13 @@ class Input {
         this.passwordVisible.update((visible) => !visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Input, isStandalone: true, selector: "kf-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Input, isStandalone: true, selector: "kf-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => Input),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".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)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".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)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Input, decorators: [{
             type: Component,
@@ -3603,8 +3905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             useExisting: forwardRef(() => Input),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".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)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
-        }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }] } });
+                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".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)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
+        }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }] } });
 
 let nextId = 0;
 /**
@@ -3860,7 +4162,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", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "toggleable"] }, { 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", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold"], 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", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "inputmode", "toggleable"] }, { 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", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, decorators: [{
             type: Component,
@@ -4374,6 +4676,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *     <kf-action-tile-row icon="download" title="Pagos" description="Revisa tu estado de cuenta y realiza pagos." />
  *   </kf-panel>
  *
+ * Para apps con router: escuchar `actionClick` y llamar
+ * `event.preventDefault()` antes de `router.navigateByUrl(...)`. El
+ * `actionHref` se mantiene igual para que click-medio, "abrir en pestaña
+ * nueva" y el hover de la barra de estado sigan funcionando.
+ *
+ *   <kf-panel title="Mis documentos por pagar" actionLabel="Ir a pagos" actionHref="/pagos"
+ *     (actionClick)="$event.preventDefault(); router.navigateByUrl('/pagos')">
+ *     …
+ *   </kf-panel>
+ *
  * El host y el `kf-card` interno son flex column con `flex:1` de punta a
  * punta — si un grid/flex externo estira `kf-panel` a la altura de un
  * hermano más alto, el contenido proyectado hereda esa altura en vez de
@@ -4388,13 +4700,19 @@ class Panel {
     ...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
     actionHref = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "actionHref" }] : /* istanbul ignore next */ []));
+    /**
+     * Click en el link de acción. Incluye el `MouseEvent` para que un
+     * consumidor con router pueda cortar la navegación nativa — mismo patrón
+     * que `itemClick` de `kf-breadcrumb`, sin depender de `@angular/router`.
+     */
+    actionClick = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Panel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Panel, isStandalone: true, selector: "kf-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link class=\"kf-panel__action\" [href]=\"actionHref() || '#'\" showArrow>\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\n", styles: [":host{display:flex;flex-direction:column}kf-card{flex:1}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{flex:none;font-size:.8125rem;font-weight:600}.kf-panel__body{display:flex;flex:1;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { 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: Panel, isStandalone: true, selector: "kf-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, 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" }, ngImport: i0, template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link\n        class=\"kf-panel__action\"\n        [href]=\"actionHref() || '#'\"\n        showArrow\n        (click)=\"actionClick.emit($event)\"\n      >\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\n", styles: [":host{display:flex;flex-direction:column}kf-card{flex:1}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{flex:none;font-size:.8125rem;font-weight:600}.kf-panel__body{display:flex;flex:1;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { 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: Panel, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-panel', imports: [Card, Divider, Link], template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link class=\"kf-panel__action\" [href]=\"actionHref() || '#'\" showArrow>\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\n", styles: [":host{display:flex;flex-direction:column}kf-card{flex:1}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{flex:none;font-size:.8125rem;font-weight:600}.kf-panel__body{display:flex;flex:1;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }] } });
+            args: [{ selector: 'kf-panel', imports: [Card, Divider, Link], template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link\n        class=\"kf-panel__action\"\n        [href]=\"actionHref() || '#'\"\n        showArrow\n        (click)=\"actionClick.emit($event)\"\n      >\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\n", styles: [":host{display:flex;flex-direction:column}kf-card{flex:1}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{flex:none;font-size:.8125rem;font-weight:600}.kf-panel__body{display:flex;flex:1;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], 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"] }] } });
 
 /**
  * Cabecera completa del portal (página 31) — franja de administrador
@@ -4570,11 +4888,11 @@ class Progress {
     clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Progress, isStandalone: true, selector: "kf-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Progress, isStandalone: true, selector: "kf-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--primary{color:var(--kf-color-primary)}.kf-progress__fill.kf-progress--primary{background:var(--kf-color-primary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Progress, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-progress', template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}\n"] }]
+            args: [{ selector: 'kf-progress', template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--primary{color:var(--kf-color-primary)}.kf-progress__fill.kf-progress--primary{background:var(--kf-color-primary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -5314,6 +5632,12 @@ class StatTile {
     ...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
     actionHref = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "actionHref" }] : /* istanbul ignore next */ []));
+    /**
+     * Click en el link de la variante CTA. Incluye el `MouseEvent` para que un
+     * consumidor con router pueda cortar la navegación nativa — mismo patrón
+     * que `actionClick` de `kf-panel`, sin depender de `@angular/router`.
+     */
+    actionClick = output();
     /** 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 */
@@ -5321,15 +5645,15 @@ class StatTile {
     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 } }, 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 class=\"kf-stat-tile__cta-action\" [href]=\"actionHref() || '#'\" showArrow>\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 } }, 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"] }] });
 }
 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 class=\"kf-stat-tile__cta-action\" [href]=\"actionHref() || '#'\" showArrow>\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 }] }] } });
+                    }, 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"] }] } });
 
 /**
  * Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
@@ -5693,6 +6017,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     }, template: "<!--\n  El grid vive en un div interno y no en el `:host`: el host es el CONTENEDOR\n  de consulta (`container-type: inline-size`), y una `@container` dentro de\n  su propia hoja medir\u00EDa el contenedor de m\u00E1s arriba, no a \u00E9l mismo.\n-->\n<div class=\"kf-tile-grid\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;container-type:inline-size;container-name:kf-tile-grid;min-width:0}.kf-tile-grid{display:grid;gap:var(--kf-space-sm);align-items:stretch}:host(.kf-tile-grid--1) .kf-tile-grid{grid-template-columns:minmax(0,1fr)}:host(.kf-tile-grid--2) .kf-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}:host(.kf-tile-grid--3) .kf-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}:host(.kf-tile-grid--4) .kf-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}:host(.kf-tile-grid--5) .kf-tile-grid{grid-template-columns:repeat(5,minmax(0,1fr))}:host(.kf-tile-grid--6) .kf-tile-grid{grid-template-columns:repeat(6,minmax(0,1fr))}@container kf-tile-grid (max-width: 620px){:host(.kf-tile-grid--3) .kf-tile-grid,:host(.kf-tile-grid--4) .kf-tile-grid,:host(.kf-tile-grid--5) .kf-tile-grid,:host(.kf-tile-grid--6) .kf-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@container kf-tile-grid (max-width: 380px){:host(.kf-tile-grid--2) .kf-tile-grid,:host(.kf-tile-grid--3) .kf-tile-grid,:host(.kf-tile-grid--4) .kf-tile-grid,:host(.kf-tile-grid--5) .kf-tile-grid,:host(.kf-tile-grid--6) .kf-tile-grid{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
 
+const SKELETON_COUNT = 8;
+/**
+ * Grilla de horarios seleccionables con semántica de radiogroup: un solo tab
+ * stop, las flechas mueven y seleccionan (saltando los deshabilitados) y
+ * Home/End van al primer/último horario habilitado.
+ *
+ * Si algún horario declara `group`, se rinde un subgrupo con etiqueta por
+ * cada grupo distinto; si no, una sola grilla plana.
+ *
+ *   <kf-time-slot-picker
+ *     ariaLabel="Horario"
+ *     [slots]="[{ value: '09:00', group: 'Mañana' }, { value: '15:30', group: 'Tarde', disabled: true }]"
+ *     [(value)]="time"
+ *     [loading]="loadingSlots()"
+ *   />
+ */
+class TimeSlotPicker {
+    static nextId = 0;
+    slots = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ariaLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Muestra chips de carga en lugar de los horarios. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    emptyLabel = input('No hay horarios disponibles', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    idPrefix = `kf-time-slot-picker-${TimeSlotPicker.nextId++}`;
+    skeletons = Array.from({ length: SKELETON_COUNT }, (_, index) => index);
+    groups = computed(() => {
+        const slots = this.slots();
+        if (!slots.some((slot) => slot.group)) {
+            return [{ id: `${this.idPrefix}-group-0`, label: null, slots }];
+        }
+        const byGroup = new Map();
+        for (const slot of slots) {
+            const key = slot.group ?? '';
+            byGroup.set(key, [...(byGroup.get(key) ?? []), slot]);
+        }
+        return [...byGroup].map(([label, groupSlots], index) => ({
+            id: `${this.idPrefix}-group-${index}`,
+            label: label || null,
+            slots: groupSlots,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Valores habilitados en orden visual — la secuencia de navegación por teclado. */
+    enabledValues = computed(() => this.groups()
+        .flatMap((group) => group.slots)
+        .filter((slot) => !slot.disabled)
+        .map((slot) => slot.value), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabledValues" }] : /* istanbul ignore next */ []));
+    /** El único chip con `tabindex="0"` (roving tabindex). */
+    tabStop = computed(() => {
+        const values = this.enabledValues();
+        const value = this.value();
+        return value !== null && values.includes(value) ? value : (values[0] ?? null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
+    select(slot) {
+        if (slot.disabled || this.loading() || slot.value === this.value()) {
+            return;
+        }
+        this.value.set(slot.value);
+    }
+    onKeydown(event, current) {
+        const values = this.enabledValues();
+        const index = values.indexOf(current);
+        if (index === -1) {
+            return;
+        }
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = (index + 1) % values.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = (index - 1 + values.length) % values.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = values.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const next = values[nextIndex];
+        this.value.set(next);
+        // Se busca por dataset, no por id ni selector: los valores de horario son strings arbitrarios.
+        Array.from(this.host.nativeElement.querySelectorAll('[data-value]'))
+            .find((element) => element.dataset['value'] === next)
+            ?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSlotPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TimeSlotPicker, isStandalone: true, selector: "kf-time-slot-picker", inputs: { slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div class=\"kf-time-slot-picker\" [attr.aria-busy]=\"loading() || null\">\n  @if (loading()) {\n    <div class=\"kf-time-slot-picker__grid\" aria-hidden=\"true\">\n      @for (item of skeletons; track item) {\n        <kf-skeleton variant=\"rect\" height=\"44px\" />\n      }\n    </div>\n  } @else if (slots().length === 0) {\n    <kf-text as=\"p\" variant=\"body-muted\">{{ emptyLabel() }}</kf-text>\n  } @else {\n    <div class=\"kf-time-slot-picker__groups\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n      @for (group of groups(); track group.id) {\n        <div\n          class=\"kf-time-slot-picker__group\"\n          [attr.role]=\"group.label ? 'group' : null\"\n          [attr.aria-labelledby]=\"group.label ? group.id : null\"\n        >\n          @if (group.label) {\n            <span class=\"kf-time-slot-picker__group-label kf-overline-text\" [id]=\"group.id\">{{\n              group.label\n            }}</span>\n          }\n          <div class=\"kf-time-slot-picker__grid\">\n            @for (slot of group.slots; track slot.value) {\n              <button\n                type=\"button\"\n                role=\"radio\"\n                class=\"kf-time-slot-picker__slot\"\n                [class.kf-time-slot-picker__slot--selected]=\"slot.value === value()\"\n                [disabled]=\"slot.disabled\"\n                [attr.aria-checked]=\"slot.value === value()\"\n                [attr.tabindex]=\"slot.value === tabStop() ? 0 : -1\"\n                [attr.data-value]=\"slot.value\"\n                (click)=\"select(slot)\"\n                (keydown)=\"onKeydown($event, slot.value)\"\n              >\n                {{ slot.label ?? slot.value }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}:host{display:block}.kf-time-slot-picker__groups{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-time-slot-picker__group{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-time-slot-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--kf-space-sm)}.kf-time-slot-picker__slot{min-height:44px;padding:0 var(--kf-space-sm);box-sizing:border-box;border:1.5px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);font-variant-numeric:tabular-nums;color:var(--kf-color-ink);cursor:pointer;transition:background-color .14s,border-color .14s,color .14s}.kf-time-slot-picker__slot:hover:not(:disabled):not(.kf-time-slot-picker__slot--selected){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}.kf-time-slot-picker__slot:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px}.kf-time-slot-picker__slot--selected{border-color:var(--kf-color-primary);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-time-slot-picker__slot:disabled{background:var(--kf-color-surface);color:var(--kf-color-text-muted);font-weight:var(--kf-font-weight-body);text-decoration:line-through;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.kf-time-slot-picker__slot{transition:none}}\n"], dependencies: [{ kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSlotPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-time-slot-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Skeleton, Text], template: "<div class=\"kf-time-slot-picker\" [attr.aria-busy]=\"loading() || null\">\n  @if (loading()) {\n    <div class=\"kf-time-slot-picker__grid\" aria-hidden=\"true\">\n      @for (item of skeletons; track item) {\n        <kf-skeleton variant=\"rect\" height=\"44px\" />\n      }\n    </div>\n  } @else if (slots().length === 0) {\n    <kf-text as=\"p\" variant=\"body-muted\">{{ emptyLabel() }}</kf-text>\n  } @else {\n    <div class=\"kf-time-slot-picker__groups\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n      @for (group of groups(); track group.id) {\n        <div\n          class=\"kf-time-slot-picker__group\"\n          [attr.role]=\"group.label ? 'group' : null\"\n          [attr.aria-labelledby]=\"group.label ? group.id : null\"\n        >\n          @if (group.label) {\n            <span class=\"kf-time-slot-picker__group-label kf-overline-text\" [id]=\"group.id\">{{\n              group.label\n            }}</span>\n          }\n          <div class=\"kf-time-slot-picker__grid\">\n            @for (slot of group.slots; track slot.value) {\n              <button\n                type=\"button\"\n                role=\"radio\"\n                class=\"kf-time-slot-picker__slot\"\n                [class.kf-time-slot-picker__slot--selected]=\"slot.value === value()\"\n                [disabled]=\"slot.disabled\"\n                [attr.aria-checked]=\"slot.value === value()\"\n                [attr.tabindex]=\"slot.value === tabStop() ? 0 : -1\"\n                [attr.data-value]=\"slot.value\"\n                (click)=\"select(slot)\"\n                (keydown)=\"onKeydown($event, slot.value)\"\n              >\n                {{ slot.label ?? slot.value }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}:host{display:block}.kf-time-slot-picker__groups{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-time-slot-picker__group{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-time-slot-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--kf-space-sm)}.kf-time-slot-picker__slot{min-height:44px;padding:0 var(--kf-space-sm);box-sizing:border-box;border:1.5px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);font-variant-numeric:tabular-nums;color:var(--kf-color-ink);cursor:pointer;transition:background-color .14s,border-color .14s,color .14s}.kf-time-slot-picker__slot:hover:not(:disabled):not(.kf-time-slot-picker__slot--selected){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}.kf-time-slot-picker__slot:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px}.kf-time-slot-picker__slot--selected{border-color:var(--kf-color-primary);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-time-slot-picker__slot:disabled{background:var(--kf-color-surface);color:var(--kf-color-text-muted);font-weight:var(--kf-font-weight-body);text-decoration:line-through;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.kf-time-slot-picker__slot{transition:none}}\n"] }]
+        }], propDecorators: { slots: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }] } });
+
 /** Fixed icon per tone (page 20 of the design system) — not configurable per call. */
 const TOAST_ICON = {
     success: 'check-circle',
@@ -5902,5 +6334,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, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, Link, MetricCard, Modal, MultiSelect, NoteBlock, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, Link, MetricCard, Modal, MultiSelect, NoteBlock, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal };
 //# sourceMappingURL=kaufmann-lab-ui-core.mjs.map