@kaufmann-lab/ui 0.1.27 → 0.1.28

package/package.json

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

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

@@ -220,11 +220,44 @@ declare class Button {
 type AlertTone = 'info' | 'ok' | 'warn' | 'error';
 /** Forma del aviso: `card` (default, con borde y esquinas) o `bar` (franja compacta de ancho completo). */
 type AlertVariant = 'card' | 'bar';
+/**
+ * Apariencia de la variante `card`: `tile` (default), `tint` o `rail`. Ver el
+ * JSDoc de `Alert` para cuándo usar cada una.
+ */
+type AlertAppearance = 'tile' | 'tint' | 'rail';
 /**
  * Banner contextual que vive dentro del flujo: validaciones, avisos de
  * vencimiento, confirmaciones. Persiste hasta que se descarta o hasta que la
  * condición que lo causó desaparece — para feedback efímero está el toast.
  *
+ * Diseño sobrio: el título va en peso 600 con la tipografía de cuerpo y el
+ * mensaje con medida de lectura limitada, ambos en los neutros del sistema (el
+ * color del tono nunca se usa para texto). El ícono va centrado en vertical
+ * respecto al aviso. El color sale siempre de los tokens (`*-strong`), nunca de
+ * un input. Ninguna apariencia lleva borde ni acento lateral de color.
+ *
+ * `appearance` elige cómo se muestra el tono (solo aplica a `variant="card"`):
+ *
+ * - `tile` (default): aviso estándar dentro de pantallas y cards. Tarjeta de
+ *   superficie y borde neutros; el color vive solo en el ícono, un tile sólido de
+ *   40px con glifo blanco.
+ *
+ *     <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
+ *
+ * - `tint`: aviso liviano sobre fondos neutros o en zonas densas, donde el tinte
+ *   basta. Relleno suave del tono, sin borde ni tile; glifo de 24px en el color
+ *   fuerte del tono.
+ *
+ *     <kf-alert appearance="tint" tone="info">Cita confirmada para el jueves.</kf-alert>
+ *
+ * - `rail`: aviso destacado que debe notarse al primer vistazo, p. ej. errores o
+ *   bloqueos. Panel de ícono de 56px a todo el alto, con el fondo del tono más
+ *   intenso, y cuerpo neutro con borde neutro.
+ *
+ *     <kf-alert appearance="rail" tone="error" title="Pago rechazado">
+ *       Tu banco no autorizó el cargo.
+ *     </kf-alert>
+ *
  * `open` es two-way: el botón de cerrar lo pone en `false` y el componente
  * deja de renderizar. El consumidor puede volver a abrirlo poniéndolo en
  * `true` (ej. cuando la validación falla otra vez).
@@ -238,13 +271,16 @@ type AlertVariant = 'card' | 'bar';
  * tonos y mismo `role` (`alert` para `error`/`warn`, `status` para el resto)
  * que la variante `card`. Pensada para el borde de una página o de un panel
  * (ej. "Estás viendo datos de otro cliente"), donde una tarjeta con margen
- * sobra.
+ * sobra. `variant="bar"` ignora `appearance`: la franja siempre usa su propia
+ * superficie tintada.
  *
  *   <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
  *
- * Los elementos con el atributo `kfAlertActions` se proyectan en una fila
- * propia bajo el mensaje (con salto de línea si no caben, también en la
- * variante `bar`). Sin ellos la fila no existe y el aviso queda igual.
+ * Los elementos con el atributo `kfAlertActions` se proyectan a la derecha del
+ * mensaje cuando hay ancho y, si no caben, en una fila propia bajo él, apilados
+ * y alineados al inicio (en la variante `bar` siempre van en fila propia). Si los
+ * envuelves en un solo `<div kfAlertActions>`, el aviso separa a sus hijos (12px).
+ * Sin ellos la zona no existe y el aviso queda igual.
  *
  *   <kf-alert tone="warn" title="SOAT por vencer">
  *     Vence el 15/08.
@@ -255,7 +291,12 @@ declare class Alert {
     readonly tone: _angular_core.InputSignal<AlertTone>;
     /** `card` (default) o `bar` (franja compacta de ancho completo). */
     readonly variant: _angular_core.InputSignal<AlertVariant>;
-    /** Línea en negrita arriba del mensaje. Vacío deja solo el contenido proyectado. */
+    /**
+     * `tile` (default), `tint` o `rail`. Solo aplica a `variant="card"`; `bar` la
+     * ignora. Se expone en el host como `data-appearance`.
+     */
+    readonly appearance: _angular_core.InputSignal<AlertAppearance>;
+    /** Título (peso 600) arriba del mensaje. Vacío deja solo el contenido proyectado. */
     readonly title: _angular_core.InputSignal<string>;
     readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Visibilidad, two-way: `[(open)]="hasError"`. */
@@ -266,8 +307,10 @@ declare class Alert {
      */
     protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
     protected readonly toneIcon: _angular_core.Signal<IconName>;
+    /** Glifo: 16px en `bar`, 20px en `tile` y 24px en `tint`/`rail`. */
+    protected readonly iconSize: _angular_core.Signal<IconSize>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kfAlertActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[kfAlertActions]"], true, never>;
 }
 
 type AlertRowTone = 'warn' | 'error' | 'neutral';
@@ -4720,6 +4763,8 @@ declare class Spinner {
 }
 
 type StatCardTone = 'primary' | 'success' | 'error' | 'purple' | 'warn' | 'info' | 'neutral';
+/** Tono de la insignia (`badge`): los roles semánticos de `kf-badge` salvo `service`. */
+type StatCardBadgeTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
 /** Densidad de la card: `'compact'` reduce el padding, el ícono y el valor. */
 type StatCardDensity = 'default' | 'compact';
 /**
@@ -4746,6 +4791,21 @@ type StatCardDensity = 'default' | 'compact';
  *   <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" [bar]="35" hint="7 de 20"
  *     clickable [pressed]="filter() === 'due'" (cardClick)="toggle('due')" />
  *
+ * - `badge` (+ `badgeTone`, default `'neutral'`): insignia (`kf-badge`) a la
+ *   derecha de la etiqueta, para un estado puntual ("Urgente", "Nuevo"). Es
+ *   texto real en el DOM, así que un lector de pantalla lo lee tras la
+ *   etiqueta: el tono refuerza el significado, no lo porta solo. Si el
+ *   ancho no alcanza, baja a la línea siguiente en vez de recortarse. Sin
+ *   `badge` (o con texto vacío) la card no cambia. Funciona con `density`,
+ *   `clickable` y `loading`.
+ *
+ *   <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" badge="Urgente" badgeTone="error" />
+ *
+ * Alto: la card ocupa el 100% del alto de su contenedor cuando este lo fija
+ * (celda de una grilla o ítem estirado de un flex), de modo que las cards de
+ * una misma fila miden igual sin `::ng-deep`. En un contenedor de alto
+ * automático mide lo que su contenido, como siempre.
+ *
  * `density` (`'default'` | `'compact'`): `'compact'` es la variante para
  * pantallas angostas — padding de `--kf-space-md`, ícono de 40px y valor de
  * `--kf-font-size-title-sm`, con el mismo contenido. Si la card mide 210px de
@@ -4761,7 +4821,7 @@ type StatCardDensity = 'default' | 'compact';
  * `loading` (default `false`): mientras es `true` la card dibuja su esqueleto
  * en vez del contenido, con el MISMO cascarón (borde, padding, ícono de 50px)
  * y líneas del alto real de cada texto — valor, etiqueta y, si se pasaron,
- * nota, barra y `hint` —, así que al llegar los datos no hay salto de
+ * nota, barra, `hint` e insignia —, así que al llegar los datos no hay salto de
  * layout. Pasa los mismos inputs que usarás cargada para que el esqueleto
  * reserve las mismas líneas. Marca la card con `aria-busy="true"`, no es
  * clicable ni expone su texto a lectores de pantalla mientras carga.
@@ -4778,6 +4838,10 @@ declare class StatCard {
     readonly bar: _angular_core.InputSignal<number | null | undefined>;
     /** Texto secundario bajo la barra (o bajo la nota si no hay barra). */
     readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Texto de la insignia a la derecha de la etiqueta; vacío/ausente = sin insignia. */
+    readonly badge: _angular_core.InputSignal<string | undefined>;
+    /** Tono semántico de la insignia (`kf-badge`). */
+    readonly badgeTone: _angular_core.InputSignal<StatCardBadgeTone>;
     /**
      * Estado de alternancia (`aria-pressed`) cuando la card es `clickable`.
      * `null` (default) = no aplica: el atributo no se emite.
@@ -4793,7 +4857,7 @@ declare class StatCard {
     protected readonly barTone: _angular_core.Signal<ProgressTone>;
     protected readonly hasBar: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "bar": { "alias": "bar"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
 }
 
 /** Vocabulario semántico único de tono, compartido con `TextTone`. */
@@ -5537,4 +5601,4 @@ declare class ViewToggle {
 }
 
 export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, Switch, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
-export type { AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableItemLabel, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelRole, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperOrientation, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, ModalSize, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardDensity, StatCardTone, StatTileTone, StatTileVariant, SwitchSize, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };
+export type { AlertAppearance, AlertRowTone, AlertTone, AlertVariant, BreadcrumbItem, BucketProgressItem, CalendarDay, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableCellClick, DataTableColumn, DataTableDensity, DataTableItemLabel, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerRole, DrawerSide, DropdownItemTone, DropdownPanelRole, DropdownPanelVariant, EmptyStateTone, EventTimelineItem, EventTimelineTone, FileRejection, FileRejectionReason, FilterChipOption, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, IconName, IconRotation, IconSize, InputBound, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperOrientation, JourneyStepperSurface, LinkVariant, ListToolbarMode, MilestoneGroup, MilestoneItem, MilestoneTimelineLabels, ModalSize, MultiSelectOption, NoteBlockTone, OptionListOption, PageHeaderTitleSize, PaginationItem, PopoverPlacement, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressSize, ProgressStatus, ProgressTone, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectOption, SelectableCardOption, SidebarNavItemData, SkeletonPresetVariant, SkeletonVariant, SpinnerSize, StatCardBadgeTone, StatCardDensity, StatCardTone, StatTileTone, StatTileVariant, SwitchSize, TabOption, TextAs, TextTone, TextVariant, TimeSlot, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, ViewToggleOption };

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

@@ -370,7 +370,7 @@ declare class MapView {
     protected readonly isPreview: _angular_core.Signal<boolean>;
     protected readonly containerRole: _angular_core.Signal<"img" | "region">;
     /** Ver estado de carga/error real, más abajo (`status`). */
-    protected readonly status: _angular_core.WritableSignal<"loading" | "ready" | "error">;
+    protected readonly status: _angular_core.WritableSignal<"error" | "loading" | "ready">;
     /** Elección manual del consumidor final vía el control `mapStyle` — pisa
      * `theme()` de forma sostenida (no vuelve a `theme()` sola) hasta que se
      * destruya este `kf-map`; ver `resolvedTheme()`. */