@studiolxd/brand 50.0.0 → 51.0.0

package/dist/_shared/untrustedtext.js

@@ -1,44 +1,48 @@
 import '../untrustedtext.css';
-import { n as e } from "./brandmessagescontext.js";
+import { r as e } from "./brandmessagescontext.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-//#region src/stories/templates/ConnectorAuth/UntrustedText.tsx
-var r = /[\u061C\u200B\u200E\u200F\u202A-\u202E\u2060-\u2064\u2066-\u2069\uFEFF]/g, i = 80;
-function a(e) {
-	return e.replace(r, (e) => `[U+${e.codePointAt(0).toString(16).toUpperCase().padStart(4, "0")}]`);
+//#region src/stories/messages/es/untrustedText.ts
+var r = {
+	expand: "Ver el valor completo",
+	collapse: "Ver menos",
+	quotes: ["«", "»"]
+}, i = /[\u061C\u200B\u200E\u200F\u202A-\u202E\u2060-\u2064\u2066-\u2069\uFEFF]/g, a = 80;
+function o(e) {
+	return e.replace(i, (e) => `[U+${e.codePointAt(0).toString(16).toUpperCase().padStart(4, "0")}]`);
 }
-function o({ value: r, expandable: o = !1, expandLabel: s, collapseLabel: c, quotes: l, className: u }) {
-	let d = e("untrustedText"), f = (...e) => [...e, u].filter(Boolean).join(" ");
-	if (typeof r != "string") return /* @__PURE__ */ t("span", {
-		className: f("connector-untrusted"),
-		children: r
+function s({ value: i, expandable: s = !1, expandLabel: c, collapseLabel: l, quotes: u, className: d }) {
+	let f = e("untrustedText", r), p = (...e) => [...e, d].filter(Boolean).join(" ");
+	if (typeof i != "string") return /* @__PURE__ */ t("span", {
+		className: p("connector-untrusted"),
+		children: i
 	});
-	let p = a(r), m = Array.from(p).length > i, [h, g] = d("quotes", l), _ = /* @__PURE__ */ n("span", {
-		className: m ? "connector-untrusted__value connector-untrusted__value--clamped" : "connector-untrusted__value",
+	let m = o(i), h = Array.from(m).length > a, [g, _] = f("quotes", u), v = /* @__PURE__ */ n("span", {
+		className: h ? "connector-untrusted__value connector-untrusted__value--clamped" : "connector-untrusted__value",
 		children: [
-			h,
-			/* @__PURE__ */ t("bdi", { children: p }),
-			g
+			g,
+			/* @__PURE__ */ t("bdi", { children: m }),
+			_
 		]
 	});
-	return !m || !o ? /* @__PURE__ */ t("span", {
-		className: f("connector-untrusted"),
-		children: _
+	return !h || !s ? /* @__PURE__ */ t("span", {
+		className: p("connector-untrusted"),
+		children: v
 	}) : /* @__PURE__ */ t("details", {
-		className: f("connector-untrusted", "connector-untrusted--expandable"),
+		className: p("connector-untrusted", "connector-untrusted--expandable"),
 		children: /* @__PURE__ */ n("summary", {
 			className: "connector-untrusted__summary",
-			children: [_, /* @__PURE__ */ n("span", {
+			children: [v, /* @__PURE__ */ n("span", {
 				className: "link connector-untrusted__toggle",
 				children: [/* @__PURE__ */ t("span", {
 					className: "connector-untrusted__more",
-					children: d("expand", s)
+					children: f("expand", c)
 				}), /* @__PURE__ */ t("span", {
 					className: "connector-untrusted__less",
-					children: d("collapse", c)
+					children: f("collapse", l)
 				})]
 			})]
 		})
 	});
 }
 //#endregion
-export { o as t };
+export { s as t };

package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts

@@ -64,7 +64,12 @@ export interface AsyncMultiSelectProps {
     required?: boolean;
     /** Se llama al salir del control (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 con las fichas): el panel sale por un
+     * portal y se personaliza con tokens (regla de `className` en componentes
+     * con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
     /**
      * Nombre accesible cuando el control va suelto. En un campo lo nombra la

package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts

@@ -53,7 +53,12 @@ export interface AsyncSelectProps {
     required?: boolean;
     /** Se llama al salir del control (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 de búsqueda): el panel sale por un
+     * portal y se personaliza con tokens (regla de `className` en componentes
+     * con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
     /**
      * Nombre accesible cuando el control va suelto. En un campo lo nombra la

package/dist/_types/atoms/Autocomplete/Autocomplete.d.ts

@@ -58,7 +58,12 @@ export interface AutocompleteProps {
     maxLength?: number;
     /** Se llama al salir del control (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): el panel sale por un
+     * portal y se personaliza con tokens (regla de `className` en componentes
+     * con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
     /**
      * Nombre accesible cuando el control va suelto, y de la lista de

package/dist/_types/atoms/Button/Button.d.ts

@@ -74,6 +74,19 @@ export interface ButtonBaseProps extends Omit<React.ComponentPropsWithoutRef<'bu
      * enseña (el `Toast`, el error del campo).
      */
     loading?: boolean;
+    /**
+     * Con `disabled`, el botón **sigue en el orden de tabulación**: deja el
+     * `disabled` nativo, se anuncia deshabilitado con `aria-disabled="true"` y
+     * no ejecuta nada (ni el `onClick` ni el envío del formulario). Es lo que
+     * hace falta cuando un `Tooltip` explica por qué no se puede pulsar: un
+     * `button[disabled]` no recibe foco ni eventos de puntero, así que el
+     * bocadillo no se abriría. `Tooltip` lo activa solo en su disparador
+     * deshabilitado; fuera de él, pásalo a mano solo si el control apagado tiene
+     * algo que decir al recibir el foco. Mismo nombre y contrato que en Base UI.
+     *
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
     /** Renders as <a> when provided */
     href?: string;
     /** Adds target="_blank" rel="noopener noreferrer" (solo con href) */

package/dist/_types/atoms/CloseButton/CloseButton.d.ts

@@ -19,6 +19,15 @@ export interface CloseButtonProps extends Omit<ComponentPropsWithoutRef<'button'
     label?: string;
     /** Talla del botón: un cuadrado de 32, 40 o 48px. El glifo mide 24 en las tres. */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Con `disabled`, el aspa sigue en el orden de tabulación: deja el
+     * `disabled` nativo, se anuncia con `aria-disabled="true"` y no ejecuta el
+     * `onClick`. Mismo contrato que en `Button`; `Tooltip` lo activa solo en su
+     * disparador deshabilitado.
+     *
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
 }
 /**
  * El aspa del sistema: el botón que cierra lo que lo contiene —un diálogo, un

package/dist/_types/atoms/DescriptionList/DescriptionList.d.ts

@@ -4,18 +4,18 @@ export interface DescriptionTermProps extends React.ComponentPropsWithoutRef<'dt
      * Elemento a renderizar. Default `'dt'`, que es lo correcto dentro de una
      * `DescriptionList`. Solo se cambia cuando el término no cuelga de una lista
      * de descripción real y hay que darle el rol a mano (`as="div"
-     * role="term"`).
+     * role="term"`). Solo cambia la etiqueta.
      */
-    as?: React.ElementType;
+    as?: 'dt' | 'div';
     children?: React.ReactNode;
 }
 export interface DescriptionDetailsProps extends React.ComponentPropsWithoutRef<'dd'> {
     /**
      * Elemento a renderizar. Default `'dd'`. Mismo criterio que en
      * `DescriptionTerm`: solo se cambia fuera de un `<dl>` real (`as="div"
-     * role="definition"`).
+     * role="definition"`). Solo cambia la etiqueta.
      */
-    as?: React.ElementType;
+    as?: 'dd' | 'div';
     children?: React.ReactNode;
     /**
      * Añade un botón de copiar en línea, pegado al final del valor (nunca al

package/dist/_types/atoms/EmbedFrame/EmbedFrame.d.ts

@@ -13,6 +13,17 @@ export interface EmbedFrameProps extends Omit<React.ComponentPropsWithoutRef<'if
      * con alto —solo en la página, o como celda de `Columns`—.
      */
     fill?: 'container' | 'viewport';
+    /**
+     * El dispositivo que simula: el ancho del marco. `mobile` (375px) y
+     * `tablet` (768px, `breakpoint.md`) le dan ese ancho, centrado en el hueco
+     * y sin pasar nunca del disponible; `desktop` (por defecto) llena el ancho
+     * del contenedor. El documento de dentro responde a su propia ventana, así
+     * que sus media queries ven el ancho del dispositivo. El alto no cambia:
+     * lo sigue poniendo `fill`.
+     *
+     * @default 'desktop'
+     */
+    device?: 'mobile' | 'tablet' | 'desktop';
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
 }
@@ -24,7 +35,8 @@ export interface EmbedFrameProps extends Omit<React.ComponentPropsWithoutRef<'if
  * **El alto lo pone el contenedor**: el marco llena la caja que le dan. Dentro
  * de `AppShell` esa caja es el contenido principal, que ya mide el resto de la
  * ventana bajo la cabecera y junto a la barra lateral. Sin contenedor con alto,
- * `fill="viewport"` le da el de la ventana.
+ * `fill="viewport"` le da el de la ventana. **El ancho** es el del contenedor,
+ * o el de un dispositivo con `device` (vista previa en móvil o tableta).
  *
  * `ref` apunta al `<iframe>` —de ahí sale `contentWindow` para `postMessage`—
  * y `{...rest}` (`allow`, `sandbox`, `loading`, `referrerPolicy`, `name`,

package/dist/_types/atoms/Fieldset/Fieldset.d.ts

@@ -1,13 +1,18 @@
 import type { HeadingSize } from '../Heading/Heading';
 import './Fieldset.css';
-type HeadingWeight = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
 export interface FieldsetProps {
     /** Texto del legend (título del grupo de campos). */
     legend: React.ReactNode;
+    /**
+     * Oculta la leyenda a la vista y la deja para el lector de pantalla: sigue
+     * nombrando el grupo. La clase `visually-hidden` va sobre el propio
+     * `<legend>`, que tiene que ser el primer hijo del `fieldset` —envolverlo en
+     * el `<span>` de `VisuallyHidden` rompería esa asociación—. Por defecto
+     * `false`.
+     */
+    legendHidden?: boolean;
     /** Nivel de heading visual para el legend (1–6). */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Peso tipográfico del legend. */
-    weight?: HeadingWeight;
     /** Tamaño tipográfico del legend. */
     size?: HeadingSize;
     /** Clases adicionales para el fieldset. */
@@ -16,7 +21,8 @@ export interface FieldsetProps {
     id?: string;
     /** Deshabilita todos los controles descendientes en un solo punto. */
     disabled?: boolean;
+    /** Ids de ayuda/error que describen el grupo entero (lo pone el campo compuesto que lo use). */
+    'aria-describedby'?: string;
     children: React.ReactNode;
 }
-export declare function Fieldset({ legend, level, weight, size, className, id, disabled, children, }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Fieldset({ legend, legendHidden, level, size, className, id, disabled, 'aria-describedby': ariaDescribedBy, children, }: FieldsetProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/FileUpload/FileUpload.d.ts

@@ -82,11 +82,16 @@ export interface FileUploadProps {
     size?: FormSize;
     /** @deprecated Usa el atributo nativo `aria-describedby`. */
     describedBy?: string;
-    /** @deprecated Usa el atributo nativo `aria-label`. */
+    /** @deprecated Usa el atributo nativo `aria-label`. Sigue funcionando y avisa en desarrollo; se retira en la v52. */
     ariaLabel?: string;
     /** Ids de ayuda/error que describen el control (lo pone el campo). */
     'aria-describedby'?: string;
-    /** Nombre accesible cuando el control va suelto. */
+    /**
+     * Nombre accesible cuando el control va suelto (sin `FileUploadField` que le
+     * ponga `<label>`). Es la única prop de nombre: la zona de arrastre es la
+     * cara visible del control y el `<input type="file">` real, que es lo que
+     * se anuncia, lo toma de aquí.
+     */
     'aria-label'?: string;
     required?: boolean;
     /** Se llama al salir del `<input type="file">` (react-hook-form lo usa para validar). */

package/dist/_types/atoms/Input/Input.d.ts

@@ -8,7 +8,7 @@ export interface InputProps extends Omit<React.ComponentPropsWithoutRef<'input'>
     className?: string;
     /** @deprecated Usa el atributo nativo `aria-describedby`. */
     describedBy?: string;
-    /** @deprecated Usa el atributo nativo `aria-label`. */
+    /** @deprecated Usa el atributo nativo `aria-label`. Sigue funcionando y avisa en desarrollo; se retira en la v52. */
     ariaLabel?: string;
 }
 /**

package/dist/_types/atoms/InputPhone/InputPhone.d.ts

@@ -57,7 +57,12 @@ export interface InputPhoneProps {
      * cajón de un shell propio. Gana siempre.
      */
     container?: React.ComponentPropsWithoutRef<typeof BaseSelect.Portal>['container'];
-    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    /**
+     * Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye).
+     * **Va al disparador, que pinta el componente** (el campo: el selector de país y el número): 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/atoms/Link/Link.d.ts

@@ -11,9 +11,13 @@ export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
      * línea en claro, amarillo con línea en hover en oscuro (el ejemplo es
      * «¿olvidaste la contraseña?»). `ink`: el enlace utilitario (legal,
      * volver) — tinta, línea en reposo y ninguna en hover, en las dos
-     * superficies. `accent-1`: acento 1 de la paleta (lavanda) — color
-     * saturado que ya contrasta en cualquier superficie, línea en reposo que
-     * desaparece en hover, igual en las dos.
+     * superficies. `accent-1`: acento 1 de la paleta (lavanda), solo en
+     * superficie oscura — en claro la lavanda no contrasta (2,02:1) y cae al
+     * tono por defecto; línea en reposo que desaparece en hover.
+     *
+     * Dentro de texto corrido (un párrafo, una etiqueta, un título, `Prose`)
+     * la línea va en reposo y se quita en hover en las dos superficies, sea
+     * cual sea el tono: lo decide el contenedor, no la prop.
      */
     tone?: 'accent' | 'ink' | 'accent-1';
     /** Un icono junto al texto («← Volver», «Descargar ↓»). Decorativo: el texto ya lo dice. Mide lo que el texto del enlace (`1em`) y sube y baja con él. */

package/dist/_types/atoms/List/List.d.ts

@@ -4,9 +4,11 @@ export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
     /**
      * Elemento a renderizar. Default `'li'`, que es lo correcto dentro de una
      * `List`. Solo se cambia cuando el ítem no cuelga de una lista real y hay
-     * que darle el rol a mano (`as="div" role="listitem"`).
+     * que darle el rol a mano (`as="div" role="listitem"`). Solo cambia la
+     * etiqueta: para sustituir el elemento entero por otro componente no hay
+     * prop, y una fila pulsable lleva el botón o el enlace **dentro** del ítem.
      */
-    as?: React.ElementType;
+    as?: 'li' | 'div';
     children?: React.ReactNode;
     /**
      * Accesorio al principio de la fila: un icono, un avatar. Pareja de

package/dist/_types/atoms/Logo/Logo.d.ts

@@ -1,9 +1,15 @@
 import './Logo.css';
-/** Alto del logotipo: las tallas de componente y, para la cabecera del sitio, `xl` (64px, la talla ilustrativa de la escala de iconos) y `xxl` (85px, un peldaño más por el mismo salto de la escala). El ancho sale de la proporción. */
-export type LogoSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/** Alto del logotipo: las tallas de componente y, para la cabecera del sitio, `xl` (64px, la talla ilustrativa de la escala de iconos) y `2xl` (85px, un peldaño más por el mismo salto de la escala). El ancho sale de la proporción. */
+export type LogoSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** @deprecated `xxl` es `2xl` desde la v51 (las tallas del sistema se escriben `xs`…`4xl`). Se retira en la v52. */
+export type LogoSizeDeprecated = 'xxl';
 export interface LogoProps {
-    /** Talla. `md` (40px de alto) por defecto: la de una cabecera. */
-    size?: LogoSize;
+    /**
+     * Talla. `md` (40px de alto) por defecto: la de una cabecera. `xxl` es un
+     * alias obsoleto de `2xl`, que sigue funcionando con un aviso en desarrollo
+     * hasta la v52.
+     */
+    size?: LogoSize | LogoSizeDeprecated;
     className?: string;
 }
 /**
@@ -12,4 +18,4 @@ export interface LogoProps {
  * `surface-dark` pasa a claro por tokens— y su alto es una talla de componente,
  * de modo que en una barra de 40px mide 40px sin que nadie lo ajuste.
  */
-export declare function Logo({ size, className }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export declare function Logo({ size: sizeProp, className }: LogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/Logo/index.d.ts

@@ -1,3 +1,3 @@
 export { Logo } from './Logo';
-export type { LogoProps, LogoSize } from './Logo';
+export type { LogoProps, LogoSize, LogoSizeDeprecated } from './Logo';
 export { logoPaths, logoSvg, logoViewBox } from './logoAssets';

package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts

@@ -28,6 +28,11 @@ export interface MultiSelectProps {
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    /**
+     * Obligatorio: Base UI pone `aria-required` en el `combobox` y `required` en
+     * el input oculto con que valida el formulario nativo.
+     */
+    required?: boolean;
     size?: 'sm' | 'md' | 'lg';
     onValueChange?: (value: string[]) => void;
     id?: string;
@@ -37,7 +42,12 @@ export interface MultiSelectProps {
     error?: boolean;
     /** Se llama al salir del disparador (react-hook-form lo usa para validar). */
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
-    /** 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 panel sale por un
+     * portal y se personaliza con tokens (regla de `className` en componentes
+     * con portal, CLAUDE.md § Base UI).
+     */
     className?: string;
     /**
      * Nombre accesible cuando el control va suelto. En un campo lo nombra la

package/dist/_types/atoms/NumberBadge/NumberBadge.d.ts

@@ -1,7 +1,19 @@
 import './NumberBadge.css';
-export type NumberBadgeVariant = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'danger' | 'success' | 'neutral';
+/** Color del contador: los de marca, los de feedback y `neutral`. */
+export type NumberBadgeTone = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'error' | 'success' | 'neutral';
+/**
+ * @deprecated Usa `NumberBadgeTone`. La prop de color se llama `tone` desde la
+ * v51 y `danger` es `error`. Se retira en la v52.
+ */
+export type NumberBadgeVariant = NumberBadgeTone | 'danger';
 export interface NumberBadgeProps {
     count: number;
+    /** Color del contador. Default `'primary'`. */
+    tone?: NumberBadgeTone;
+    /**
+     * @deprecated Usa `tone`. `variant="danger"` es `tone="error"`. Sigue
+     * funcionando, con un aviso en desarrollo, hasta la v52.
+     */
     variant?: NumberBadgeVariant;
     /** Límite a partir del cual se muestra «99+». Por defecto 99. */
     max?: number;
@@ -16,4 +28,4 @@ export interface NumberBadgeProps {
     'aria-hidden'?: boolean | 'true' | 'false';
     className?: string;
 }
-export declare function NumberBadge({ count, variant, max, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, className, }: NumberBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberBadge({ count, tone: toneProp, variant, max, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, className, }: NumberBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/NumberInput/NumberInput.d.ts

@@ -49,7 +49,7 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>
     name?: string;
     /** @deprecated Usa el atributo nativo `aria-describedby`. */
     describedBy?: string;
-    /** @deprecated Usa el atributo nativo `aria-label`. */
+    /** @deprecated Usa el atributo nativo `aria-label`. Sigue funcionando y avisa en desarrollo; se retira en la v52. */
     ariaLabel?: string;
     /** Se añade DESPUÉS de las clases propias del componente (el consumidor añade, no sustituye). */
     className?: string;

package/dist/_types/atoms/OtpInput/OtpInput.d.ts

@@ -21,6 +21,8 @@ export interface OtpInputProps {
     onComplete?: (value: string) => void;
     disabled?: boolean;
     readOnly?: boolean;
+    /** Obligatorio: `required` nativo en cada celda — un código a medias no vale. */
+    required?: boolean;
     error?: boolean;
     size?: 'sm' | 'md' | 'lg';
     /** @deprecated Usa el atributo nativo `aria-describedby`. */

package/dist/_types/atoms/Paragraph/Paragraph.d.ts

@@ -1,7 +1,19 @@
 import './Paragraph.css';
+/** Talla del párrafo: un peldaño por debajo del cuerpo (`sm`), el cuerpo (`md`) y uno por encima (`lg`). */
+export type ParagraphSize = 'sm' | 'md' | 'lg';
+/**
+ * @deprecated Usa `ParagraphSize`: `small` es `sm`, `default` es `md` y
+ * `large` es `lg` desde la v51 (las tallas del sistema se escriben `xs`…`4xl`,
+ * nunca con palabras). Se retira en la v52.
+ */
+export type ParagraphSizeDeprecated = 'small' | 'default' | 'large';
 export interface ParagraphProps extends Omit<React.ComponentPropsWithoutRef<'p'>, 'children'> {
-    /** Tamaño: `small` para notas y metadatos, `large` para entradillas. */
-    size?: 'small' | 'default' | 'large';
+    /**
+     * Talla: `sm` para notas y metadatos, `lg` para entradillas. Default `md`
+     * (el cuerpo). `small`, `default` y `large` son alias obsoletos que siguen
+     * funcionando, con un aviso en desarrollo, hasta la v52.
+     */
+    size?: ParagraphSize | ParagraphSizeDeprecated;
     children: React.ReactNode;
 }
 export declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/_types/atoms/Popover/Popover.d.ts

@@ -77,7 +77,11 @@ export interface PopoverProps {
      * Pásalo solo para llevar la capa a otro sitio: gana siempre.
      */
     container?: HTMLElement | null;
-    /** Clase adicional para el panel. */
+    /**
+     * 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/atoms/ProgressBar/ProgressBar.d.ts

@@ -8,13 +8,21 @@ export interface ProgressBarMessages {
     /** Nombre accesible de la barra cuando la pantalla no dice qué avanza. */
     label: string;
 }
-export type ProgressBarVariant = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2';
+/** Color del relleno. */
+export type ProgressBarTone = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2';
+/** @deprecated Usa `ProgressBarTone`: la prop de color se llama `tone` desde la v51. Se retira en la v52. */
+export type ProgressBarVariant = ProgressBarTone;
 export type ProgressBarSize = 'sm' | 'md' | 'lg';
 export interface ProgressBarProps {
     /** Porcentaje completado (0–100). Se acota al rango y se redondea al entero más cercano. */
     value: number;
-    /** Variante de color del relleno. */
-    variant?: ProgressBarVariant;
+    /** Color del relleno. Default `'primary'`. */
+    tone?: ProgressBarTone;
+    /**
+     * @deprecated Usa `tone`. Sigue funcionando, con un aviso en desarrollo,
+     * hasta la v52.
+     */
+    variant?: ProgressBarTone;
     /** Talla de la barra. En `sm` no se muestra la cifra. */
     size?: ProgressBarSize;
     /**
@@ -26,4 +34,4 @@ export interface ProgressBarProps {
     /** Clases adicionales para el contenedor. */
     className?: string;
 }
-export declare function ProgressBar({ value, variant, size, label, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ value, tone: toneProp, variant, size, label, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/Sparkline/Sparkline.d.ts

@@ -25,6 +25,8 @@ export interface SparklineProps extends Omit<React.ComponentPropsWithoutRef<'svg
      * decorativa —lo correcto dentro de un `StatTile`, donde la cifra y su
      * variación ya dicen lo que la chispa enseña—.
      */
+    '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;

package/dist/_types/atoms/StepMarker/StepMarker.d.ts

@@ -2,8 +2,13 @@ import { type IconName } from '../Icon/Icon';
 import './StepMarker.css';
 /** Estado del paso: decide si la marca va rellena o hueca y qué contenido lleva por defecto. */
 export type StepMarkerState = 'done' | 'current' | 'pending' | 'neutral';
-/** Color del relleno. Las mismas variantes que `NumberBadgeVariant`, mapeadas 1:1. */
-export type StepMarkerTone = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'danger' | 'success' | 'neutral';
+/** Color del relleno. Los mismos tonos que `NumberBadgeTone`, mapeados 1:1. */
+export type StepMarkerTone = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'error' | 'success' | 'neutral';
+/**
+ * @deprecated `danger` es `error` desde la v51 (el vocabulario de estado del
+ * sistema). Sigue funcionando, con un aviso en desarrollo, hasta la v52.
+ */
+export type StepMarkerToneDeprecated = 'danger';
 export type StepMarkerSize = 'sm' | 'md';
 export interface StepMarkerProps {
     /**
@@ -14,7 +19,7 @@ export interface StepMarkerProps {
      */
     state?: StepMarkerState;
     /** Color del relleno en los estados rellenos (`done`, `current`, `neutral`). Sin efecto en `pending`. Default `primary`. */
-    tone?: StepMarkerTone;
+    tone?: StepMarkerTone | StepMarkerToneDeprecated;
     /** Talla de la marca. Default `md` (32px, la de `Stepper`). */
     size?: StepMarkerSize;
     /** La cifra del paso. Se ignora si hay `icon` o si `state` es `done`. */
@@ -32,4 +37,4 @@ export interface StepMarkerProps {
  * Es puramente decorativa: `aria-hidden` siempre, porque la numeración
  * semántica la da el `<ol>` que la contiene, no la cifra pintada dentro.
  */
-export declare function StepMarker({ state, tone, size, count, icon, className }: StepMarkerProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepMarker({ state, tone: toneProp, size, count, icon, className }: StepMarkerProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/atoms/Tag/Tag.d.ts

@@ -1,7 +1,18 @@
 import './Tag.css';
-export type TagVariant = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'neutral' | 'info' | 'warning' | 'success' | 'danger';
+/** Color del tag: los de marca, `neutral` y los de feedback. */
+export type TagTone = 'primary' | 'accent-1' | 'accent-2' | 'support-1' | 'support-2' | 'neutral' | 'info' | 'warning' | 'success' | 'error';
+/**
+ * @deprecated Usa `TagTone`. La prop de color se llama `tone` desde la v51 y
+ * `danger` es `error` (el vocabulario de estado del sistema). Se retira en la v52.
+ */
+export type TagVariant = TagTone | 'danger';
 export interface TagProps extends React.ComponentPropsWithoutRef<'span'> {
-    /** Variante de color del tag. */
+    /** Color del 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;
 }
 /**

package/dist/_types/atoms/Text/Text.d.ts

@@ -1,4 +1,6 @@
 import './Text.css';
+/** Intención de un fragmento de texto en línea. */
+export type TextTone = 'default' | 'muted' | 'error' | 'destructive' | 'success';
 export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
     /**
      * Qué elemento se pinta, que es lo mismo que decir **qué significa**:
@@ -7,11 +9,15 @@ export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
      */
     as?: 'span' | 'em' | 'strong' | 'del' | 's';
     /**
-     * Intención del fragmento. `destructive` es la palabra que dice que algo se
-     * pierde («esta acción **borra** el curso»); `success`, la que dice que salió
-     * bien; `muted`, una aclaración secundaria.
+     * Intención del fragmento. Mismo vocabulario que el resto del sistema:
+     * `error` para un **estado** que ha fallado («el cupón no es válido»),
+     * `destructive` para el aviso de una **acción** que hace perder algo («esta
+     * acción **borra** el curso», en la descripción de un `ConfirmDialog`
+     * destructivo); `success`, la que dice que salió bien; `muted`, una
+     * aclaración secundaria. `error` y `destructive` se pintan con la misma
+     * tinta: lo que cambia es lo que dicen.
      */
-    tone?: 'default' | 'muted' | 'destructive' | 'success';
+    tone?: TextTone;
     /**
      * Tacha el fragmento con una línea y lo atenúa (tinta secundaria): lo que ya
      * está hecho, como un producto que ya está en el carrito. Es **solo
@@ -40,7 +46,7 @@ export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
  *   producto.
  * - **Tachado** (`strikethrough`, o `as="del"`/`as="s"`): lo hecho o lo que ya
  *   no vale, en tinta atenuada.
- * - **Intención** (`tone`): énfasis con carga —destructiva o de logro— en tinta
+ * - **Intención** (`tone`): énfasis con carga —de error, destructiva o de logro— en tinta
  *   de feedback. Es color de texto sobre la superficie, **nunca un relleno**:
  *   una palabra resaltada dentro de un párrafo no lleva fondo.
  *

package/dist/_types/atoms/TimeSelect/TimeSelect.d.ts

@@ -38,7 +38,12 @@ export interface TimeSelectProps {
     id?: string;
     /** Nombre del campo en el formulario: se monta un input oculto con `HH:MM`. */
     name?: string;
-    /** Campo obligatorio: se marca el grupo y los dos desplegables. */
+    /**
+     * Campo obligatorio: `required` en los dos desplegables, que es lo que
+     * valida el `<form>` y lo que les pone `aria-required` (un `combobox` sí lo
+     * admite). El grupo no lo lleva: ARIA 1.2 no admite `aria-required` en
+     * `role="group"` (D73).
+     */
     required?: boolean;
     /** Id de la etiqueta que nombra el grupo (lo pone el campo). */
     'aria-labelledby'?: string;

package/dist/_types/atoms/Toggle/Toggle.d.ts

@@ -22,6 +22,15 @@ export interface ToggleBaseProps extends Omit<BaseToggleProps, 'onPressedChange'
      * `aria-label` o `aria-labelledby`: no hay texto que nombre el control.
      */
     iconOnly?: boolean;
+    /**
+     * Con `disabled`, el botón sigue en el orden de tabulación: deja el
+     * `disabled` nativo, se anuncia con `aria-disabled="true"`, conserva la cara
+     * de apagado (`data-disabled`) y no conmuta. Mismo contrato que en `Button`;
+     * `Tooltip` lo activa solo en su disparador deshabilitado.
+     *
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
 }