@kaufmann-lab/ui 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaufmann-lab/ui",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Shared Angular component library for the Kaufmann frontends",
   "license": "MIT",
   "author": "Kaufmann Lab",

package/types/kaufmann-lab-ui-business.d.ts

@@ -8,6 +8,18 @@ interface CompanySelectorMeta {
     label: string;
     value: string;
 }
+/**
+ * Empresa elegible. `value` es el identificador único (ej. número de
+ * cuenta) — dos empresas con el mismo `label` se seleccionan por separado.
+ * `tag` se muestra como badge junto al nombre (ej. 'Personal' | 'Empresa')
+ * y `detail` como línea secundaria en el panel (ej. 'RUC 20434860808').
+ */
+interface CompanySelectorOption {
+    value: string;
+    label: string;
+    tag?: string;
+    detail?: string;
+}
 /**
  * Conmutador de empresa activa con metadatos clave (página 32) — encabeza
  * la pantalla de inicio del portal. Compone `kf-select` para el propio
@@ -25,10 +37,22 @@ interface CompanySelectorMeta {
  *       { label: 'Sucursal', value: 'Sucursal Norte' },
  *     ]"
  *   />
+ *
+ * Con opciones en forma de objeto, `value`/`valueChange` usan el `value` de
+ * la opción, no su nombre:
+ *
+ *   <kf-company-selector
+ *     [companies]="[
+ *       { value: '1002099', label: 'DIANA CAROLINA PINZÓN MALDONADO', tag: 'Personal', detail: 'DNI 46594489' },
+ *       { value: '1004410', label: 'TRANSPORTES VIRGEN DE LA AGRICULTURA', tag: 'Empresa', detail: 'RUC 20434860808' },
+ *     ]"
+ *     [value]="activeAccount()"
+ *     (valueChange)="activeAccount.set($event)"
+ *   />
  */
 declare class CompanySelector {
     readonly label: _angular_core.InputSignal<string>;
-    readonly companies: _angular_core.InputSignal<string[]>;
+    readonly companies: _angular_core.InputSignal<readonly (string | CompanySelectorOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly meta: _angular_core.InputSignal<CompanySelectorMeta[]>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
@@ -247,6 +271,15 @@ declare class QuotePicker<T = unknown> {
  *     <kf-button actions icon="calendar">Reservar hora</kf-button>
  *     <kf-button actions variant="outline" icon="list">Ver agenda</kf-button>
  *   </kf-reserve-block>
+ *
+ * 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-reserve-block title="¿Necesitas mantención?" actionLabel="Agenda tu reserva aquí"
+ *     actionHref="/taller/agendar"
+ *     (actionClick)="$event.preventDefault(); router.navigateByUrl('/taller/agendar')" />
  */
 declare class ReserveBlock {
     readonly emptyLabel: _angular_core.InputSignal<string>;
@@ -256,8 +289,14 @@ declare class ReserveBlock {
     readonly actionHref: _angular_core.InputSignal<string | undefined>;
     /** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
     readonly grow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Click en el link de la invitació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`.
+     */
+    readonly actionClick: _angular_core.OutputEmitterRef<MouseEvent>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReserveBlock, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["[actions]"], true, never>;
 }
 
 /**
@@ -295,4 +334,4 @@ declare class VehicleHeader {
 }
 
 export { CompanySelector, QuotePicker, ReserveBlock, VehicleHeader };
-export type { CompanySelectorMeta, QuotePickerChip, QuotePickerSortOption, VehicleHeaderStatus };
+export type { CompanySelectorMeta, CompanySelectorOption, QuotePickerChip, QuotePickerSortOption, VehicleHeaderStatus };

package/types/kaufmann-lab-ui-core.d.ts

@@ -383,6 +383,102 @@ declare class BucketProgress {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BucketProgress, "kf-bucket-progress", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Una celda ya resuelta de la grilla del mes. */
+interface CalendarDay {
+    /** ISO date, `YYYY-MM-DD`. */
+    iso: string;
+    day: number;
+    inMonth: boolean;
+    selectable: boolean;
+    selected: boolean;
+    marked: boolean;
+    today: boolean;
+    ariaLabel: string;
+}
+/**
+ * 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>
+ */
+declare class Calendar {
+    private static nextId;
+    /** Fecha seleccionada, ISO `YYYY-MM-DD`. */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    /** Mes visible, `YYYY-MM`. En `null` se deriva de `value` y, si no hay, de hoy. */
+    readonly month: _angular_core.ModelSignal<string | null>;
+    /** Fecha mínima seleccionable (inclusive), ISO. */
+    readonly min: _angular_core.InputSignal<string | null>;
+    /** Fecha máxima seleccionable (inclusive), ISO. */
+    readonly max: _angular_core.InputSignal<string | null>;
+    /** `null`: toda fecha dentro de `min`/`max` es seleccionable. Arreglo: solo esas fechas. */
+    readonly availableDates: _angular_core.InputSignal<readonly string[] | null>;
+    /** Fechas con punto marcador, independiente de si son seleccionables. */
+    readonly markedDates: _angular_core.InputSignal<readonly string[]>;
+    /** Reemplaza el "hoy" local (tests/SSR), ISO. */
+    readonly today: _angular_core.InputSignal<string | null>;
+    /** Atenúa la grilla y bloquea la selección mientras carga la disponibilidad. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Los 12 nombres de mes, partiendo en enero. */
+    readonly monthNames: _angular_core.InputSignal<readonly string[]>;
+    /** Las 7 iniciales visibles de los días, partiendo en lunes. */
+    readonly weekdayLabels: _angular_core.InputSignal<readonly string[]>;
+    /** Los 7 nombres completos de los días, partiendo en lunes — se usan en los nombres accesibles. */
+    readonly weekdayNames: _angular_core.InputSignal<readonly string[]>;
+    /** Se agrega al nombre accesible de una fecha marcada. */
+    readonly markedLabel: _angular_core.InputSignal<string>;
+    readonly previousMonthLabel: _angular_core.InputSignal<string>;
+    readonly nextMonthLabel: _angular_core.InputSignal<string>;
+    private readonly host;
+    private readonly injector;
+    private readonly focusedDate;
+    protected readonly titleId: string;
+    protected readonly todayIso: _angular_core.Signal<string>;
+    protected readonly displayedMonth: _angular_core.Signal<string>;
+    protected readonly title: _angular_core.Signal<string>;
+    private readonly minMonth;
+    private readonly maxMonth;
+    protected readonly canGoPrevious: _angular_core.Signal<boolean>;
+    protected readonly canGoNext: _angular_core.Signal<boolean>;
+    private readonly availableSet;
+    private readonly markedSet;
+    protected readonly weeks: _angular_core.Signal<CalendarDay[][]>;
+    /** La única celda con `tabindex="0"` (roving tabindex). */
+    protected readonly activeDate: _angular_core.Signal<string>;
+    previousMonth(): void;
+    nextMonth(): void;
+    protected selectDay(day: CalendarDay): void;
+    protected onDayFocus(iso: string): void;
+    protected onDayKeydown(event: KeyboardEvent, iso: string): void;
+    private focusDay;
+    private isMonthNavigable;
+    private buildDay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Calendar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Calendar, "kf-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "month": { "alias": "month"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "availableDates": { "alias": "availableDates"; "required": false; "isSignal": true; }; "markedDates": { "alias": "markedDates"; "required": false; "isSignal": true; }; "today": { "alias": "today"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "monthNames": { "alias": "monthNames"; "required": false; "isSignal": true; }; "weekdayLabels": { "alias": "weekdayLabels"; "required": false; "isSignal": true; }; "weekdayNames": { "alias": "weekdayNames"; "required": false; "isSignal": true; }; "markedLabel": { "alias": "markedLabel"; "required": false; "isSignal": true; }; "previousMonthLabel": { "alias": "previousMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "month": "monthChange"; }, never, ["[footer]"], true, never>;
+}
+
 /**
  * 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
@@ -1670,6 +1766,9 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly type: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** Teclado virtual sugerido en mobile (ej. `"numeric"` para montos o
+     * kilometraje) — sin valor, el navegador decide según `type`. */
+    readonly inputmode: _angular_core.InputSignal<string | undefined>;
     /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
     readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly inputId: string;
@@ -1708,7 +1807,7 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
      */
     protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
@@ -2087,6 +2186,16 @@ declare class Pagination {
  *     <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
@@ -2098,8 +2207,14 @@ declare class Panel {
     readonly title: _angular_core.InputSignal<string>;
     readonly actionLabel: _angular_core.InputSignal<string | undefined>;
     readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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`.
+     */
+    readonly actionClick: _angular_core.OutputEmitterRef<MouseEvent>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Panel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["*"], true, never>;
 }
 
 /** Un ítem de navegación de la barra de marca. `icon` es opcional y solo se
@@ -2234,10 +2349,11 @@ declare class PortalHeader {
 
 /** Mismo vocabulario que `Badge.tone`/`TextTone` (menos `info`/`service`,
  * que no aplican a un valor de progreso): `neutral` es el color de marca
- * por defecto (sin implicar buen/mal estado), `ok`/`warn`/`error` sí
- * comunican severidad. La librería no conoce el dominio que produce ese
+ * por defecto (sin implicar buen/mal estado), `primary` es el color
+ * primario para un avance de proceso (ej. una carga), y `ok`/`warn`/`error`
+ * sí comunican severidad. La librería no conoce el dominio que produce ese
  * valor (SLA, storage, lo que sea) — el consumidor decide qué tone usar. */
-type ProgressTone = 'neutral' | 'ok' | 'warn' | 'error';
+type ProgressTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error';
 /**
  * Barra de progreso de un solo valor (0-100%) con color por severidad —
  * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
@@ -2512,10 +2628,16 @@ declare class Segmented {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Segmented, "kf-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-/** Normalized shape used internally once `options` (string[] or object[]) is resolved. */
+/**
+ * Opción en forma de objeto. `tag` se muestra como `kf-badge` a la derecha
+ * del label (en el panel y en el trigger) y `detail` como línea secundaria
+ * atenuada debajo, solo en el panel. Ambos entran en la búsqueda.
+ */
 interface SelectOption {
     value: string;
     label: string;
+    tag?: string;
+    detail?: string;
 }
 /**
  * Dropdown de selección simple con panel propio — NUNCA usa el `<select>`
@@ -2528,6 +2650,7 @@ interface SelectOption {
  *
  *   <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
  *   <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
+ *   <kf-select [options]="[{ value: '1002099', label: 'BBVA', tag: 'Empresa', detail: 'RUC 20100130204' }]" />
  *
  * `variant="compact"` cambia el ancho de `240px` fijo a intrínseco con un
  * techo de `160px` (se ajusta al contenido de la opción seleccionada hasta
@@ -2547,7 +2670,7 @@ interface SelectOption {
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
-    readonly options: _angular_core.InputSignal<string[] | SelectOption[]>;
+    readonly options: _angular_core.InputSignal<readonly (string | SelectOption)[]>;
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2579,7 +2702,7 @@ declare class Select {
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     readonly searchQuery: _angular_core.WritableSignal<string>;
     readonly activeIndex: _angular_core.WritableSignal<number>;
-    /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
+    /** Resolves `string | SelectOption` entries into a single shape for the template. */
     readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
     readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
     readonly showSearch: _angular_core.Signal<boolean>;
@@ -2598,6 +2721,8 @@ declare class Select {
      */
     onDocumentEscape(): void;
     toggle(): void;
+    /** Nombre accesible explícito solo para opciones con `tag`/`detail`, para separar las partes al leerlas. */
+    optionAriaLabel(option: SelectOption): string | null;
     select(option: SelectOption): void;
     onSearchInput(event: Event): void;
     /**
@@ -2860,12 +2985,18 @@ declare class StatTile {
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly actionLabel: _angular_core.InputSignal<string | undefined>;
     readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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`.
+     */
+    readonly actionClick: _angular_core.OutputEmitterRef<MouseEvent>;
     /** Texto real de la nota. `null` significa "no reservar la línea": pasa
      * solo cuando el consumidor no declaró ni nota ni placeholder. */
     protected readonly noteText: _angular_core.Signal<string | null>;
     protected readonly noteIsPlaceholder: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[valueContent]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, ["[valueContent]"], true, never>;
 }
 
 /**
@@ -3073,6 +3204,55 @@ declare class TileGrid {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileGrid, "kf-tile-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+interface TimeSlot {
+    value: string;
+    /** Texto visible; por defecto, `value`. */
+    label?: string;
+    disabled?: boolean;
+    /** Los horarios con el mismo `group` se rinden juntos bajo esa etiqueta, en orden de aparición. */
+    group?: string;
+}
+/**
+ * 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()"
+ *   />
+ */
+declare class TimeSlotPicker {
+    private static nextId;
+    readonly slots: _angular_core.InputSignal<readonly TimeSlot[]>;
+    readonly value: _angular_core.ModelSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Muestra chips de carga en lugar de los horarios. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly emptyLabel: _angular_core.InputSignal<string>;
+    private readonly host;
+    private readonly idPrefix;
+    protected readonly skeletons: number[];
+    protected readonly groups: _angular_core.Signal<{
+        id: string;
+        label: string | null;
+        slots: readonly TimeSlot[];
+    }[]>;
+    /** Valores habilitados en orden visual — la secuencia de navegación por teclado. */
+    private readonly enabledValues;
+    /** El único chip con `tabindex="0"` (roving tabindex). */
+    protected readonly tabStop: _angular_core.Signal<string>;
+    protected select(slot: TimeSlot): void;
+    protected onKeydown(event: KeyboardEvent, current: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimeSlotPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeSlotPicker, "kf-time-slot-picker", never, { "slots": { "alias": "slots"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
 /**
  * Visual tone of a toast. Maps to the state tokens in
  * projects/ui/src/tokens/base.css. `loading` has no auto-dismiss and shows an
@@ -3284,5 +3464,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-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 type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };
+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 };
+export type { AlertRowTone, AlertTone, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };