@studiolxd/brand 49.28.0 → 51.0.0

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

@@ -82,8 +82,17 @@ export interface CalendarProps {
      * `DatePicker`), conviene pasarlo aquí.
      */
     gridLabel?: string;
+    /**
+     * El día que el calendario marca como «hoy» (y desde el que arranca el mes
+     * visible y el foco cuando no hay otra fecha). Default: la fecha actual,
+     * calculada una vez al montar. **En SSR conviene pasarla**: servidor y
+     * navegador calculan cada uno su «ahora», y cerca de la medianoche —o con
+     * husos distintos— no coinciden y la hidratación se desajusta. Basta con
+     * calcularla en el servidor y mandar la misma fecha a los dos lados.
+     */
+    today?: Date;
     /** Tamaño del componente. Default: 'md' */
     size?: 'sm' | 'md' | 'lg';
     className?: string;
 }
-export declare function Calendar({ value, onChange, defaultMonth, month: monthProp, onMonthChange, navigable, disabledDates, minDate, maxDate, locale, previousMonthLabel, nextMonthLabel, previousYearsLabel, nextYearsLabel, yearGridLabel, gridLabel, size, className, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ value, onChange, defaultMonth, month: monthProp, onMonthChange, navigable, disabledDates, minDate, maxDate, locale, previousMonthLabel, nextMonthLabel, previousYearsLabel, nextYearsLabel, yearGridLabel, gridLabel, today: todayProp, size, className, }: CalendarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,37 @@
 import { type ReactNode } from 'react';
-import type { TagVariant } from '../../atoms/Tag/Tag';
+import type { TagTone, TagVariant } from '../../atoms/Tag/Tag';
 import './CalendarPlanner.css';
 /**
- * El único texto propio del planificador: el botón que abre los eventos que no
- * caben en una celda. Las **flechas de mes no están aquí** —son el mismo texto
- * que el del `Calendar` y salen de `calendar.previousMonth` / `.nextMonth`—, y
+ * Los textos propios del planificador: el botón que abre los eventos que no
+ * caben en una celda, las flechas de la vista de semana y el conmutador de
+ * vista. Las **flechas de mes no están aquí** —son el mismo texto que el del
+ * `Calendar` y salen de `calendar.previousMonth` / `.nextMonth`—, y
  * `gridLabel` tampoco: nombra a ESE planificador.
  */
 export interface CalendarPlannerMessages {
     /** Rótulo del botón de desbordamiento: «+3 más». Interpola, así que es función. */
     more: (count: number) => string;
+    /** Nombre accesible de la flecha de retroceso en la vista de semana. */
+    previousWeek: string;
+    /** Nombre accesible de la flecha de avance en la vista de semana. */
+    nextWeek: string;
+    /** Rótulo del botón de vista de mes del conmutador. */
+    monthView: string;
+    /** Rótulo del botón de vista de semana del conmutador. */
+    weekView: string;
+    /** Nombre accesible del conmutador de vista. */
+    viewSwitcher: string;
 }
 export interface PlannerEvent {
     id: string;
     date: Date;
     label: string;
+    /** Color de la etiqueta del evento (el `tone` de `Tag`). Default `'neutral'`. */
+    tone?: TagTone;
+    /**
+     * @deprecated Usa `tone`. `variant: 'danger'` es `tone: 'error'`. Sigue
+     * funcionando, con un aviso en desarrollo, hasta la v52.
+     */
     variant?: TagVariant;
     /**
      * El evento dura todo el día: la vista de semana lo pinta **sin hora**, el
@@ -113,23 +130,42 @@ export interface CalendarPlannerProps {
     /** Callback al cambiar de semana. Recibe el **lunes** de la nueva. */
     onWeekChange?: (weekStart: Date) => void;
     /**
-     * aria-label del botón de semana anterior. Default: `'Semana anterior'`
-     * (castellano). No sale del catálogo como las flechas de mes: añadirle una
-     * clave obligatoria a `CalendarPlannerMessages` rompería a todas las
-     * aplicaciones que ya lo tienen montado, así que estos cuatro textos entran
-     * como props y pasarán al catálogo en el próximo major.
+     * aria-label del botón de semana anterior. **Sin default**: sin él, sale de
+     * `calendarPlanner.previousWeek` del `BrandMessagesProvider`. Solo se lee
+     * en la vista de semana con `navigable`.
      */
     previousWeekLabel?: string;
-    /** aria-label del botón de semana siguiente. Default: `'Semana siguiente'`. */
+    /**
+     * aria-label del botón de semana siguiente. **Sin default**: sale de
+     * `calendarPlanner.nextWeek`.
+     */
     nextWeekLabel?: string;
-    /** Rótulo del botón de vista de mes del conmutador. Default: `'Mes'`. */
+    /**
+     * Rótulo del botón de vista de mes del conmutador. **Sin default**: sale de
+     * `calendarPlanner.monthView`. Solo se lee con `viewSwitcher`.
+     */
     monthViewLabel?: string;
-    /** Rótulo del botón de vista de semana del conmutador. Default: `'Semana'`. */
+    /**
+     * Rótulo del botón de vista de semana del conmutador. **Sin default**: sale
+     * de `calendarPlanner.weekView`. Solo se lee con `viewSwitcher`.
+     */
     weekViewLabel?: string;
-    /** Nombre accesible del conmutador de vista. Default: `'Vista del calendario'`. */
+    /**
+     * Nombre accesible del conmutador de vista. **Sin default**: sale de
+     * `calendarPlanner.viewSwitcher`. Solo se lee con `viewSwitcher`.
+     */
     viewSwitcherLabel?: string;
+    /**
+     * El día que el planificador marca como «hoy» (y desde el que arranca el
+     * mes o la semana visible cuando no se pasa otra fecha). Default: la fecha
+     * actual, calculada una vez al montar. **En SSR conviene pasarla**: servidor
+     * y navegador calculan cada uno su «ahora», y cerca de la medianoche —o con
+     * husos distintos— no coinciden y la hidratación se desajusta. Basta con
+     * calcularla en el servidor y mandar la misma fecha a los dos lados.
+     */
+    today?: Date;
     /** Tamaño del componente. Default: 'md' */
     size?: 'sm' | 'md' | 'lg';
     className?: string;
 }
-export declare function CalendarPlanner({ events, renderDay, maxItemsPerDay, onMoreClick, showMoreDialog, onDayClick, month: monthProp, defaultMonth, onMonthChange, view: viewProp, defaultView, onViewChange, viewSwitcher, week: weekProp, defaultWeek, onWeekChange, navigable, locale, previousMonthLabel, nextMonthLabel, previousWeekLabel, nextWeekLabel, monthViewLabel, weekViewLabel, viewSwitcherLabel, gridLabel, moreLabel, size, className, }: CalendarPlannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarPlanner({ events, renderDay, maxItemsPerDay, onMoreClick, showMoreDialog, onDayClick, month: monthProp, defaultMonth, onMonthChange, view: viewProp, defaultView, onViewChange, viewSwitcher, week: weekProp, defaultWeek, onWeekChange, navigable, locale, previousMonthLabel, nextMonthLabel, previousWeekLabel, nextWeekLabel, monthViewLabel, weekViewLabel, viewSwitcherLabel, gridLabel, moreLabel, today: todayProp, size, className, }: CalendarPlannerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,7 @@
-import type { ComponentType, ReactNode } from 'react';
+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.
@@ -107,6 +119,14 @@ export interface CalendarRosterProps {
     nextMonthLabel?: string;
     /** Locale para nombres de mes y día. Default: 'es-ES' */
     locale?: string;
+    /**
+     * El día que el cuadrante marca como «hoy». Default: la fecha actual,
+     * calculada una vez al montar. **En SSR conviene pasarla**: servidor y
+     * navegador calculan cada uno su «ahora», y cerca de la medianoche —o con
+     * husos distintos— no coinciden y la hidratación se desajusta. Basta con
+     * calcularla en el servidor y mandar la misma fecha a los dos lados.
+     */
+    today?: Date;
     className?: string;
 }
-export declare function CalendarRoster({ rows, month, onMonthChange, hrefBuilder, linkComponent, renderCell, nameLabel, birthdayPrefix, showLegend, locale, legendItems, legendLabel, previousMonthLabel, nextMonthLabel, 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

@@ -20,10 +20,17 @@ export interface ContextMenuProps {
      * traducir.
      */
     label?: string;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **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;
 }
 /**
  * El menú de acciones de una fila, una tarjeta, un elemento: un `Menu` cuyo
  * disparador es el botón de tres puntos (`DotsButton`). Todo lo demás —ítems,
  * enlaces del router, colocación, cara— es del `Menu`.
  */
-export declare function ContextMenu({ items, renderLink, onOpenChange, side, align, minWidth, maxWidth, triggerSize, triggerOrientation, label, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextMenu({ items, renderLink, onOpenChange, side, align, minWidth, maxWidth, triggerSize, triggerOrientation, label, className, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

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 */
@@ -102,11 +108,22 @@ export interface DatePickerProps {
      * nombra el panel entero.
      */
     gridLabel?: CalendarProps['gridLabel'];
+    /**
+     * El «hoy» que marca el calendario del panel. Default: la fecha actual,
+     * calculada una vez al montar el calendario. **En SSR conviene pasarla**
+     * (ver `Calendar`): evita el desajuste de hidratación cerca de la medianoche.
+     */
+    today?: CalendarProps['today'];
     /** Nombre del campo en el formulario: se monta un input oculto con la fecha en ISO. */
     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. */
@@ -53,6 +60,8 @@ export interface DateTimeFieldProps {
     yearGridLabel?: DatePickerProps['yearGridLabel'];
     /** aria-label de la rejilla de días. Sin él, el nombre del panel. */
     gridLabel?: DatePickerProps['gridLabel'];
+    /** El «hoy» del calendario. Default: la fecha actual. En SSR conviene pasarla (ver `Calendar`). */
+    today?: DatePickerProps['today'];
     /** aria-label del desplegable de horas. Sin él, `timeSelect.hours`. */
     hoursLabel?: string;
     /** aria-label del desplegable de minutos. Sin él, `timeSelect.minutes`. */

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

@@ -39,7 +39,7 @@ export interface DocsSearchMessages {
     loading: string;
 }
 export interface DocsSearchProps {
-    /** `id` del campo. Ata la etiqueta con el campo y el campo con la lista. */
+    /** `id` del campo. Ata la etiqueta con el campo y el campo con la lista. Por defecto, uno único por instancia (`useId`). */
     id?: string;
     /** Texto escrito. El componente es controlado: no guarda estado propio. */
     query: string;
@@ -111,4 +111,4 @@ export interface DocsSearchProps {
  * (`filter={null}`) y la lista en línea, sin popup: los resultados de una
  * búsqueda de documentación no son un menú flotante, son la página.
  */
-export declare function DocsSearch({ id, query, onQueryChange, results, loading, label, labelHidden, placeholder, clearable, clearLabel, resultsLabel, emptyLabel, loadingLabel, size, renderLink, onSelect, className, }: DocsSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare function DocsSearch({ id: idProp, query, onQueryChange, results, loading, label, labelHidden, placeholder, clearable, clearLabel, resultsLabel, emptyLabel, loadingLabel, size, renderLink, onSelect, className, }: DocsSearchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,101 @@
+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
+     * `sides`, al principio de la fila en `top`. Van como
+     * `FloatingToolbarButton`.
+     */
+    start?: ReactNode;
+    /**
+     * Las acciones del **final**: a la derecha del elemento en `sides`, al
+     * final de la fila en `top`.
+     */
+    end?: ReactNode;
+    /**
+     * Dónde se pinta la barra.
+     *
+     * - `auto` (por defecto): encima del elemento por debajo de `breakpoint.lg`
+     *   y en dos raíles a sus lados desde `lg`. Las acciones se declaran **una
+     *   vez**: es el CSS quien las coloca, no hay una barra por anchura.
+     * - `top`: siempre encima.
+     * - `sides`: siempre a los lados.
+     *
+     * @default 'auto'
+     */
+    layout?: 'auto' | 'top' | 'sides';
+    /**
+     * La barra se ve siempre, no solo al pasar el puntero o al tener el foco
+     * dentro. Para el elemento **seleccionado** —el que se está editando—,
+     * sobre todo en pantallas táctiles, donde no hay puntero que pase.
+     *
+     * @default false
+     */
+    alwaysVisible?: boolean;
+    /**
+     * Nombre accesible de la barra (`aria-label` del `role="toolbar"`).
+     * **Obligatorio y sin default**: tiene que decir **de qué** son las
+     * acciones —«Acciones del bloque 3: Texto»—, porque en una lista hay una
+     * barra por elemento y un nombre fijo las haría indistinguibles. Es un
+     * dato del producto, no un texto del sistema: por eso no está en el
+     * 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. */
+    className?: string;
+}
+/**
+ * Barra de botones de icono **anclada a un elemento**: aparece al pasar el
+ * puntero por él o al entrar el foco, y se pinta encima (pantallas estrechas)
+ * o en dos raíles a sus lados (escritorio). Es la barra de acciones de un
+ * bloque en un editor —mover, duplicar, borrar, convertir—.
+ *
+ * Es un `role="toolbar"` (Base UI Toolbar): **una sola parada de
+ * tabulación**, y dentro se recorre con las flechas (`roving tabindex`). Sigue
+ * 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;
+ * 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'> {
+    /**
+     * Nombre de la acción. Es a la vez el `aria-label` del botón y el texto del
+     * bocadillo: un botón de solo icono no tiene otro nombre.
+     */
+    label: string;
+    /** El glifo (`<Icon … />`). Decorativo: el nombre lo da `label`. */
+    icon: ReactNode;
+    /** Pinta la acción en rojo (borrar). */
+    destructive?: boolean;
+    /** Se añade DESPUÉS de las clases propias del `Button`. */
+    className?: string;
+}
+/**
+ * Un botón de `FloatingToolbar`: `Button` `ghost` `sm` de solo icono, con su
+ * `Tooltip` y dentro del recorrido con flechas de la barra.
+ *
+ * Reenvía `ref` y `{...rest}` al `<button>`, así que sirve de `trigger` de un
+ * `Popover` o un `Menu` y de asa de arrastre (el `handleRef` de dnd-kit).
+ */
+export declare const FloatingToolbarButton: import("react").ForwardRefExoticComponent<FloatingToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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/FormField/FormField.d.ts

@@ -1,6 +1,5 @@
 import { type ComponentProps } from 'react';
 import { FormProvider as RhfFormProvider, type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
-import { Label } from '../../atoms/Label/Label';
 import './FormField.css';
 type Translate = (message: string) => string;
 /**
@@ -42,9 +41,9 @@ export declare function useFormField(): {
     register: (part: "description" | "message", present: boolean) => void;
 };
 /** Contenedor de un campo: reserva los ids que enlazan sus partes. */
-export declare function FormItem({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare const FormItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Etiqueta del campo, ya apuntada a su control y marcada si hay error. */
-export declare function FormLabel({ ...props }: ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+export declare const FormLabel: import("react").ForwardRefExoticComponent<Omit<import("../../atoms/Label/Label").LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
 /**
  * Envoltorio del control real (input, select, textarea…). No renderiza nodo
  * propio: fusiona en su hijo el `id`, el `aria-describedby` y el
@@ -54,17 +53,17 @@ export declare function FormControl({ children, ...props }: {
     children: React.ReactElement<Record<string, unknown>>;
 } & Record<string, unknown>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** Texto de ayuda del campo, enlazado al control por `aria-describedby`. */
-export declare function FormDescription({ className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare const FormDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 /**
  * Mensaje de error del campo. Renderiza el error de react-hook-form si lo
  * hay, o sus children si no; sin ninguno de los dos no renderiza nada.
  */
-export declare function FormMessage({ className, children, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export declare const FormMessage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 /**
  * Error del formulario entero (p. ej. "usuario o contraseña incorrectos"),
  * el que se pone con `form.setError("root", …)` y no cuelga de ningún campo.
  * Se coloca una vez al final del formulario: a diferencia de `FormMessage`
  * no tiene campo del que leer, así que va directo al `formState`.
  */
-export declare function FormRootMessage({ className, ...props }: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export declare const FormRootMessage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 export {};