@studiolxd/brand 49.28.0 → 51.0.0

package/dist/_shared/typingindicator.js

@@ -0,0 +1,32 @@
+import '../typingindicator.css';
+import { r as e } from "./brandmessagescontext.js";
+import { VisuallyHidden as t } from "../visually-hidden.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/stories/messages/es/typingIndicator.ts
+var i = { typing: (e) => `${e} está escribiendo…` };
+//#endregion
+//#region src/stories/atoms/TypingIndicator/TypingIndicator.tsx
+function a({ name: a, label: o, className: s }) {
+	let c = e("typingIndicator", i);
+	return /* @__PURE__ */ r("span", {
+		className: ["typing-indicator", s].filter(Boolean).join(" "),
+		role: "status",
+		children: [
+			/* @__PURE__ */ n("span", {
+				className: "typing-indicator__dot",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "typing-indicator__dot",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "typing-indicator__dot",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n(t, { children: o ?? c("typing")(a) })
+		]
+	});
+}
+//#endregion
+export { a as t };

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/_shared/useasyncoptions.js

@@ -0,0 +1,30 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/stories/atoms/_shared/useAsyncOptions.ts
+function i(i, a) {
+	let [o, s] = r([]), [c, l] = r(!1), [u, d] = r(!1), f = n(null), p = n(0), m = e((e) => {
+		f.current && clearTimeout(f.current);
+		let t = ++p.current;
+		l(!0), d(!1), Promise.resolve().then(() => i(e)).then((e) => e, () => []).then((e) => {
+			t === p.current && (s(e), l(!1), d(!0));
+		});
+	}, [i]), h = e((e) => {
+		f.current && clearTimeout(f.current), a > 0 ? f.current = setTimeout(() => m(e), a) : m(e);
+	}, [a, m]), g = e(() => {
+		f.current && clearTimeout(f.current), p.current += 1, l(!1);
+	}, []), _ = e(() => {
+		s([]), d(!1);
+	}, []);
+	return t(() => () => {
+		p.current += 1, f.current && clearTimeout(f.current);
+	}, []), {
+		results: o,
+		loading: c,
+		hasSearched: u,
+		search: m,
+		schedule: h,
+		cancel: g,
+		clear: _
+	};
+}
+//#endregion
+export { i as t };

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

@@ -45,9 +45,15 @@ export interface AccordionTriggerProps {
     className?: string;
     /** Tamaño del chevron indicador. */
     chevronSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Nivel del encabezado que envuelve el botón (default `3`). Bájalo o súbelo
+     * para que el acordeón encaje en el esquema de la página: tras un `<h1>` sin
+     * `<h2>` de por medio, un `<h3>` se salta un nivel.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     children: ReactNode;
 }
-export declare function AccordionTrigger({ className, chevronSize, children }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionTrigger({ className, chevronSize, headingLevel, children }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
 export interface AccordionContentProps {
     className?: string;
     children: ReactNode;

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

@@ -1,4 +1,4 @@
-import { Popover as BasePopover } from '@base-ui/react/popover';
+import { Combobox } from '@base-ui/react/combobox';
 import './AsyncMultiSelect.css';
 export interface AsyncMultiSelectOption {
     value: string;
@@ -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
@@ -98,10 +103,14 @@ export interface AsyncMultiSelectProps {
      * solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
      * cajón de un shell propio. Gana siempre.
      */
-    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+    container?: React.ComponentPropsWithoutRef<typeof Combobox.Portal>['container'];
 }
 /**
- * Búsqueda con resultados asíncronos y varios valores. El `ref` va al
- * `<input>` de búsqueda, que es lo que se enfoca.
+ * Búsqueda con resultados asíncronos y varios valores, sobre el `Combobox`
+ * múltiple de Base UI: el teclado (flechas, Intro para marcar y desmarcar,
+ * Retroceso para quitar la última ficha, flechas laterales para recorrerlas),
+ * el foco virtual, los anuncios y el cierre son suyos. El componente decide qué
+ * opciones hay (carga con rebote, `useAsyncOptions`) y qué etiqueta lleva cada
+ * ficha. El `ref` va al `<input>` de búsqueda, que es lo que se enfoca.
  */
 export declare const AsyncMultiSelect: import("react").ForwardRefExoticComponent<AsyncMultiSelectProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,4 +1,4 @@
-import { Popover as BasePopover } from '@base-ui/react/popover';
+import { Combobox } from '@base-ui/react/combobox';
 import './AsyncSelect.css';
 export interface AsyncSelectOption {
     value: string;
@@ -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
@@ -87,10 +92,14 @@ export interface AsyncSelectProps {
      * solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
      * cajón de un shell propio. Gana siempre.
      */
-    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+    container?: React.ComponentPropsWithoutRef<typeof Combobox.Portal>['container'];
 }
 /**
- * Búsqueda con resultados asíncronos y un solo valor. El `ref` va al `<input>`
- * de búsqueda, que es lo que se enfoca.
+ * Búsqueda con resultados asíncronos y un solo valor, sobre el `Combobox` de
+ * Base UI: el teclado, el foco virtual (`aria-activedescendant`), los anuncios
+ * y el cierre son suyos. El componente decide qué opciones hay (carga con
+ * rebote, `useAsyncOptions`) y qué texto enseña el campo: abierto, lo que se
+ * escribe; cerrado, la etiqueta de lo elegido. El `ref` va al `<input>` de
+ * búsqueda, que es lo que se enfoca.
  */
 export declare const AsyncSelect: import("react").ForwardRefExoticComponent<AsyncSelectProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,4 +1,4 @@
-import { Popover as BasePopover } from '@base-ui/react/popover';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
 import './Autocomplete.css';
 export interface AutocompleteOption {
     /** Identifica la sugerencia: es lo que recibe `onSelect` para saber cuál se eligió. */
@@ -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
@@ -72,12 +77,16 @@ export interface AutocompleteProps {
      * `Portal.container`). Mismo contrato que `AsyncSelect`: por defecto, el nodo
      * de la superficie que llegue por contexto, o `document.body`.
      */
-    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+    container?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Portal>['container'];
 }
 /**
- * Campo de texto con sugerencias. A diferencia de `AsyncSelect`, **no obliga a
- * elegir**: el valor es el texto escrito y una sugerencia es solo una forma de
- * escribirlo más deprisa. Patrón ARIA de combobox con lista (`aria-activedescendant`):
- * el foco no sale nunca del `<input>`. El `ref` va a ese `<input>`.
+ * Campo de texto con sugerencias, sobre el `Autocomplete` de Base UI. A
+ * diferencia de `AsyncSelect`, **no obliga a elegir**: el valor es el texto
+ * escrito y una sugerencia es solo una forma de escribirlo más deprisa. El
+ * teclado, el foco virtual (`aria-activedescendant`: el foco no sale nunca del
+ * `<input>`), los anuncios y el cierre son de Base UI; el componente decide qué
+ * sugerencias hay —filtrando `options` o pidiéndolas a `onSearch` con rebote
+ * (`useAsyncOptions`)— y cuándo merece la pena abrir la lista. El `ref` va al
+ * `<input>`.
  */
 export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,14 +1,33 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './CloseButton.css';
+/**
+ * El único texto del aspa suelta, y es **cromo**: «Cerrar». Los componentes
+ * que la montan (`Modal`, `Sheet`, `Alert`, `Banner`, `Toaster`,
+ * `FloatingDock`) le pasan siempre el suyo, de su propio espacio; esta clave
+ * solo se lee cuando alguien usa el aspa por su cuenta sin `label`.
+ */
+export interface CloseButtonMessages {
+    /** Nombre accesible del aspa. */
+    label: string;
+}
 export interface CloseButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {
     /**
-     * Nombre accesible del aspa. Default: «Cerrar» (castellano). Dice **qué**
-     * cierra o quita, no qué forma tiene: «Cerrar», «Descartar aviso»,
-     * «Quitar a Ana». Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible del aspa. Dice **qué** cierra o quita, no qué forma
+     * tiene: «Cerrar», «Descartar aviso», «Quitar a Ana». **Sin default**: sin
+     * él, sale de `closeButton.label` del `BrandMessagesProvider`.
      */
     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';
-type HeadingSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 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,6 +57,13 @@ 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).
+     * **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;
 }
 /**
  * Campo de teléfono con selector de país. El `ref` va al `<input>` real del

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

@@ -1,4 +1,4 @@
-import { Popover as BasePopover } from '@base-ui/react/popover';
+import { Select as BaseSelect } from '@base-ui/react/select';
 import './MultiSelect.css';
 /**
  * Los dos textos que el control emite por su cuenta: el marcador de sitio sin
@@ -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
@@ -63,16 +73,17 @@ export interface MultiSelectProps {
      * solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
      * cajón de un shell propio. Gana siempre.
      */
-    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+    container?: React.ComponentPropsWithoutRef<typeof BaseSelect.Portal>['container'];
 }
 /**
- * Selección múltiple. El `ref` va al elemento con `role="combobox"`, que es lo
- * enfocable, para que react-hook-form pueda enfocarlo al fallar la validación.
- *
- * Teclado del patrón combobox (el mismo que `AsyncSelect`): flechas abren y
- * recorren, Inicio/Fin saltan a los extremos, Intro/Espacio marcan y desmarcan,
- * Escape cierra y escribir una letra salta a la opción que empieza por ella. El
- * foco del DOM no se mueve nunca de la caja: la opción activa se señala con
- * `aria-activedescendant`.
+ * Selección múltiple sin campo de texto, sobre el `Select` múltiple de Base UI
+ * (no sobre su `Combobox`: sin `<input>`, la guía de Base UI manda al
+ * `Select`). El teclado es suyo: flechas, Intro y Espacio abren; dentro de la
+ * lista las flechas y Inicio/Fin recorren, Intro y Espacio marcan y desmarcan,
+ * escribir salta a la opción que empieza por lo tecleado y Escape cierra y
+ * devuelve el foco a la caja. La lista **sí recibe el foco** (es una lista de
+ * Base UI, no un foco virtual). El `ref` va al elemento con `role="combobox"`,
+ * que es lo enfocable, para que react-hook-form pueda enfocarlo al fallar la
+ * validación.
  */
 export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLDivElement>>;

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;