@studiolxd/brand 50.0.0 → 51.0.0

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

@@ -1,7 +1,8 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './NumberInputField.css';
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import { type NumberInputCommitMode } from '../../atoms/NumberInput/NumberInput';
-export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
+export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'>, FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;

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

@@ -35,8 +35,9 @@ export interface OrgSwitcherProps {
     renderLink?: (props: MenuRenderLinkProps) => ReactNode;
     /**
      * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
-     * Va al disparador: es el único nodo que el componente pinta en su sitio (el
-     * panel sale por un portal).
+     * **Va al disparador, que pinta el componente**: 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/OtpField/OtpField.d.ts

@@ -1,5 +1,6 @@
 import './OtpField.css';
-export interface OtpFieldProps {
+import { type FieldOptionalProps } from '../_shared/FieldShell';
+export interface OtpFieldProps extends FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;
@@ -17,6 +18,8 @@ export interface OtpFieldProps {
     name?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    /** Obligatorio: `required` nativo en cada celda (ver `OtpInput`). */
+    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/PageIntro/PageIntro.d.ts

@@ -14,7 +14,7 @@ export interface PageIntroProps {
     title: ReactNode;
     /**
      * La frase bajo el título, opcional: va como entradilla (`Paragraph
-     * size="large"`, un peldaño por encima del cuerpo). Termina en punto (ver
+     * size="lg"`, un peldaño por encima del cuerpo). Termina en punto (ver
      * Foundations → Redacción). Lo que no llegue a frase, o cabe en el título,
      * o va en `children`.
      */

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

@@ -1,6 +1,15 @@
-import type { ComponentType, ReactNode } from 'react';
+import { type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
 import type { SelectOption } from '../../atoms/Select/Select';
 import './Pagination.css';
+/**
+ * Lo que recibe `renderLink`: los atributos del `<a>` que pintaría el
+ * paginador. Hay que reenviarlos **todos** al enlace del router.
+ */
+export type PaginationRenderLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    className: string;
+    children: ReactNode;
+};
 /**
  * Los textos que el paginador emite por su cuenta. Los nombres calcan el
  * espacio `pagination` del catálogo de la suite, así que montarlo es mapear
@@ -91,9 +100,19 @@ export interface PaginationProps {
     /** Mostrar "X resultados" antes de los controles. Default: false */
     showTotal?: boolean;
     /**
-     * Componente Link del router. Default: "a" (recarga completa).
-     * Acepta next/link, react-router Link, etc. — cualquier componente
-     * que acepte las props estándar de <a> (href, className, …).
+     * Pinta cada enlace del paginador con el `Link` del router:
+     * `renderLink={(props) => <Link {...props} />}`. Recibe todos los atributos
+     * del `<a>` (`href`, `className`, `aria-label`, `onClick`, `children`) y
+     * tiene que reenviarlos todos. Sin él, un `<a>` (recarga completa).
+     *
+     * Es una función: desde un Server Component no cruza al cliente. Ahí, o se
+     * monta el paginador en un fichero de cliente propio, o se navega con
+     * `<a>` (sin `renderLink`).
+     */
+    renderLink?: (props: PaginationRenderLinkProps) => ReactNode;
+    /**
+     * @deprecated Usa `renderLink` (`renderLink={(props) => <Link {...props} />}`).
+     * Sigue funcionando y avisa en desarrollo; se retira en la v52.
      */
     linkComponent?: ComponentType<any>;
     /** Tamaño del componente. Default: "md" */
@@ -102,6 +121,8 @@ export interface PaginationProps {
      * `aria-label` del `<nav>`. Sin default: cuando no se pasa, sale de
      * `pagination.label` del `BrandMessagesProvider`.
      */
+    'aria-label'?: string;
+    /** @deprecated Usa `aria-label`. Sigue funcionando y avisa en desarrollo; se retira en la v52. */
     ariaLabel?: string;
     /** `aria-label` de cada botón/enlace de página. Sin default: `pagination.goToPage`. */
     pageLabel?: (page: number) => string;
@@ -120,4 +141,4 @@ export interface PaginationProps {
     totalLabel?: (total: number) => string;
     className?: string;
 }
-export declare function Pagination({ mode, total, pageCount, page, pageSize, hrefs, previousHref, nextHref, onPrevious, onNext, onPageChange, hrefBuilder: hrefBuilderProp, linkComponent, onPageSizeChange, pageSizeOptions, afterPageSize, showTotal, size, ariaLabel, pageLabel, previousLabel, nextLabel, pagesGroupLabel, pageSizeLabel, totalLabel, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Pagination({ mode, total, pageCount, page, pageSize, hrefs, previousHref, nextHref, onPrevious, onNext, onPageChange, hrefBuilder: hrefBuilderProp, renderLink: renderLinkProp, linkComponent, onPageSizeChange, pageSizeOptions, afterPageSize, showTotal, size, 'aria-label': ariaLabelProp, ariaLabel: ariaLabelDeprecated, pageLabel, previousLabel, nextLabel, pagesGroupLabel, pageSizeLabel, totalLabel, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,5 @@
 import './PasswordField.css';
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 /**
  * Los dos textos que el campo emite por su cuenta: las dos caras del
  * interruptor de mostrar/ocultar. Son cromo —dicen lo mismo en toda la
@@ -13,11 +14,11 @@ export interface PasswordFieldMessages {
     /** Nombre accesible del interruptor con la contraseña a la vista. */
     hide: string;
 }
-export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
+export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'>, FieldOptionalProps {
     /**
      * Etiqueta del campo. **Opcional**: si se omite, el componente renderiza solo
-     * el campo + toggle (sin `<label>`, sin error ni ayuda), para componerlo
-     * dentro de una capa de formulario propia.
+     * el campo + toggle, sin `<label>`, para componerlo dentro de una capa de
+     * formulario propia (el error y la ayuda se pintan igual si se pasan).
      */
     label?: string;
     /**

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

@@ -1,5 +1,14 @@
-import type { ComponentType, MouseEvent, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ComponentType, MouseEvent, ReactNode } from 'react';
 import './PrevNextNav.css';
+/**
+ * Lo que recibe `renderLink`: los atributos del `<a>` que pintaría el
+ * control. Hay que reenviarlos **todos** al enlace del router.
+ */
+export type PrevNextNavRenderLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    className: string;
+    children: ReactNode;
+};
 export interface PrevNextNavProps {
     /** href del enlace anterior. Mutuamente exclusivo con prevOnClick */
     prevHref?: string;
@@ -44,8 +53,15 @@ export interface PrevNextNavProps {
      */
     labelId?: string;
     /**
-     * Componente `Link` del router para los controles con `href`. Default: `"a"`.
-     * Recibe `href` y el resto de props tal cual.
+     * Pinta los controles con `href` con el `Link` del router:
+     * `renderLink={(props) => <Link {...props} />}`. Recibe todos los atributos
+     * del `<a>` (`href`, `className`, `aria-label`, `onClick`, `children`) y
+     * tiene que reenviarlos todos. Sin él, un `<a>`.
+     */
+    renderLink?: (props: PrevNextNavRenderLinkProps) => ReactNode;
+    /**
+     * @deprecated Usa `renderLink` (`renderLink={(props) => <Link {...props} />}`).
+     * Sigue funcionando y avisa en desarrollo; se retira en la v52.
      */
     linkComponent?: ComponentType<any>;
     /** Variante de densidad. Default: "md" */
@@ -64,4 +80,4 @@ export interface PrevNextNavMessages {
     /** Rótulo del control siguiente. */
     next: string;
 }
-export declare function PrevNextNav({ prevHref, nextHref, prevOnClick, nextOnClick, prevLabel, nextLabel, prevTitle, nextTitle, label, labelId, linkComponent, size, className, }: PrevNextNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrevNextNav({ prevHref, nextHref, prevOnClick, nextOnClick, prevLabel, nextLabel, prevTitle, nextTitle, label, labelId, renderLink: renderLinkProp, linkComponent, size, className, }: PrevNextNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
-import { type TagVariant } from '../../atoms/Tag/Tag';
+import { type TagTone, type TagVariant } from '../../atoms/Tag/Tag';
 import type { CardMedia } from '../Card/Card';
 import './ProjectCard.css';
 /**
@@ -12,11 +12,17 @@ export interface ProjectCardMessages {
     /** Nombre accesible de la lista de etiquetas de categoría. */
     tags: string;
 }
-export type { TagVariant };
+export type { TagTone, TagVariant };
 export interface ProjectCardTag {
     /** Clave de React. Sin ella se usa la etiqueta. */
     id?: string;
     label: string;
+    /** Color de la etiqueta (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;
 }
 export interface ProjectCardProps {

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

@@ -3,6 +3,14 @@ import './RadioField.css';
 export interface RadioFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'id'> {
     /** Texto de la opción, a la derecha de la marca. Acepta JSX (un enlace, por ejemplo). */
     label: ReactNode;
+    /**
+     * Oculta el texto de la opción **visualmente**, sin quitarlo del árbol de
+     * accesibilidad: el radio conserva su nombre. Misma prop que en
+     * `CheckboxField` y `SwitcherField`. Default: `false`.
+     * Sin valor, lo decide quien lo envuelva: dentro de un `FieldRow` que no
+     * es la primera de la lista, la etiqueta se oculta sola.
+     */
+    labelHidden?: boolean;
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     /** Talla del sistema. Sin ella, la del `Form` que lo envuelva; sin `Form`, `md`. */

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

@@ -10,7 +10,7 @@ export interface RecoveryCodesLabels {
     /**
      * Aviso del botón de copiar si el portapapeles falla (contexto no seguro,
      * permiso denegado). Opcional: sin él sale de `copy.error` del
-     * `BrandMessagesProvider`, y sin ninguno de los dos el componente lanza.
+     * `BrandMessagesProvider`, y sin ninguno de los dos, del castellano de respaldo.
      */
     error?: string;
 }

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

@@ -57,8 +57,26 @@ export interface RecurrenceFieldProps {
      * texto del catálogo, pásale `recurrenceField.legend`.
      */
     legend?: ReactNode;
+    /**
+     * Oculta la leyenda a la vista (sigue nombrando el grupo para el lector de
+     * pantalla): la `legendHidden` del `Fieldset`. Por defecto `false`. Sin
+     * valor, lo decide quien lo envuelva: dentro de un `FieldRow` que no es la
+     * primera de la lista, se oculta sola, como la etiqueta de los demás campos.
+     * Sin `legend` no hace nada.
+     */
+    labelHidden?: boolean;
     /** Deshabilita el editor entero. */
     disabled?: boolean;
+    /**
+     * Texto de ayuda del editor entero, bajo los campos. Describe el grupo
+     * (`aria-describedby` en el `fieldset`, o en el `role="group"` sin `legend`).
+     */
+    helperText?: string;
+    /**
+     * Mensaje de error del editor entero (una regla que no cuadra con el
+     * evento). Se anuncia (`role="alert"`) y describe el grupo, como la ayuda.
+     */
+    errorMessage?: string;
     /** Talla de los campos. Sin ella, la del contexto de formulario. */
     size?: 'sm' | 'md' | 'lg';
     /** Locale de los nombres de los días y del campo de fecha. Default `'es-ES'`. */
@@ -95,4 +113,4 @@ export interface RecurrenceFieldProps {
  * Es **controlado**, como el resto de campos del sistema: recibe `value` y
  * llama a `onValueChange` con el valor entero. `null` es «no se repite».
  */
-export declare function RecurrenceField({ value, onValueChange, id: idProp, legend, disabled, size, locale, weekStartsOn, minDate, maxDate, today, className, frequencyLabel, weekdaysLabel, endLabel, }: RecurrenceFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecurrenceField({ value, onValueChange, id: idProp, legend, labelHidden: labelHiddenProp, disabled, helperText, errorMessage, size, locale, weekStartsOn, minDate, maxDate, today, className, frequencyLabel, weekdaysLabel, endLabel, }: RecurrenceFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import './SelectField.css';
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { SelectOptionOrGroup } from '../../atoms/Select/Select';
-export interface SelectFieldProps {
+export interface SelectFieldProps extends FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;

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

@@ -54,6 +54,11 @@ export interface SheetProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
      * Sirve para desmontar el panel solo después de que haya salido de pantalla.
      */
     onAnimationEndCapture?: (event: React.AnimationEvent) => void;
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **Va al panel; 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/Table/Table.d.ts

@@ -73,7 +73,12 @@ export interface TableRowProps extends Omit<React.HTMLAttributes<HTMLTableRowEle
     onClick?: () => void;
     /** Alternativa explícita a onClick para control manual */
     interactive?: boolean;
-    /** Marca la fila como seleccionada: se dice con tinta y peso, sin fondo. */
+    /**
+     * Marca la fila como seleccionada: **solo visual** (`table__row--selected`,
+     * tinta y peso, sin fondo). No emite `aria-selected`, que fuera de un
+     * `role="grid"` no es válido en una fila: el estado lo anuncia el control
+     * de la fila —normalmente una casilla, como en `DataTable`—.
+     */
     selected?: boolean;
     /**
      * Nombre accesible de la fila. Por defecto el rol `row` toma su nombre del

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

@@ -20,6 +20,8 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
      * Nombre accesible del `nav`. **Sin default**: sin él, sale de
      * `tableOfContents.label` del `BrandMessagesProvider`.
      */
+    'aria-label'?: string;
+    /** @deprecated Usa `aria-label`. Sigue funcionando y avisa en desarrollo; se retira en la v52. */
     ariaLabel?: string;
     /** Rótulo visible sobre la lista. Sin él, no se pinta ninguno. */
     title?: string;
@@ -44,7 +46,7 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
  * sigue al hash y para uno estático.
  *
  * `{...rest}` (`id`, `data-*`, `role`…) se reenvía al `<nav>`. El nombre
- * accesible sigue siendo `ariaLabel`.
+ * accesible es `aria-label`.
  */
 /**
  * El único texto que el índice dice por su cuenta, y es **cromo**: «En esta

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

@@ -1,6 +1,7 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './TextareaField.css';
-export interface TextareaFieldProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'rows'> {
+import { type FieldOptionalProps } from '../_shared/FieldShell';
+export interface TextareaFieldProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'defaultValue' | 'rows'>, FieldOptionalProps {
     id: string;
     label: string;
     /**

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

@@ -1,6 +1,7 @@
+import { type FieldOptionalProps } from '../_shared/FieldShell';
 import type { TimeValue } from '../../atoms/TimeSelect/TimeSelect';
 import './TimeField.css';
-export interface TimeFieldProps {
+export interface TimeFieldProps extends FieldOptionalProps {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
     label: string;

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

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { type StepMarkerTone } from '../../atoms/StepMarker/StepMarker';
+import { type StepMarkerTone, type StepMarkerToneDeprecated } from '../../atoms/StepMarker/StepMarker';
 import type { IconName } from '../../atoms/Icon/Icon';
 import './Timeline.css';
 /**
@@ -14,8 +14,11 @@ export interface TimelineMessages {
     /** Lo que se lee tras el título del hito vigente: «estado actual». */
     current: string;
 }
-/** El tono de la marca: los mismos ocho que `StepMarker`, sin traducción. */
-export type TimelineTone = StepMarkerTone;
+/**
+ * El tono de la marca: los mismos ocho que `StepMarker`, sin traducción. Admite
+ * todavía el obsoleto `danger` (hoy `error`), que la marca traduce y avisa.
+ */
+export type TimelineTone = StepMarkerTone | StepMarkerToneDeprecated;
 /** Un hito del historial: un cambio de estado, con su fecha y quien lo firmó. */
 export interface TimelineItem {
     id: string;

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

@@ -32,8 +32,9 @@ export interface UserMenuProps {
     defaultOpen?: boolean;
     /**
      * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
-     * Va al disparador: es el único nodo que el componente pinta en su sitio (el
-     * panel sale por un portal).
+     * **Va al disparador, que pinta el componente**: 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/_shared/FieldShell.d.ts

@@ -0,0 +1,130 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { FormSize } from '../../constants/form-size';
+/**
+ * El espacio `field` del catálogo: los textos que pinta el armazón común de
+ * los campos. Como todo el catálogo, opcional en `BrandMessages`: sin él
+ * la marca cae al castellano «(opcional)».
+ */
+export interface FieldMessages {
+    /** La marca tras la etiqueta de un campo `optional`. Castellano: «(opcional)». */
+    optional: string;
+    /**
+     * La descripción oculta que anuncia un campo obligatorio cuyo disparador es
+     * un botón, que no admite `aria-required` (D73): `ColorPickerField` y
+     * `DropdownField`. Castellano: «obligatorio».
+     */
+    required: string;
+}
+/**
+ * La marca de campo opcional (D70), común a todos los `*Field`. Se marca lo
+ * **opcional**, no lo obligatorio: en un formulario donde casi todo es
+ * obligatorio, lo que hay que señalar es la excepción. Es explícita —un campo
+ * sin `required` no la lleva sola—, porque un campo suelto (un buscador, un
+ * filtro) no es «opcional» de ningún formulario.
+ */
+export interface FieldOptionalProps {
+    /**
+     * Pinta « (opcional)» tras la etiqueta, en la tinta apagada de la etiqueta.
+     * Va dentro del `<label>`, así que el lector de pantalla la lee como parte
+     * del nombre del campo. No se combina con `required`. Sin valor, lo decide
+     * el `Form` que lo envuelva: con `markOptional`, todo campo sin `required`
+     * la lleva (D74); `optional={false}` la apaga en un campo concreto. Sin
+     * `Form markOptional`, por defecto `false`.
+     */
+    optional?: boolean;
+    /**
+     * Texto de la marca de opcional. **Sin default en la prop**: sin ella, sale
+     * de `field.optional` del `BrandMessagesProvider` y, si el catálogo no la
+     * trae, del castellano «(opcional)».
+     */
+    optionalLabel?: string;
+}
+/**
+ * Lo obligatorio de un campo cuyo disparador es un botón (D73). ARIA 1.2 no
+ * admite `aria-required` ni en `role="button"` ni en `role="group"`, así que
+ * lo obligatorio va en la **descripción** del disparador: un texto oculto
+ * («obligatorio») enlazado por su `aria-describedby`, detrás de la ayuda y el
+ * error. El `<form>` lo sigue validando el campo oculto con `required`.
+ */
+export interface FieldRequiredProps {
+    /**
+     * Texto que anuncia lo obligatorio. **Sin default en la prop**: sin ella,
+     * sale de `field.required` del `BrandMessagesProvider` y, si el catálogo no
+     * la trae, del castellano «obligatorio». Solo se lee con `required`.
+     */
+    requiredLabel?: string;
+}
+/** El `id` del texto oculto de obligatorio de un control. */
+export declare function requiredTextId(controlId: string): string;
+/**
+ * El texto oculto «obligatorio» al que apunta el `aria-describedby` del
+ * disparador (ver `FieldRequiredProps`). Se pinta solo con `required`.
+ */
+export declare function FieldRequiredText({ id, label }: {
+    id: string;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Une ids para un `aria-*` de referencias; sin ninguno, `undefined` (no un atributo vacío). */
+export declare function joinIds(...ids: Array<string | false | null | undefined>): string | undefined;
+export interface FieldShellOptions {
+    /** `id` del control. Sin él, uno de `useId`. */
+    id?: string;
+    /** Error sin mensaje. Un `errorMessage` ya lo implica. */
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    /** `aria-describedby` que trae el consumidor: se suma detrás de los propios. */
+    describedBy?: string;
+}
+export interface FieldShellState {
+    /** `id` del control (el del consumidor o uno generado). */
+    id: string;
+    /** `id` de la etiqueta, para los controles que se nombran por `aria-labelledby`. */
+    labelId: string;
+    errorId?: string;
+    helperId?: string;
+    /** Lo que va en el `aria-describedby` del control. */
+    describedBy?: string;
+    /** Error con o sin mensaje: lo que pone el control en error. */
+    hasError: boolean;
+    errorMessage?: string;
+    helperText?: string;
+}
+export declare function useFieldShell({ id: idProp, error, errorMessage, helperText, describedBy }: FieldShellOptions): FieldShellState;
+export interface FieldShellProps {
+    /** El estado de `useFieldShell`. */
+    field: FieldShellState;
+    /** Bloque BEM del campo (`input-field`): clase raíz y prefijo de `__helper`/`__label`/`__control`. */
+    block: string;
+    /** Clases de modificador ya formadas (`checkbox-field--sm`); los falsos se descartan. */
+    modifiers?: Array<string | false | null | undefined>;
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+    /** Talla de la etiqueta (`stack`). */
+    size?: FormSize;
+    /** Texto de la etiqueta. Sin él no se pinta etiqueta (el control se nombra por otra vía). */
+    label?: ReactNode;
+    /** Marca de campo opcional tras la etiqueta (ver `FieldOptionalProps`). */
+    optional?: boolean;
+    /** Texto de la marca; sin él, `field.optional` del catálogo o «(opcional)». */
+    optionalLabel?: string;
+    /** Etiqueta oculta a la vista, presente para el lector de pantalla. */
+    labelHidden?: boolean;
+    /**
+     * - `stack` (por defecto): `Label` encima del control.
+     * - `inline`: un `<label>` (`__control`) envuelve el control y, a su derecha,
+     *   el texto (`__label`): casilla, radio, interruptor.
+     */
+    layout?: 'stack' | 'inline';
+    /** A qué apunta el `htmlFor` de la etiqueta. Default: `field.id`. */
+    labelFor?: string;
+    /** La etiqueta lleva `id` (`field.labelId`) para que la apunte un `aria-labelledby`. */
+    labelIdentified?: boolean;
+    /** Atributos del contenedor (el `role="group"` de un editor compuesto). */
+    rootProps?: HTMLAttributes<HTMLDivElement>;
+    /** El control (y lo que vaya pegado a él). */
+    children: ReactNode;
+    /** Lo que va tras la ayuda: la acción de `PasswordField`. */
+    footer?: ReactNode;
+}
+export declare function FieldShell({ field, block, modifiers, className, size, label, optional, optionalLabel, labelHidden, layout, labelFor, labelIdentified, rootProps, children, footer, }: FieldShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/molecules/_shared/requiredInput.d.ts

@@ -0,0 +1,8 @@
+export interface RequiredInputProps {
+    name?: string;
+    value: string;
+    required?: boolean;
+    /** El control al que se devuelve el foco cuando el navegador lo pide para avisar. */
+    focusTarget?: () => HTMLElement | null | undefined;
+}
+export declare function RequiredInput({ name, value, required, focusTarget }: RequiredInputProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts

@@ -68,8 +68,9 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
     replies?: AnnotationEntry[];
     /**
      * Estado del hilo, en orden de flujo. `open` pide atención; `acknowledged`
-     * es el hilo que alguien ya ha mirado y da un paso atrás sin cerrarse;
-     * `resolved` se retira visualmente sin desaparecer.
+     * es el hilo que alguien ya ha mirado, sin cerrarse; `resolved` está
+     * cerrado. Lo dice la etiqueta de estado que abre el hilo: el hilo se lee
+     * a contraste pleno en los tres.
      */
     status?: AnnotationThreadStatus;
     /**

package/dist/_types/organisms/DataTable/DataTable.d.ts

@@ -55,7 +55,7 @@ export interface DataTableServerPagination {
 /** Etiquetas accesibles que la tabla reenvía a sus cabeceras ordenables. */
 export type DataTableHeaderLabels = Pick<TableHeaderProps, 'actionsLabel' | 'sortedAscLabel' | 'sortedDescLabel' | 'sortableLabel'>;
 /** Etiquetas accesibles que la tabla reenvía a su paginación. */
-export type DataTablePaginationLabels = Pick<PaginationProps, 'ariaLabel' | 'pageLabel' | 'previousLabel' | 'nextLabel' | 'pagesGroupLabel' | 'pageSizeLabel' | 'totalLabel' | 'pageSizeOptions'>;
+export type DataTablePaginationLabels = Pick<PaginationProps, 'aria-label' | 'ariaLabel' | 'pageLabel' | 'previousLabel' | 'nextLabel' | 'pagesGroupLabel' | 'pageSizeLabel' | 'totalLabel' | 'pageSizeOptions'>;
 export interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];

package/dist/_types/organisms/PlanningGrid/PlanningGrid.d.ts

@@ -21,6 +21,11 @@ export interface PlanningGridMessages {
     remaining: string;
     /** Lo que se lee tras un resto negativo: hay más horas asignadas que disponibles. */
     over: string;
+    /**
+     * Lo que anuncia la marca de guardado de un cruce en vuelo («Guardando…»).
+     * **Opcional**: un catálogo sin ella compila, y la rejilla cae al castellano.
+     */
+    saving?: string;
 }
 /** Una fila: un proyecto, una persona. Lo que se planifica. */
 export interface PlanningGridRow {
@@ -56,7 +61,7 @@ export interface PlanningGridCell {
     value: number | null;
     /** Este cruce en concreto no se edita. */
     readOnly?: boolean;
-    /** El cambio está en vuelo: la celda se atenúa. */
+    /** El cambio está en vuelo: la cifra sigue a contraste pleno y la celda lleva una marca de guardado (un `Spinner` pequeño). */
     pending?: boolean;
     /** Lo que falló al guardar este cruce. Pone el campo en error y se anuncia. */
     error?: string;
@@ -103,6 +108,12 @@ export interface PlanningGridProps extends Omit<ComponentPropsWithoutRef<'div'>,
     label?: string;
     /** Nombre accesible del campo de un cruce. Sin él, sale de `planningGrid.cellLabel`. */
     cellLabel?: (row: string, column: string) => string;
+    /**
+     * Lo que anuncia la marca de guardado de un cruce en vuelo. Sin ella, sale
+     * de `planningGrid.saving` del catálogo y, si el catálogo no la trae, del
+     * default castellano «Guardando…». Solo se lee cuando hay un cruce en vuelo.
+     */
+    savingLabel?: string;
 }
 /**
  * La rejilla editable de horas: fila × columna —persona por semana, proyecto

package/dist/_types/organisms/Steps/Steps.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type HeadingLevel, type HeadingSize } from '../../atoms/Heading/Heading';
 import { type IconName } from '../../atoms/Icon/Icon';
-import { type StepMarkerTone } from '../../atoms/StepMarker/StepMarker';
+import { type StepMarkerTone, type StepMarkerToneDeprecated } from '../../atoms/StepMarker/StepMarker';
 import './Steps.css';
 export interface StepItem {
     /** Clave de React. Sin ella se usa la posición. */
@@ -23,9 +23,9 @@ export interface StepsProps {
     /** Uno debajo de otro (por defecto) o en fila. */
     orientation?: 'vertical' | 'horizontal';
     /** Color de la marca. Por defecto `primary`. */
-    tone?: StepMarkerTone;
+    tone?: StepMarkerTone | StepMarkerToneDeprecated;
     /** @deprecated Usar `tone`. Se mantiene como alias por compatibilidad. */
-    badgeVariant?: StepMarkerTone;
+    badgeVariant?: StepMarkerTone | StepMarkerToneDeprecated;
     /** Nivel semántico del título de cada paso. Por defecto `3`. */
     titleLevel?: HeadingLevel;
     /** Talla del título de cada paso. Por defecto `1` (14px, la de la etiqueta de `Stepper`). */

package/dist/_types/sections/Hero/Hero.d.ts

@@ -5,7 +5,7 @@ export interface HeroProps {
     /** El título de la portada: un `Heading` de nivel 1 a talla 10 (display). */
     title: ReactNode;
     /**
-     * La frase bajo el título, opcional: `Paragraph size="large"`. Termina en
+     * La frase bajo el título, opcional: `Paragraph size="lg"`. Termina en
      * punto (ver Foundations → Redacción).
      */
     description?: ReactNode;

package/dist/_types/sections/SiteHeader/SiteHeader.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ContainerWidth } from '../../atoms/Container/Container';
-import { type LogoSize } from '../../atoms/Logo/Logo';
+import { type LogoSize, type LogoSizeDeprecated } from '../../atoms/Logo/Logo';
 import './SiteHeader.css';
 export type SiteHeaderLogoLinkProps = {
     href: string;
@@ -28,8 +28,8 @@ export interface SiteHeaderProps {
     menuCloseLabel?: string;
     /** La marca. Por defecto el `Logo` de Studio LXD a `logoSize`; un producto de la suite pone la suya. */
     logo?: ReactNode;
-    /** Talla del logotipo por defecto. `xxl` (85px): la cabecera es el sitio de la marca. */
-    logoSize?: LogoSize;
+    /** Talla del logotipo por defecto. `2xl` (85px): la cabecera es el sitio de la marca. `xxl` es el alias obsoleto de `2xl` (se retira en la v52). */
+    logoSize?: LogoSize | LogoSizeDeprecated;
     /** Talla del botón de menú. `lg` (48px) acompaña al logotipo grande. */
     menuButtonSize?: 'sm' | 'md' | 'lg';
     /**

package/dist/accordion.css

@@ -1 +1 @@
-.accordion{inline-size:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);inline-size:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-inline-size:0}.accordion__index{min-inline-size:var(--accordion-index-min-inline-size);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-inline-size) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}
+.accordion{inline-size:100%}.accordion__item{border-block-start:var(--accordion-border-width) solid var(--accordion-border-color)}.accordion__header{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin-block:0}.accordion__trigger{all:unset;box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--accordion-trigger-gap);inline-size:100%;padding-block:var(--accordion-trigger-padding-block);padding-inline:var(--accordion-trigger-padding-inline);cursor:var(--accordion-trigger-cursor);text-align:start;display:flex}.accordion__trigger:focus-visible{outline:var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);outline-offset:var(--accordion-focus-ring-offset)}.accordion__trigger[data-disabled]{cursor:default}.accordion__trigger-text{flex:1;min-inline-size:0}.accordion__index{min-inline-size:var(--accordion-index-min-width);font-family:var(--accordion-index-font-family);font-size:var(--accordion-index-font-size);color:var(--accordion-index-color);flex-shrink:0}.accordion--numbered .accordion__content-inner{padding-inline-start:calc(var(--accordion-index-min-width) + var(--accordion-trigger-gap))}.accordion__chevron{transition:transform var(--accordion-transition-duration) var(--accordion-transition-easing);flex-shrink:0;transform:rotate(90deg)}.accordion__trigger[data-panel-open] .accordion__chevron{transform:rotate(-90deg)}.accordion__content{overflow:hidden}.accordion__content[data-open]{animation:accordion-open var(--accordion-transition-duration) var(--accordion-transition-easing)}.accordion__content[data-closed]{animation:accordion-close var(--accordion-transition-duration) var(--accordion-transition-easing)}@keyframes accordion-open{0%{height:0}to{height:var(--collapsible-panel-height)}}@keyframes accordion-close{0%{height:var(--collapsible-panel-height)}to{height:0}}.accordion__content-inner{padding-block-end:var(--accordion-content-padding-block);padding-inline:var(--accordion-content-padding-inline)}