@studiolxd/brand 50.0.0 → 51.0.0

package/dist/_types/molecules/CalendarRoster/CalendarRoster.d.ts

@@ -1,4 +1,7 @@
 import { type ComponentType, type ReactNode } from 'react';
+import { type PrevNextNavRenderLinkProps } from '../PrevNextNav/PrevNextNav';
+/** Lo que recibe `renderLink`: el mismo contrato que el de `PrevNextNav`. */
+export type CalendarRosterRenderLinkProps = PrevNextNavRenderLinkProps;
 import './CalendarRoster.css';
 /**
  * El cromo del cuadrante: el encabezado de la columna de nombres y la leyenda
@@ -61,7 +64,16 @@ export interface CalendarRosterProps {
      * Compatible con SSR y Next.js. Toma precedencia sobre onMonthChange.
      */
     hrefBuilder?: (month: Date) => string;
-    /** Componente Link del router. Default: "a" */
+    /**
+     * Pinta los enlaces de mes (con `hrefBuilder`) con el `Link` del router:
+     * `renderLink={(props) => <Link {...props} />}`. Recibe todos los atributos
+     * del `<a>` y tiene que reenviarlos todos. Sin él, un `<a>`.
+     */
+    renderLink?: (props: CalendarRosterRenderLinkProps) => ReactNode;
+    /**
+     * @deprecated Usa `renderLink` (`renderLink={(props) => <Link {...props} />}`).
+     * Sigue funcionando y avisa en desarrollo; se retira en la v52.
+     */
     linkComponent?: ComponentType<any>;
     /**
      * Render prop para personalizar el contenido interno de cada celda.
@@ -117,4 +129,4 @@ export interface CalendarRosterProps {
     today?: Date;
     className?: string;
 }
-export declare function CalendarRoster({ rows, month, onMonthChange, hrefBuilder, linkComponent, renderCell, nameLabel, birthdayPrefix, showLegend, locale, legendItems, legendLabel, previousMonthLabel, nextMonthLabel, today: todayProp, className, }: CalendarRosterProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarRoster({ rows, month, onMonthChange, hrefBuilder, renderLink, linkComponent, renderCell, nameLabel, birthdayPrefix, showLegend, locale, legendItems, legendLabel, previousMonthLabel, nextMonthLabel, today: todayProp, className, }: CalendarRosterProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/Card/Card.d.ts

@@ -1,7 +1,10 @@
 import './Card.css';
 import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
 import { type ParagraphProps } from '../../atoms/Paragraph/Paragraph';
-export type CardColor = 'primary' | 'outline' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2';
+/** Color de fondo de la tarjeta. */
+export type CardTone = 'primary' | 'outline' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2';
+/** @deprecated Usa `CardTone`: la prop de color se llama `tone` desde la v51. Se retira en la v52. */
+export type CardColor = CardTone;
 /**
  * Maqueta de la tarjeta. `default` es la de siempre: una columna de texto.
  * `square` y `split` son las dos tarjetas de marketing —la cuadrada con la
@@ -64,7 +67,12 @@ export interface CardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      */
     ctaLabel?: string;
     /** Color de fondo. Default: `'outline'`. */
-    color?: CardColor;
+    tone?: CardTone;
+    /**
+     * @deprecated Usa `tone`. Sigue funcionando, con un aviso en desarrollo,
+     * hasta la v52.
+     */
+    color?: CardTone;
     /** Maqueta de la tarjeta. Default: `'default'`. */
     variant?: CardVariant;
     /**

package/dist/_types/molecules/CheckboxField/CheckboxField.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import './CheckboxField.css';
-export interface CheckboxFieldProps {
+import { type FieldOptionalProps } from '../_shared/FieldShell';
+export interface CheckboxFieldProps extends FieldOptionalProps {
     /** Texto de la opción, a la derecha de la marca. Acepta JSX (un enlace, por ejemplo). */
     label: ReactNode;
     /**
@@ -16,6 +17,12 @@ export interface CheckboxFieldProps {
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
+    /**
+     * Casilla obligatoria (aceptar las condiciones): Base UI pone `aria-required`
+     * en la casilla y `required` en su input oculto, que es el que valida el
+     * formulario nativo.
+     */
+    required?: boolean;
     /** Talla del sistema. Sin ella, la del `Form` que lo envuelva; sin `Form`, `md`. */
     size?: 'sm' | 'md' | 'lg';
     /** `id` del control. Si no se pasa, se genera con `useId`. */

package/dist/_types/molecules/ColorPicker/ColorPicker.d.ts

@@ -103,6 +103,14 @@ export interface ColorPickerProps {
     id?: string;
     /** Nombre en el formulario: se monta un input oculto con el hex. */
     name?: string;
+    /**
+     * El `<form>` no se envía sin color: el campo que sincroniza el hex lleva
+     * `required` (y, si se enfoca para avisar, devuelve el foco al disparador).
+     * El disparador es un botón y no admite `aria-required`: quien lo anuncia es
+     * `ColorPickerField`, con un «obligatorio» oculto en la descripción del
+     * disparador. Suelto, el obligatorio se dice en el texto.
+     */
+    required?: boolean;
     /** Nombre accesible del disparador cuando va suelto. */
     'aria-label'?: string;
     /** Lo pone el campo: la etiqueta nombra el disparador. */
@@ -134,7 +142,13 @@ export interface ColorPickerProps {
      * a donde estaba antes de abrir.
      */
     anchor?: PopoverAnchor;
-    /** Se añade DESPUÉS de las clases propias. */
+    /**
+     * Va al **disparador** cuando lo pinta el selector (la muestra) y al
+     * **panel** cuando el disparador lo trae el consumidor (`trigger`) o no hay
+     * ninguno (`anchor`): un disparador propio ya lleva sus clases (D65; hasta
+     * la v50 iba al contenedor). Se añade DESPUÉS de las clases propias. El
+     * panel se personaliza con tokens.
+     */
     className?: string;
 }
 /**

package/dist/_types/molecules/ColorPickerField/ColorPickerField.d.ts

@@ -1,6 +1,7 @@
+import { type FieldOptionalProps, type FieldRequiredProps } from '../_shared/FieldShell';
 import type { ColorPickerProps } from '../ColorPicker/ColorPicker';
 import './ColorPickerField.css';
-export interface ColorPickerFieldProps extends Omit<ColorPickerProps, 'id' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> {
+export interface ColorPickerFieldProps extends Omit<ColorPickerProps, 'id' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'>, FieldOptionalProps, FieldRequiredProps {
     /** `id` del disparador. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;
@@ -14,6 +15,14 @@ export interface ColorPickerFieldProps extends Omit<ColorPickerProps, 'id' | 'ar
     errorMessage?: string;
     /** Texto de ayuda, enlazado por `aria-describedby`. */
     helperText?: string;
+    /**
+     * Campo obligatorio. El disparador es un botón, que no admite
+     * `aria-required` (D73): lo obligatorio va en su **descripción**, un texto
+     * oculto «obligatorio» (`requiredLabel`, o `field.required` del catálogo)
+     * enlazado por `aria-describedby` detrás de la ayuda y el error. El `<form>`
+     * no se envía sin color (`required` en el campo que sincroniza el hex).
+     */
+    required?: boolean;
     /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
     className?: string;
 }

package/dist/_types/molecules/CommandPalette/CommandPalette.d.ts

@@ -109,6 +109,11 @@ export interface CommandPaletteProps {
      * para quien necesite buscar en servidor sin envolver la paleta ni leer el DOM.
      */
     onQueryChange?: (query: string) => void;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **Va al panel (su contenido, dentro del diálogo); el disparador, si lo hay, es tuyo y ya lleva tus clases**
+     * (regla de `className` en componentes con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
 }
 /**

package/dist/_types/molecules/ConfirmDialog/ConfirmDialog.d.ts

@@ -91,7 +91,12 @@ export interface ConfirmDialogBaseProps {
     closeLabel?: string;
     /** Nodo donde montar el portal, como en `Modal`. */
     container?: ModalProps['container'];
-    /** Se añade DESPUÉS de las clases propias del pie del diálogo. */
+    /**
+     * Va al **panel** del diálogo (`modal__content`), como en `Modal`: el
+     * diálogo es controlado y no pinta disparador propio (D65; hasta la v50 iba
+     * al pie). Se añade DESPUÉS de las clases propias. Es un enganche para el
+     * producto, no la vía de personalizar la cara del diálogo: eso va por tokens.
+     */
     className?: string;
 }
 /**

package/dist/_types/molecules/ContextMenu/ContextMenu.d.ts

@@ -22,9 +22,9 @@ export interface ContextMenuProps {
     label?: string;
     /**
      * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
-     * Va al botón de tres puntos —el único nodo que el componente pinta en su
-     * sitio—, no al panel, que sale por un portal: a diferencia de `Menu`, aquí
-     * el disparador es del componente y no del consumidor.
+     * **Va al disparador, que pinta el componente** (el botón de tres puntos): el panel sale por un
+     * portal y se personaliza con tokens (regla de `className` en componentes
+     * con portal, CLAUDE.md § Base UI).
      */
     className?: string;
 }

package/dist/_types/molecules/CopyButton/CopyButton.d.ts

@@ -38,6 +38,14 @@ export interface CopyButtonProps extends Omit<ComponentPropsWithoutRef<'button'>
     onCopy?: (text: string) => void;
     /** Se llama cuando el portapapeles falla. */
     onCopyError?: (error: unknown) => void;
+    /**
+     * Con `disabled`, el botón sigue en el orden de tabulación y se anuncia con
+     * `aria-disabled` sin copiar nada. Reenvío a `Button`; `Tooltip` lo activa
+     * solo en su disparador deshabilitado.
+     *
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
 }

package/dist/_types/molecules/DatePicker/DatePicker.d.ts

@@ -70,6 +70,12 @@ export interface DatePickerProps {
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     readOnly?: boolean;
+    /**
+     * Campo obligatorio: `required` nativo en el campo de texto, que es el que
+     * guarda lo escrito. El lector de pantalla lo anuncia y el `<form>` no se
+     * envía vacío.
+     */
+    required?: boolean;
     error?: boolean;
     locale?: string;
     /** id aplicado al campo de texto */
@@ -112,7 +118,12 @@ export interface DatePickerProps {
     name?: string;
     /** Se llama al salir del campo (react-hook-form lo usa para validar). */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /** Se añade DESPUÉS de las clases propias del componente. */
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **Va al disparador, que pinta el componente** (el campo: la máscara y el botón del calendario): el panel sale por un
+     * portal y se personaliza con tokens (regla de `className` en componentes
+     * con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
 }
 /**

package/dist/_types/molecules/DatePickerField/DatePickerField.d.ts

@@ -1,6 +1,7 @@
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { DatePickerProps } from '../DatePicker/DatePicker';
 import './DatePickerField.css';
-export interface DatePickerFieldProps extends Omit<DatePickerProps, 'id' | 'describedBy' | 'aria-describedby' | 'aria-label'> {
+export interface DatePickerFieldProps extends Omit<DatePickerProps, 'id' | 'describedBy' | 'aria-describedby' | 'aria-label'>, FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;

package/dist/_types/molecules/DateTimeField/DateTimeField.d.ts

@@ -1,7 +1,8 @@
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { DatePickerProps } from '../DatePicker/DatePicker';
 import type { CalendarProps } from '../Calendar/Calendar';
 import './DateTimeField.css';
-export interface DateTimeFieldProps {
+export interface DateTimeFieldProps extends FieldOptionalProps {
     /** `id` del campo. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;
@@ -24,6 +25,12 @@ export interface DateTimeFieldProps {
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
     readOnly?: boolean;
+    /**
+     * Campo obligatorio: `required` nativo en el campo de la fecha y, en la
+     * hora, el de sus desplegables (con `aria-required` en cada uno), como
+     * `TimeField`.
+     */
+    required?: boolean;
     /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
     error?: boolean;
     /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */

package/dist/_types/molecules/DropdownField/DropdownField.d.ts

@@ -1,7 +1,8 @@
 import { type ReactNode } from 'react';
+import { type FieldOptionalProps, type FieldRequiredProps } from '../_shared/FieldShell';
 import { type MenuItem } from '../Menu/Menu';
 import './DropdownField.css';
-export interface DropdownFieldProps {
+export interface DropdownFieldProps extends FieldOptionalProps, FieldRequiredProps {
     /** `id` del control; enlaza la etiqueta. Si no se pasa, se genera con `useId`. */
     id?: string;
     /** Etiqueta visible. Si no hay, es obligatorio `aria-label`. */
@@ -27,6 +28,15 @@ export interface DropdownFieldProps {
     disabled?: boolean;
     /** Nombre del campo en el formulario: se monta un input oculto con el valor. */
     name?: string;
+    /**
+     * Campo obligatorio. El disparador es un botón, que no admite
+     * `aria-required` (D73): lo obligatorio va en su **descripción**, un texto
+     * oculto «obligatorio» (`requiredLabel`, o `field.required` del catálogo)
+     * enlazado por `aria-describedby` detrás de la ayuda y el error. El `<form>`
+     * no se envía sin valor (`required` en el campo que sincroniza el valor,
+     * que devuelve el foco al disparador).
+     */
+    required?: boolean;
     /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
     error?: boolean;
     /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */

package/dist/_types/molecules/FileUploadField/FileUploadField.d.ts

@@ -1,6 +1,7 @@
 import './FileUploadField.css';
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { FileUploadProps } from '../../atoms/FileUpload/FileUpload';
-export interface FileUploadFieldProps extends Omit<FileUploadProps, 'describedBy' | 'ariaLabel' | 'aria-describedby' | 'id'> {
+export interface FileUploadFieldProps extends Omit<FileUploadProps, 'describedBy' | 'ariaLabel' | 'aria-describedby' | 'id'>, FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;

package/dist/_types/molecules/FilterBar/FilterBar.d.ts

@@ -33,6 +33,8 @@ export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'c
      * Nombre accesible del punto de referencia `search` que es la barra.
      * **Sin default**: sale de `filterBar.label` del `BrandMessagesProvider`.
      */
+    'aria-label'?: string;
+    /** @deprecated Usa `aria-label`. Sigue funcionando y avisa en desarrollo; se retira en la v52. */
     ariaLabel?: string;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
@@ -51,4 +53,4 @@ export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'c
  *
  * `{...rest}` (`id`, `data-*`, `aria-*`…) va al `<div>`.
  */
-export declare function FilterBar({ search, children, actions, ariaLabel, className, ...rest }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterBar({ search, children, actions, 'aria-label': ariaLabelProp, ariaLabel: ariaLabelDeprecated, className, ...rest }: FilterBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/FloatingToolbar/FloatingToolbar.d.ts

@@ -1,5 +1,14 @@
 import { type ReactNode } from 'react';
 import './FloatingToolbar.css';
+/**
+ * Los atributos que se pueden poner en la barra (`role="toolbar"`). Sin
+ * `className`, `role`, `aria-label`, `aria-orientation` ni `children`: esos
+ * los gobierna el componente. Los `data-*` se admiten tipados para poder
+ * pasarlos en un objeto (`{ 'data-editor-ui': '' }`).
+ */
+export type FloatingToolbarBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'aria-label' | 'aria-orientation' | 'children'> & {
+    [attribute: `data-${string}`]: string | undefined;
+};
 export interface FloatingToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
     /**
      * Las acciones del **principio**: a la izquierda del elemento en
@@ -41,6 +50,14 @@ export interface FloatingToolbarProps extends Omit<React.HTMLAttributes<HTMLDivE
      * proveedor de textos.
      */
     label: string;
+    /**
+     * Atributos para la **barra** (el `role="toolbar"`), no para el ancla: la
+     * misma barra en `top` y en los raíles de `sides`. Para marcarla —un
+     * `data-*` que la saque del alcance de otra hoja, un `id`— o escuchar en
+     * ella. Lo que el componente gobierna (clase, rol, nombre, orientación) no
+     * se acepta.
+     */
+    toolbarProps?: FloatingToolbarBarProps;
     /** El elemento al que se ancla la barra. */
     children: ReactNode;
     /** Se añade DESPUÉS de las clases propias. */
@@ -57,7 +74,8 @@ export interface FloatingToolbarProps extends Omit<React.HTMLAttributes<HTMLDivE
  * en el orden de tabulación aunque no se vea, así que con teclado siempre se
  * alcanza; al recibir el foco aparece.
  *
- * Reenvía `ref` y `{...rest}` al elemento ancla (el contenedor), no a la barra.
+ * Reenvía `ref` y `{...rest}` al elemento ancla (el contenedor), no a la barra;
+ * los atributos de la barra van en `toolbarProps`.
  */
 export declare const FloatingToolbar: import("react").ForwardRefExoticComponent<FloatingToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface FloatingToolbarButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'aria-label'> {

package/dist/_types/molecules/Form/Form.d.ts

@@ -18,6 +18,14 @@ export interface FormProps extends Omit<ComponentProps<'form'>, 'children'> {
     alternativesLabel?: string;
     /** Talla de todos los campos y botones (32/40/48): `lg` en superficies públicas, `md` dentro de las aplicaciones. */
     size?: FormSize;
+    /**
+     * Marca lo opcional en todo el formulario (D74): cada `*Field` sin
+     * `required` pinta « (opcional)» tras la etiqueta, sin poner `optional`
+     * campo a campo. El `optional` de un campo sigue mandando: `optional={false}`
+     * la apaga en ese. Para formularios donde casi todo es obligatorio. Por
+     * defecto `false`: sin ella, nada cambia.
+     */
+    markOptional?: boolean;
     /** Acciones en bloque: los botones a todo el ancho, apilados, también en escritorio (acceso, registro…). */
     blockActions?: boolean;
     /** Mensaje de éxito que sustituye al formulario («Gracias — tu mensaje se ha enviado.»): texto anunciado (`role="status"`), sin caja. Con `success`, no se pintan campos ni acciones; `links` sí. */

package/dist/_types/molecules/Heatmap/Heatmap.d.ts

@@ -1,8 +1,11 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type HeatmapDivergingDirection } from './heatmapScale';
 import './Heatmap.css';
-export type { HeatmapScale } from './heatmapScale';
+export type { HeatmapScale, HeatmapDivergingDirection, HeatmapDivergingStep, } from './heatmapScale';
+/** La rampa de la matriz: una magnitud (`sequential`) o una distancia a un centro (`diverging`). */
+export type HeatmapScaleKind = 'sequential' | 'diverging';
 /**
- * Los tres textos de la matriz, y los tres son **cromo**: cómo se llama la
+ * Los textos de la matriz, y todos son **cromo**: cómo se llama la
  * tabla, cómo se dice que una casilla no tiene dato y cómo se llama la
  * leyenda. Los nombres de filas y columnas son contenido, y los escribe quien
  * pasa los datos.
@@ -14,6 +17,14 @@ export interface HeatmapMessages {
     empty: string;
     /** Nombre accesible de la leyenda de la rampa. */
     scale: string;
+    /**
+     * Rótulo del centro en la leyenda de la escala divergente, con el valor ya
+     * formateado («Centro: 0»). **Opcional** en el tipo para que un catálogo
+     * anterior siga compilando; solo se lee con `scale="diverging"` y leyenda,
+     * y sin él ni `midpointLabel` sale el respaldo castellano, como cualquier
+     * clave ausente.
+     */
+    midpoint?: (value: string) => string;
 }
 /** Una fila: una persona, un puesto. */
 export interface HeatmapRow {
@@ -45,16 +56,36 @@ export interface HeatmapProps extends Omit<ComponentPropsWithoutRef<'div'>, 'chi
     columns: HeatmapColumn[];
     /** Las casillas con dato. Las que falten se pintan sin dato. */
     cells: HeatmapCell[];
-    /** Extremo bajo del dominio. Default 0. */
+    /**
+     * La rampa. `'sequential'` (default) pinta una magnitud, de menos a más;
+     * `'diverging'` pinta la distancia a `midpoint`, con un brazo cálido y uno
+     * frío de tres intensidades y el neutro en el centro.
+     */
+    scale?: HeatmapScaleKind;
+    /**
+     * Extremo bajo del dominio. En la secuencial, default 0. En la divergente
+     * no tiene default: si se pasa (él o `max`), el radio de los brazos es la
+     * mayor distancia de los extremos pasados al centro.
+     */
     min?: number;
     /**
      * Extremo alto del dominio. **Sin él sale del mayor valor de `cells`**, que
      * sirve para explorar pero hace que dos matrices del mismo panel no se
-     * puedan comparar: en cuanto haya dos, se pasa.
+     * puedan comparar: en cuanto haya dos, se pasa. En la divergente, sin `min`
+     * ni `max` el radio sale de la mayor |valor − centro| de las casillas.
      */
     max?: number;
-    /** Pasos de la rampa, de 2 a 6. Default 5. */
+    /** Pasos de la rampa secuencial, de 2 a 6. Default 5. La divergente siempre tiene siete. */
     steps?: number;
+    /** El centro de la escala divergente: el valor que se lee como «nada». Default 0. */
+    midpoint?: number;
+    /**
+     * Qué brazo pinta lo que queda por debajo del centro. Default
+     * `'warm-below'`: lo que se queda corto es cálido y lo que sobra, frío.
+     * `'warm-above'` lo invierte, para magnitudes en las que pasarse es lo que
+     * alarma.
+     */
+    divergingDirection?: HeatmapDivergingDirection;
     /** Encabezado de la columna de filas («Persona», «Puesto»). */
     rowHeader?: ReactNode;
     /** Pinta la cifra dentro de la celda. Default `true`. Con `false` sigue leyéndose. */
@@ -69,6 +100,12 @@ export interface HeatmapProps extends Omit<ComponentPropsWithoutRef<'div'>, 'chi
     minLabel?: ReactNode;
     /** Rótulo del extremo alto de la leyenda. Default: el máximo formateado. */
     maxLabel?: ReactNode;
+    /**
+     * Rótulo del centro en la leyenda divergente. **Sin él**, sale de
+     * `heatmap.midpoint` del catálogo con el centro formateado. Solo se lee con
+     * `scale="diverging"` y leyenda.
+     */
+    midpointLabel?: ReactNode;
     /**
      * Nombre accesible de la matriz. **Sin él**, sale de `heatmap.label` del
      * `BrandMessagesProvider`.

package/dist/_types/molecules/Heatmap/heatmapScale.d.ts

@@ -37,3 +37,53 @@ export declare function heatmapStep(value: number | null | undefined, scale: Hea
  * para que dos matrices con distinto número de pasos se lean igual de lejos.
  */
 export declare function heatmapRampIndex(step: number, steps: number): number;
+/**
+ * Los peldaños de la rampa divergente: tres por brazo y el neutro en medio.
+ * El nombre es el del token (`heatmap.diverging-<peldaño>-bg`).
+ */
+export type HeatmapDivergingStep = 'warm-3' | 'warm-2' | 'warm-1' | 'neutral' | 'cool-1' | 'cool-2' | 'cool-3';
+/** Intensidades por brazo de la rampa divergente. */
+export declare const HEATMAP_DIVERGING_ARM_STEPS = 3;
+/**
+ * Qué brazo pinta lo que queda **por debajo** del centro. Por defecto,
+ * `'warm-below'`: lo que se queda corto es cálido (cayena) y lo que sobra es
+ * frío (prusia). `'warm-above'` lo da la vuelta, para magnitudes en las que
+ * pasarse es lo que alarma (un retraso, un sobrecoste).
+ */
+export type HeatmapDivergingDirection = 'warm-below' | 'warm-above';
+/** El dominio de la escala divergente: el centro y cuánto se aleja de él. */
+export interface HeatmapDivergingScale {
+    /** El valor que se lee como «nada»: la meta, el cero de una diferencia. */
+    midpoint: number;
+    /**
+     * La distancia al centro que pinta el extremo de cada brazo. Los dos brazos
+     * comparten radio, así que la misma distancia pinta la misma intensidad a
+     * los dos lados.
+     */
+    radius: number;
+    direction?: HeatmapDivergingDirection;
+}
+/**
+ * El peldaño divergente que le toca a un valor. `null` es **sin dato**.
+ *
+ * El intervalo `[centro − radio, centro + radio]` se parte en **siete bandas
+ * iguales**, una por peldaño, como la secuencial parte el suyo en tantas
+ * bandas como pasos: la banda central —a menos de medio séptimo de diámetro
+ * del centro— es el neutro, y cada brazo tiene tres bandas más. Lo que se sale
+ * del radio se recorta contra el extremo. Con niveles enteros y un radio de 3
+ * (una brecha de −3 a +3), cada nivel cae en su peldaño: 0 es el neutro, ±1
+ * el primero de cada brazo y ±3 el extremo.
+ */
+export declare function heatmapDivergingStep(value: number | null | undefined, scale: HeatmapDivergingScale): HeatmapDivergingStep | null;
+/**
+ * Los siete peldaños en el orden en que se leen de izquierda a derecha, del
+ * valor más bajo al más alto: el orden de la leyenda.
+ */
+export declare function heatmapDivergingLegend(direction?: HeatmapDivergingDirection): HeatmapDivergingStep[];
+/**
+ * El radio de la escala divergente. Los extremos que se pasen (`min`, `max`)
+ * mandan: el radio es la mayor distancia de cualquiera de ellos al centro, y
+ * así dos matrices del mismo panel se comparan. **Sin ninguno, sale de los
+ * datos**: la mayor |valor − centro| de las casillas.
+ */
+export declare function heatmapDivergingRadius(midpoint: number, values: readonly (number | null)[], min?: number, max?: number): number;

package/dist/_types/molecules/ImageCropDialog/ImageCropDialog.d.ts

@@ -53,7 +53,23 @@ export interface ImageCropDialogProps {
      */
     errorMessage?: string;
     onConfirm: (blob: Blob) => void | Promise<void>;
-    onClose: () => void;
+    /**
+     * Se llama cuando el diálogo pide cerrarse —`Cancelar`, el aspa, `Escape`,
+     * el velo, o tras confirmar— con `false`, como `onOpenChange` del resto de
+     * superposiciones del DS. El diálogo está abierto mientras `sourceUrl` no
+     * sea `null`: cerrarlo es devolverlo a `null`.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @deprecated Usa `onOpenChange`. Sigue funcionando y avisa en desarrollo;
+     * se retira en la v52.
+     */
+    onClose?: () => void;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **Va al panel (su contenido, dentro del diálogo); el disparador, si lo hay, es tuyo y ya lleva tus clases**
+     * (regla de `className` en componentes con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
 }
 /**
@@ -63,4 +79,4 @@ export interface ImageCropDialogProps {
  * `react-image-crop` aporta el gesto de selección; el DS pone el diálogo, las
  * acciones y el volcado a lienzo (`cropImageToBlob`).
  */
-export declare function ImageCropDialog({ sourceUrl, title, description, circularCrop, aspect, outputSize, outputMimeType, busy, cancelLabel, confirmLabel, closeLabel, loadingLabel, errorMessage, onConfirm, onClose, className, }: ImageCropDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageCropDialog({ sourceUrl, title, description, circularCrop, aspect, outputSize, outputMimeType, busy, cancelLabel, confirmLabel, closeLabel, loadingLabel, errorMessage, onConfirm, onOpenChange, onClose, className, }: ImageCropDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/InputField/InputField.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './InputField.css';
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 /**
  * El único texto que el campo emite por su cuenta: el nombre accesible del
  * aspa de borrado. Es cromo —dice la misma cosa en toda la suite—, así que
@@ -13,7 +14,7 @@ export interface InputFieldMessages {
     /** Nombre accesible del botón que vacía un campo de búsqueda. */
     clear: string;
 }
-export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue'> {
+export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue'>, FieldOptionalProps {
     id: string;
     label: string;
     /**

package/dist/_types/molecules/InputPhoneField/InputPhoneField.d.ts

@@ -1,6 +1,7 @@
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { Country } from 'react-phone-number-input';
 import './InputPhoneField.css';
-export interface InputPhoneFieldProps {
+export interface InputPhoneFieldProps extends FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;

package/dist/_types/molecules/Menu/Menu.d.ts

@@ -36,6 +36,11 @@ export interface MenuProps {
      * Pásalo solo para llevar la capa a otro sitio: gana siempre.
      */
     container?: HTMLElement | null;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **Va al panel; el disparador es tuyo y ya lleva tus clases**
+     * (regla de `className` en componentes con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
 }
 /**

package/dist/_types/molecules/Modal/Modal.d.ts

@@ -18,7 +18,19 @@ export interface ModalMessages {
 }
 export interface ModalProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
     open: boolean;
-    onClose: () => void;
+    /**
+     * Se llama cuando el diálogo pide abrirse o cerrarse (aspa, `Escape`, clic en
+     * el velo), con el estado al que quiere pasar — la misma firma que `Sheet`,
+     * `Popover` y el resto de superposiciones del DS. Un `Modal` controlado solo
+     * pide cerrarse, así que en la práctica llega siempre `false`.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @deprecated Usa `onOpenChange` (`onOpenChange={(open) => { if (!open) cerrar(); }}`,
+     * o directamente `onOpenChange={setOpen}`). Sigue funcionando y avisa en
+     * desarrollo; se retira en la v52.
+     */
+    onClose?: () => void;
     title?: string;
     children: React.ReactNode;
     /**
@@ -93,4 +105,4 @@ export interface ModalProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
  * `className` se concatena tras las clases propias del popup, como en `Sheet`.
  * La cara del diálogo sigue personalizándose por tokens.
  */
-export declare function Modal({ open, onClose, title, children, closeLabel, fallbackTitle, container, description, 'aria-describedby': ariaDescribedBy, initialFocus, footer, footerClassName, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ open, onOpenChange, onClose, title, children, closeLabel, fallbackTitle, container, description, 'aria-describedby': ariaDescribedBy, initialFocus, footer, footerClassName, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/MultiSelectField/MultiSelectField.d.ts

@@ -1,7 +1,8 @@
 import './MultiSelectField.css';
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { MultiSelectOption } from '../../atoms/MultiSelect/MultiSelect';
 export type { MultiSelectOption };
-export interface MultiSelectFieldProps {
+export interface MultiSelectFieldProps extends FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;
@@ -25,6 +26,8 @@ export interface MultiSelectFieldProps {
     name?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    /** Obligatorio: `aria-required` en el `combobox` y `required` en el input oculto (ver `MultiSelect`). */
+    required?: boolean;
     /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
     error?: boolean;
     /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */

package/dist/_types/molecules/NotificationPanel/NotificationPanel.d.ts

@@ -124,7 +124,12 @@ export interface NotificationPanelProps {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
-    /** Se añade DESPUÉS de las clases propias del panel (el consumidor añade, no sustituye). */
+    /**
+     * Va al **disparador** —la campana, el `NotificationButton` que pinta el
+     * propio componente y que se queda en su sitio—, no al panel (D65). Se añade
+     * DESPUÉS de las clases propias (el consumidor añade, no sustituye). El
+     * panel se personaliza con tokens.
+     */
     className?: string;
 }
 /**