@studiolxd/brand 49.3.1 → 49.5.0

package/CHANGELOG.md

@@ -7,6 +7,107 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.5.0] — 2026-09-18
+
+> **Minor.** La cuenta se lee en dos líneas: el ítem de menú acepta una segunda línea bajo la
+> etiqueta, y la cabecera del menú de cuenta enseña la foto de la cuenta activa.
+
+### `MenuItem description` — el ítem de dos líneas
+
+Un ítem de menú solo sabía decir una cosa: icono y una línea. El selector de varias cuentas del
+shell tenía que apretar ahí nombre y correo —«Ana García · ana@…»— con el avatar haciendo de
+icono, que es justo la información que se lee peor cuando hay tres cuentas parecidas.
+
+`description` (opcional, en los ítems `button` y `link`) pinta esa segunda línea debajo de la
+etiqueta, más tenue, y centra el icono —el avatar— contra el bloque de las dos. Cada línea se
+recorta con puntos suspensivos, así que un correo largo no ensancha el panel. Es **aditivo**: sin
+`description` el ítem sale con el marcado de siempre —ni envoltorio de texto ni segunda línea—, y
+los menús de una línea que ya existen no cambian ni un píxel.
+
+No hay tokens nuevos. La segunda línea toma la letra y la tinta del rótulo de sección
+(`menu.label-font-size`, `menu.label-color`), que es el papel que ya cumplen en este menú, y bajo
+el puntero o el teclado va con la tinta del ítem resaltado en vez de con la suya, para no quedarse
+gris sobre el relleno de marca. Las clases son `menu__item-icon`, `-text`, `-label` y
+`-description`; el `UserMenu` las tiene con su prefijo y su propia tinta (la del correo de la
+cabecera), para que una lista de cuentas dentro de ese panel se lea igual.
+
+### `UserMenu` — la cabecera enseña a quién pertenece la cuenta
+
+La cabecera del panel decía el nombre y el correo, pero no enseñaba la foto: el avatar solo
+estaba en el disparador, y al abrir el menú desaparecía justo cuando hace falta confirmar en qué
+cuenta estás. Ahora la cabecera es una fila: el `Avatar` de siempre a la izquierda (foto o, sin
+`avatarUrl`, las iniciales) y, al lado, nombre y correo en columna. Decorativo (`alt=""`), porque
+el nombre va escrito al lado. El aire entre foto y texto es el mismo que en el disparador
+(`user-menu.trigger-gap`): es la misma pareja. Sin tokens nuevos.
+
+## [49.4.0] — 2026-09-17
+
+> **Minor.** Cuatro huecos que dejó al descubierto la campaña de crudos de bricks: un bocadillo
+> sobre un control apagado, la ranura de acciones de una tarjeta-enlace, dónde aterriza lo que
+> calcula un motor de arrastre, y el HTML que no viene de React.
+
+### `Tooltip disabledTrigger` — el motivo de un control deshabilitado
+
+Un control apagado es el que más necesita explicarse, y es justo el que no puede: un
+`button[disabled]` no recibe eventos de puntero ni foco, así que no dispara nada. Con
+`disabledTrigger`, el bocadillo se dispara desde un envoltorio focusable
+(`span.tooltip__trigger`, `tabIndex={0}`) que pone el propio componente, y el CSS apaga los
+eventos de puntero del hijo deshabilitado para que el hover **sobre el botón** llegue al
+envoltorio. Eso segundo es lo que falta siempre que esto se monta a mano —el `<span tabIndex={0}>`
+casero abre con el teclado pero no con el ratón—, y era el caso de `design-matrix-studio` en
+bricks. El control sigue deshabilitado de verdad; lo único que cambia es quién dispara.
+
+Se descartó la otra forma, un `Button disabledReason`: ataría el átomo más usado del sistema a
+`Tooltip` y a su proveedor, lo obligaría a ser componente de cliente en apps que hoy lo pintan
+desde el servidor, y no serviría para un `Select` o un `Switcher` apagados.
+
+### `Card linkOverlay` y `CardAction isolate` — la tarjeta que navega y lleva acciones
+
+Envolver una tarjeta con menú en el `<a>` del router mete un `<button>` dentro de un `<a>`: no es
+HTML válido, y el lector de pantalla lee un enlace cuyo nombre se traga el título, el estado, el
+pie y la etiqueta del menú. La forma del sistema es `Card linkOverlay`: la tarjeta es contenedora,
+el enlace es el del **título** y estira su área de pulsación a todo el bloque con una capa vacía;
+la ranura de acciones sube por encima y se pulsa sola.
+
+Y para lo que ya existe —una tarjeta envuelta en un enlace, una fila pulsable—, `CardAction`
+**aísla su ranura por defecto** (`isolate`): detiene la propagación y, **solo cuando cuelga de un
+enlace y solo para lo que se pulsa dentro de ella**, cancela la acción por defecto. Las dos cosas
+hacen falta: detener la propagación no cancela la navegación, y acotar el `preventDefault` es lo
+que evita romper un `type="submit"` de una tarjeta contenedora o el ítem de un `Menu`, que se
+pinta en un portal fuera del enlace.
+
+### `Sortable` — dónde aterriza lo que calcula un motor de arrastre
+
+El sistema no trae motor de arrastre y no va a traerlo. Lo que faltaba era dónde deja el motor lo
+que calcula en cada fotograma, porque la respuesta de manual —`style={{ transform: CSS.Transform
+.toString(transform) }}`— es justo lo que el sistema no puede emitir: una app con `style-src
+'self'` descarta el atributo `style` sin dejar ni una violación en consola.
+
+`Sortable` recibe el desplazamiento como **dato** (`transform`, con la forma que devuelven dnd-kit
+y compañía, para pasársela tal cual), lo escribe por el **CSSOM** en `--sortable-x`/`-y` y las dos
+escalas, y publica el estado como atributo (`data-dragging`). El `transform` y la atenuación del
+original (`--opacity-disabled`, sin token nuevo: el original queda fuera de juego) viven en la
+hoja del sistema. Reenvía `ref`, que es lo que el motor necesita para registrar el nodo, y anula
+la transición con `prefers-reduced-motion` —la dicta el motor en una cadena suya, así que no pasa
+por los tokens de duración—.
+
+### `Prose html` — el HTML que no viene de React
+
+`Prose` existía para vestir la semántica cruda de un documento, pero solo aceptaba `children`, así
+que el HTML de un parser de `.docx`/`.pdf` acababa en un `dangerouslySetInnerHTML` sobre un
+`<div>` desnudo —nueve sitios en una sola pantalla de bricks—, fuera de la escala, del ritmo y de
+la medida de lectura. Ahora entra por `html`, **excluyente con `children` por tipo**. El DS **no
+sanea**: la cadena llega ya limpia del consumidor, y por eso la prop es `string` y no un
+`ReactNode`. Se descartó una pieza aparte (`RawHtml`) dentro de `Prose`: obligaría a escribir dos
+componentes para una sola cosa y dejaría el HTML suelto sin vestir cuando se olvidara el de fuera.
+
+### Además
+
+- Norma en Foundations › Opacidad: el original de un arrastre usa `--opacity-disabled`, que es el
+  mismo estado de «fuera de juego» del rol — no es un valor nuevo.
+- `src/index.ts`, `scripts/entry-points.mjs` y `package.json#exports` registran `Sortable`
+  (componente de cliente).
+
 ## [49.3.1] — 2026-09-17
 
 > **Patch.** La v49.0.1 estrechó a `:where(.link)` el `inline-size: fit-content` que evita

package/dist/_shared/dropdownitems.js

@@ -7,11 +7,22 @@ function i({ children: e, ...n }) {
 		children: e
 	});
 }
-function a(r, i) {
+function a(r, i, a, o) {
+	let s = a && o ? /* @__PURE__ */ n("span", {
+		className: `${o}__item-text`,
+		children: [/* @__PURE__ */ t("span", {
+			className: `${o}__item-label`,
+			children: r
+		}), /* @__PURE__ */ t("span", {
+			className: `${o}__item-description`,
+			children: a
+		})]
+	}) : r;
 	return i ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
 		"aria-hidden": "true",
+		className: o ? `${o}__item-icon` : void 0,
 		children: i
-	}), r] }) : /* @__PURE__ */ t(e, { children: r });
+	}), s] }) : /* @__PURE__ */ t(e, { children: s });
 }
 function o(e) {
 	return e.reduce((e, t) => {
@@ -22,8 +33,8 @@ function o(e) {
 		}), e;
 	}, []);
 }
-function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, radioValue: l, onRadioValueChange: u }) {
-	let d = (e, o) => {
+function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, blockClass: l, radioValue: u, onRadioValueChange: d }) {
+	let f = (e, o) => {
 		if (e.type === "separator") return /* @__PURE__ */ t(r.Separator, { className: i }, o);
 		if (e.type === "label") return c ? /* @__PURE__ */ t(r.Group, { children: /* @__PURE__ */ t(r.GroupLabel, {
 			className: c,
@@ -34,20 +45,20 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 			value: e.value,
 			disabled: e.disabled,
 			closeOnClick: e.closeOnSelect !== !1,
-			children: a(e.label, e.icon)
+			children: a(e.label, e.icon, void 0, l)
 		}, o);
-		let l = a(e.label, e.icon);
+		let u = a(e.label, e.icon, e.description, l);
 		return e.type === "link" ? e.disabled ? /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			disabled: !0,
-			children: l
+			children: u
 		}, o) : /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			render: (t) => s({
 				...t,
 				href: e.href,
 				className: t.className ?? n(e.destructive),
-				children: l
+				children: u
 			})
 		}, o) : /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
@@ -60,18 +71,18 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 				}
 				setTimeout(() => e.onClick(), 0);
 			},
-			children: l
+			children: u
 		}, o);
-	}, f = e;
-	if (!f.some((e) => e.type === "radio")) return f.map(d);
-	let p = 0;
-	return o(f).map((e, n) => {
-		let i = p;
-		p += e.items.length;
-		let a = e.items.map((e, t) => d(e, i + t));
+	}, p = e;
+	if (!p.some((e) => e.type === "radio")) return p.map(f);
+	let m = 0;
+	return o(p).map((e, n) => {
+		let i = m;
+		m += e.items.length;
+		let a = e.items.map((e, t) => f(e, i + t));
 		return e.radio ? /* @__PURE__ */ t(r.RadioGroup, {
-			value: l,
-			onValueChange: (e) => u?.(String(e)),
+			value: u,
+			onValueChange: (e) => d?.(String(e)),
 			children: a
 		}, `radio-${n}`) : a;
 	});

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

@@ -0,0 +1,66 @@
+import './Sortable.css';
+/** Elementos con los que puede montarse el envoltorio ordenable. */
+export type SortableElement = 'div' | 'li';
+/**
+ * Desplazamiento que la biblioteca de arrastre calcula en cada fotograma, en
+ * píxeles. Es la forma que devuelven los motores de arrastre al uso (dnd-kit
+ * entre ellos), así que se les pasa tal cual: el DS no depende de ninguno.
+ */
+export interface SortableTransform {
+    x: number;
+    y: number;
+    scaleX?: number;
+    scaleY?: number;
+}
+export interface SortableProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'style'> {
+    /** Elemento del envoltorio. `div` por defecto; `li` dentro de una lista. */
+    as?: SortableElement;
+    /**
+     * Desplazamiento del elemento mientras se reordena la lista, tal y como lo
+     * devuelve el motor de arrastre. `null` (o ausente) es la posición de
+     * reposo. Se escribe por el CSSOM en `--sortable-x`/`--sortable-y` (y las
+     * dos escalas), que es lo que consume el `transform` de la hoja.
+     */
+    transform?: SortableTransform | null;
+    /**
+     * Transición que acompaña al desplazamiento, la que dicte el motor (`transform
+     * 200ms ease`). `null` o ausente: sin transición. Con
+     * `prefers-reduced-motion` la hoja la anula.
+     */
+    transition?: string | null;
+    /**
+     * El elemento es el que se está arrastrando ahora mismo. Pone
+     * `data-dragging` —de donde cuelga el CSS— y atenúa el original, que se
+     * queda como hueco mientras la copia viaja con el puntero.
+     */
+    dragging?: boolean;
+}
+/**
+ * Envoltorio de un elemento **ordenable por arrastre**.
+ *
+ * El sistema no trae motor de arrastre y no va a traerlo: quien lo pone es la
+ * aplicación (dnd-kit, en la suite). Lo que faltaba era dónde aterriza lo que
+ * ese motor calcula en tiempo de ejecución, porque la respuesta evidente —un
+ * `style` inline con el `transform`— es justo lo que el sistema no puede
+ * emitir: una app servida con `style-src 'self'` descarta el atributo `style`
+ * sin dejar ni una violación en consola, y el arrastre se queda quieto sin
+ * que nadie sepa por qué.
+ *
+ * `Sortable` es ese aterrizaje: recibe el desplazamiento como **dato**, lo
+ * escribe por el CSSOM (que la CSP sí permite) en las variables que consume su
+ * hoja, y publica el estado como atributo (`data-dragging`). El aspecto —qué
+ * `transform` se aplica, cuánto se atenúa el original— vive en el CSS del
+ * sistema, no en la app.
+ *
+ * Reenvía `ref`: es lo que necesita el motor para medir y registrar el nodo
+ * (`setNodeRef` de dnd-kit).
+ *
+ * ```tsx
+ * const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+ *
+ * <Sortable ref={setNodeRef} transform={transform} transition={transition} dragging={isDragging}>
+ *   <Card>…</Card>
+ * </Sortable>
+ * ```
+ */
+export declare const Sortable: import("react").ForwardRefExoticComponent<SortableProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -41,6 +41,23 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
      * @default true
      */
     describe?: boolean;
+    /**
+     * El disparador está **deshabilitado** y el bocadillo es justo lo que
+     * explica por qué. Un `button[disabled]` no sirve de disparador: el
+     * navegador no le manda eventos de puntero ni lo deja recibir foco, así que
+     * el bocadillo no se abre ni con el ratón ni con el teclado — y quien no
+     * puede pulsar es precisamente quien necesita leer el motivo.
+     *
+     * Con `disabledTrigger` el bocadillo se dispara desde un envoltorio
+     * focusable (`span.tooltip__trigger`, `tabIndex={0}`) que pone el propio
+     * componente: es él quien recibe hover, foco y el `aria-describedby`,
+     * mientras el control de dentro sigue deshabilitado de verdad. El CSS
+     * apaga los eventos de puntero del hijo deshabilitado para que el hover
+     * sobre el botón llegue al envoltorio en vez de perderse.
+     *
+     * @default false
+     */
+    disabledTrigger?: boolean;
     /**
      * Nodo DOM donde montar el portal. Por defecto, el nodo de la superficie que
      * llegue por contexto —`SiteShell` publica el suyo, para que la capa herede

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

@@ -67,6 +67,23 @@ export interface CardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
     color?: CardColor;
     /** Maqueta de la tarjeta. Default: `'default'`. */
     variant?: CardVariant;
+    /**
+     * Modo contenedor: el enlace del **título** cubre toda la tarjeta. La
+     * tarjeta sigue siendo un `<div>` con contenido interactivo dentro —un menú
+     * en `CardAction`, un botón en el pie—, y quien navega es el `<a>` del
+     * título, que estira su área de pulsación a todo el bloque con una capa
+     * vacía (`::after`).
+     *
+     * Es la forma correcta de una «tarjeta que es enlace **y** lleva acciones»:
+     * meter un `<button>` dentro de un `<a>` —envolviendo la tarjeta en el
+     * `Link` del router— no es HTML válido, y un lector de pantalla anuncia un
+     * enlace cuyo nombre se come el título, el estado, el pie y la etiqueta del
+     * menú de una sentada. Con `linkOverlay` cada control conserva su papel: un
+     * enlace con el nombre del título, y un botón de menú aparte.
+     *
+     * La ranura de acciones queda por encima de la capa, así que se pulsa sola.
+     */
+    linkOverlay?: boolean;
     /**
      * Modo contenedor: la tarjeta entera es la opción de un grupo. Dentro va
      * un `RadioField` (o `CheckboxField`) del DS, que la tarjeta extiende a todo
@@ -136,8 +153,38 @@ export interface CardDescriptionProps extends Omit<ParagraphProps, 'children'> {
  * hereda el cuerpo de la superficie en la que viva la tarjeta.
  */
 export declare const CardDescription: import("react").ForwardRefExoticComponent<CardDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-/** Acción alineada al extremo de la cabecera (menú, botón…). */
-export declare const CardAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface CardActionProps extends CardPartProps {
+    /**
+     * La ranura **aísla sus eventos** de la tarjeta que la contiene, que es lo
+     * que se quiere siempre que la tarjeta sea a la vez un enlace (`Card href`,
+     * `Card render`, o un `<Link>` del router envolviéndola): pulsar el menú de
+     * la cabecera abre el menú, no navega.
+     *
+     * Hace dos cosas, y las dos hacen falta:
+     *
+     * - `stopPropagation`, para que el clic no llegue a un manejador que la
+     *   tarjeta o la fila tengan puesto más arriba;
+     * - `preventDefault` **solo cuando la ranura cuelga de un enlace** —se
+     *   comprueba en el DOM, buscando un `a[href]` por encima del propio nodo—
+     *   y **solo para lo que se pulsa dentro de ella**. Sin esto no basta:
+     *   detener la propagación no cancela la acción por defecto del navegador,
+     *   que sigue el enlace igual. Y acotarlo evita romper lo que sí depende de
+     *   su acción por defecto: un `type="submit"` dentro de una tarjeta
+     *   contenedora, o el ítem de un `Menu` que se pinta en un portal fuera del
+     *   enlace.
+     *
+     * `false` para la tarjeta que quiere lo contrario: que pulsar la acción
+     * cuente también como pulsar la tarjeta.
+     *
+     * @default true
+     */
+    isolate?: boolean;
+}
+/**
+ * Acción alineada al extremo de la cabecera (menú, botón…). Por defecto aísla
+ * sus eventos de la tarjeta-enlace que la contiene: ver `isolate`.
+ */
+export declare const CardAction: import("react").ForwardRefExoticComponent<CardActionProps & import("react").RefAttributes<HTMLDivElement>>;
 /** Cuerpo de la tarjeta. */
 export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface CardFooterProps extends CardPartProps {

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

@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import './Prose.css';
 /** Elementos con los que puede montarse el contenedor de texto largo. */
 export type ProseElement = 'div' | 'article' | 'section' | 'main' | 'aside';
-export interface ProseProps extends ComponentPropsWithoutRef<'div'> {
+interface ProseBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> {
     /**
      * Elemento del contenedor. `div` por defecto; `article` cuando el bloque es
      * el documento en sí (una página de documentación, un texto legal).
@@ -16,8 +16,32 @@ export interface ProseProps extends ComponentPropsWithoutRef<'div'> {
      * anchas o figuras a sangre.
      */
     measure?: boolean;
-    children: ReactNode;
 }
+export type ProseProps = (ProseBaseProps & {
+    /** Contenido en nodos de React. Excluyente con `html`. */
+    children: ReactNode;
+    html?: never;
+}) | (ProseBaseProps & {
+    /**
+     * Cadena de **HTML ya saneado**, para el contenido que no viene de React: lo
+     * que devuelve un parser de `.docx`/`.pdf`, un campo de un CMS, un markdown ya
+     * compilado. Excluyente con `children`.
+     *
+     * Es la misma excepción que ya justifica a `Prose` —el contenido no trae
+     * clases porque no lo escribió nadie del sistema— llevada a su forma real: sin
+     * esta prop, cada aplicación acababa poniendo su propio
+     * `dangerouslySetInnerHTML` en un `<div>` desnudo, fuera de la hoja del
+     * sistema, y ese texto salía sin escala, sin ritmo y sin medida de lectura.
+     *
+     * **El sistema no sanea.** No lleva sanitizador ni va a llevarlo: la política
+     * de lo que se permite depende de la aplicación y de dónde venga el HTML. Lo
+     * que llega aquí tiene que venir ya limpio del consumidor (`sanitize-html`,
+     * DOMPurify, lo que use), y por eso la prop se declara `string` y no un
+     * `ReactNode`: es una frontera, y se cruza a conciencia.
+     */
+    html: string;
+    children?: never;
+});
 /**
  * Contenedor de contenido largo: viste la semántica cruda que sale de un
  * markdown o de un CMS (`h2`–`h6`, `p`, `ul`/`ol`, `blockquote`, `pre`/`code`,
@@ -30,7 +54,11 @@ export interface ProseProps extends ComponentPropsWithoutRef<'div'> {
  * siendo de componentes (el único otro caso, mucho menor, es el `<mark>` del
  * extracto de `DocsSearch`).
  *
+ * El contenido entra de una de dos formas, **nunca de las dos**: `children`
+ * (nodos de React) o `html` (una cadena ya saneada). Ver la prop `html`.
+ *
  * Reenvía el resto de props del elemento (`data-*`, `aria-*`, `id`…) y
  * concatena `className` tras las clases propias.
  */
 export declare const Prose: import("react").ForwardRefExoticComponent<ProseProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -2,6 +2,13 @@ import type { ReactNode } from 'react';
 export type MenuButtonItem = {
     type: 'button';
     label: string;
+    /**
+     * Segunda línea del ítem, más tenue: el correo de una cuenta, el detalle de
+     * una acción. Con ella el ítem se pinta a dos líneas —`label` arriba,
+     * `description` debajo— y el icono se alinea al bloque entero. Sin ella, el
+     * ítem se pinta a una línea, exactamente igual que siempre.
+     */
+    description?: string;
     icon?: ReactNode;
     onClick: () => void;
     disabled?: boolean;
@@ -16,6 +23,8 @@ export type MenuButtonItem = {
 export type MenuLinkItem = {
     type: 'link';
     label: string;
+    /** Segunda línea del ítem, más tenue. Igual que en el ítem `button`. */
+    description?: string;
     icon?: ReactNode;
     href: string;
     disabled?: boolean;
@@ -63,9 +72,17 @@ interface RenderDropdownItemsOptions {
     renderLink: (props: MenuRenderLinkProps) => ReactNode;
     /** Clase del rótulo de sección (ítems `label`). Sin ella, no se renderizan. */
     labelClass?: string;
+    /**
+     * Bloque BEM del menú que renderiza (`menu`, `user-menu`…): de él salen las
+     * clases del icono y de las dos líneas del ítem (`<bloque>__item-icon`,
+     * `-text`, `-label`, `-description`). Sin él, el ítem se pinta como siempre
+     * —una línea y el icono sin clase— y `description` se ignora: un menú que no
+     * viste la segunda línea no la dibuja a medias.
+     */
+    blockClass?: string;
     /** Valor activo del grupo de radio. */
     radioValue?: string;
     onRadioValueChange?: (value: string) => void;
 }
-export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
+export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, blockClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
 export {};

package/dist/app-shell.js

@@ -2,8 +2,8 @@
 import './app-shell.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { SkipLink as t } from "./skip-link.js";
-import { TooltipProvider as n } from "./tooltip.js";
-import { t as r } from "./_shared/css-properties.js";
+import { t as n } from "./_shared/css-properties.js";
+import { TooltipProvider as r } from "./tooltip.js";
 import { n as i, t as a } from "./_shared/appshellcontext.js";
 import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
@@ -49,10 +49,10 @@ function m({ header: i, sidebar: f, children: m, defaultSidebar: h = "open", sid
 		j,
 		M,
 		S
-	]), F = r({ "--app-shell-sidebar-width": D ? `${D}px` : void 0 }), I = !S && T;
+	]), F = n({ "--app-shell-sidebar-width": D ? `${D}px` : void 0 }), I = !S && T;
 	return /* @__PURE__ */ u(a.Provider, {
 		value: P,
-		children: /* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(t, {
+		children: /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(t, {
 			href: "#main-content",
 			children: x("skipToContent", b)
 		}), /* @__PURE__ */ d("div", {

package/dist/card.css

@@ -1 +1 @@
-.card{box-shadow:none;color:inherit;padding-inline:var(--card-padding-inline);align-items:flex-start;gap:var(--card-gap);border-radius:var(--card-border-radius);flex-direction:column;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);text-decoration:none;display:flex}.card p:not(.paragraph){font-size:var(--card-description-font-size);margin-block-end:var(--card-description-margin-block-end)}.card .arrow{margin-block-start:auto}:where(button.card){appearance:none;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0}.card__footer.card__footer--column{flex-direction:column;align-items:stretch}.card.card--primary{background-color:var(--card-primary-bg);color:var(--card-primary-color);--text-list-color:var(--card-primary-color);--text-h1-color:var(--card-primary-color);--text-h2-color:var(--card-primary-color);--text-h3-color:var(--card-primary-color);--text-h4-color:var(--card-primary-color);--text-h5-color:var(--card-primary-color);--text-h6-color:var(--card-primary-color)}.card.card--outline{background-color:var(--card-outline-bg);color:var(--card-outline-color);border:var(--card-outline-border-width) solid var(--card-outline-border-color)}.card.card--accent-1{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);--text-list-color:var(--card-accent-1-color)}.card.card--accent-2{background-color:var(--card-accent-2-bg);color:var(--card-accent-2-color);--text-list-color:var(--card-accent-2-color)}.card.card--support-1{background-color:var(--card-support-1-bg);color:var(--card-support-1-color);--text-list-color:var(--card-support-1-color)}.card.card--support-2{background-color:var(--card-support-2-bg);color:var(--card-support-2-color);--text-list-color:var(--card-support-2-color)}.card.card--square,.card.card--split{gap:0;padding-block:0;padding-inline:0}.card__body{align-items:flex-start;gap:var(--card-gap);inline-size:100%;padding-inline:var(--card-padding-inline);flex-direction:column;flex:1;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);display:flex}.card__media img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card--square .card__media,.card--split .card__media{aspect-ratio:1;inline-size:100%}@media (width>=768px){.card.card--split{flex-direction:row;align-items:stretch}.card--split .card__media,.card--split .card__body{flex:50%;inline-size:50%}.card--split .card__media{aspect-ratio:auto}}.card__header,.card__content,.card__footer{inline-size:100%}.card__header{align-items:start;column-gap:var(--card-header-gap);row-gap:var(--card-header-row-gap);grid-template-columns:minmax(0,1fr) auto;display:grid}.card__header>*{grid-column:1}.card__header>.card__action{grid-area:1/2;justify-self:end}.card__title{font-weight:var(--card-title-font-weight);color:inherit;margin-block:0}.card__description{color:inherit;margin-block:0}.card__description--lines-1{min-block-size:1lh}.card__description--lines-2{min-block-size:2lh}.card__description--lines-3{min-block-size:3lh}.card__footer{align-items:stretch;gap:var(--card-footer-gap);flex-direction:column;margin-block-start:auto;display:flex}.card__footer>*{inline-size:100%}@media (width>=768px){.card__footer:not(.card__footer--column){flex-direction:row}.card__footer:not(.card__footer--column)>*{inline-size:auto}}.card.card--selectable{cursor:pointer;position:relative}.card--selectable .radio-field,.card--selectable .checkbox-field{margin:0;position:absolute;inset:0}.card--selectable .radio-field__control,.card--selectable .checkbox-field__control{opacity:0;cursor:pointer;position:absolute;inset:0}.card.card--selectable:has(input:focus-visible){outline:var(--card-selectable-focus-ring-width) solid var(--card-selectable-focus-ring-color);outline-offset:var(--card-selectable-focus-ring-offset)}.card.card--selectable.card--selected{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--selectable:has(input:checked){background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}
+.card{box-shadow:none;color:inherit;padding-inline:var(--card-padding-inline);align-items:flex-start;gap:var(--card-gap);border-radius:var(--card-border-radius);flex-direction:column;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);text-decoration:none;display:flex}.card p:not(.paragraph){font-size:var(--card-description-font-size);margin-block-end:var(--card-description-margin-block-end)}.card .arrow{margin-block-start:auto}:where(button.card){appearance:none;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0}.card__footer.card__footer--column{flex-direction:column;align-items:stretch}.card.card--primary{background-color:var(--card-primary-bg);color:var(--card-primary-color);--text-list-color:var(--card-primary-color);--text-h1-color:var(--card-primary-color);--text-h2-color:var(--card-primary-color);--text-h3-color:var(--card-primary-color);--text-h4-color:var(--card-primary-color);--text-h5-color:var(--card-primary-color);--text-h6-color:var(--card-primary-color)}.card.card--outline{background-color:var(--card-outline-bg);color:var(--card-outline-color);border:var(--card-outline-border-width) solid var(--card-outline-border-color)}.card.card--accent-1{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);--text-list-color:var(--card-accent-1-color)}.card.card--accent-2{background-color:var(--card-accent-2-bg);color:var(--card-accent-2-color);--text-list-color:var(--card-accent-2-color)}.card.card--support-1{background-color:var(--card-support-1-bg);color:var(--card-support-1-color);--text-list-color:var(--card-support-1-color)}.card.card--support-2{background-color:var(--card-support-2-bg);color:var(--card-support-2-color);--text-list-color:var(--card-support-2-color)}.card.card--square,.card.card--split{gap:0;padding-block:0;padding-inline:0}.card__body{align-items:flex-start;gap:var(--card-gap);inline-size:100%;padding-inline:var(--card-padding-inline);flex-direction:column;flex:1;padding-block-start:var(--card-padding-block-start);padding-block-end:var(--card-padding-block-end);display:flex}.card__media img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card--square .card__media,.card--split .card__media{aspect-ratio:1;inline-size:100%}@media (width>=768px){.card.card--split{flex-direction:row;align-items:stretch}.card--split .card__media,.card--split .card__body{flex:50%;inline-size:50%}.card--split .card__media{aspect-ratio:auto}}.card__header,.card__content,.card__footer{inline-size:100%}.card__header{align-items:start;column-gap:var(--card-header-gap);row-gap:var(--card-header-row-gap);grid-template-columns:minmax(0,1fr) auto;display:grid}.card__header>*{grid-column:1}.card__header>.card__action{grid-area:1/2;justify-self:end}.card__title{font-weight:var(--card-title-font-weight);color:inherit;margin-block:0}.card__description{color:inherit;margin-block:0}.card__description--lines-1{min-block-size:1lh}.card__description--lines-2{min-block-size:2lh}.card__description--lines-3{min-block-size:3lh}.card__footer{align-items:stretch;gap:var(--card-footer-gap);flex-direction:column;margin-block-start:auto;display:flex}.card__footer>*{inline-size:100%}@media (width>=768px){.card__footer:not(.card__footer--column){flex-direction:row}.card__footer:not(.card__footer--column)>*{inline-size:auto}}.card.card--selectable{cursor:pointer;position:relative}.card--selectable .radio-field,.card--selectable .checkbox-field{margin:0;position:absolute;inset:0}.card--selectable .radio-field__control,.card--selectable .checkbox-field__control{opacity:0;cursor:pointer;position:absolute;inset:0}.card.card--selectable:has(input:focus-visible){outline:var(--card-selectable-focus-ring-width) solid var(--card-selectable-focus-ring-color);outline-offset:var(--card-selectable-focus-ring-offset)}.card.card--selectable.card--selected{background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--selectable:has(input:checked){background-color:var(--card-accent-1-bg);color:var(--card-accent-1-color);border-color:var(--card-accent-1-bg);--text-list-color:var(--card-accent-1-color)}.card.card--link-overlay{position:relative}.card.card--link-overlay .card__title a:after{content:"";position:absolute;inset:0}.card.card--link-overlay .card__action{z-index:1;position:relative}

package/dist/card.js

@@ -4,80 +4,81 @@ import { VisuallyHidden as e } from "./visually-hidden.js";
 import { Arrow as t } from "./arrow.js";
 import { Heading as n } from "./heading.js";
 import { Paragraph as r } from "./paragraph.js";
-import { forwardRef as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useRender as c } from "@base-ui/react/use-render";
+import { forwardRef as i, useCallback as a, useRef as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRender as u } from "@base-ui/react/use-render";
 //#region src/stories/molecules/Card/Card.tsx
-var l = i(function({ href: r, render: i, external: l = !1, title: u, description: d, ctaLabel: f, color: p = "outline", variant: m = "default", media: h, selectable: g = !1, selected: _ = !1, className: v, children: y, ...b }, x) {
-	let S = [
+var d = i(function({ href: r, render: i, external: a = !1, title: o, description: d, ctaLabel: f, color: p = "outline", variant: m = "default", media: h, linkOverlay: g = !1, selectable: _ = !1, selected: v = !1, className: y, children: b, ...x }, S) {
+	let C = [
 		"card",
 		`card--${p}`,
 		m === "default" ? "" : `card--${m}`,
-		g ? "card--selectable" : "",
-		g && _ ? "card--selected" : "",
-		v ?? ""
-	].filter(Boolean).join(" "), C = /* @__PURE__ */ s(a, { children: [
-		u !== void 0 && /* @__PURE__ */ o(n, {
+		g ? "card--link-overlay" : "",
+		_ ? "card--selectable" : "",
+		_ && v ? "card--selected" : "",
+		y ?? ""
+	].filter(Boolean).join(" "), w = /* @__PURE__ */ l(s, { children: [
+		o !== void 0 && /* @__PURE__ */ c(n, {
 			level: 2,
 			size: 8,
-			children: u
+			children: o
 		}),
-		d && (typeof d == "string" ? /* @__PURE__ */ o("p", { children: d }) : d),
-		y,
-		f !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(e, { children: f }), /* @__PURE__ */ o(t, { size: "lg" })] })
-	] }), w = h && /* @__PURE__ */ o("div", {
+		d && (typeof d == "string" ? /* @__PURE__ */ c("p", { children: d }) : d),
+		b,
+		f !== void 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(e, { children: f }), /* @__PURE__ */ c(t, { size: "lg" })] })
+	] }), T = h && /* @__PURE__ */ c("div", {
 		className: "card__media",
-		children: /* @__PURE__ */ o("img", {
+		children: /* @__PURE__ */ c("img", {
 			src: h.src,
 			alt: h.alt
 		})
-	}), T = m === "default" && !h ? C : /* @__PURE__ */ s(a, { children: [w, /* @__PURE__ */ o("div", {
+	}), E = m === "default" && !h ? w : /* @__PURE__ */ l(s, { children: [T, /* @__PURE__ */ c("div", {
 		className: "card__body",
-		children: C
+		children: w
 	})] });
-	return c({
+	return u({
 		render: i,
-		ref: x,
+		ref: S,
 		enabled: i !== void 0,
 		props: {
-			className: S,
-			...b,
-			children: T
+			className: C,
+			...x,
+			children: E
 		}
-	}) || (r === void 0 ? /* @__PURE__ */ o("div", {
-		ref: x,
-		className: S,
-		...b,
-		children: y
-	}) : /* @__PURE__ */ o("a", {
-		ref: x,
+	}) || (r === void 0 ? /* @__PURE__ */ c("div", {
+		ref: S,
+		className: C,
+		...x,
+		children: b
+	}) : /* @__PURE__ */ c("a", {
+		ref: S,
 		href: r,
-		className: S,
-		...l ? {
+		className: C,
+		...a ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
 		} : {},
-		...b,
-		children: T
+		...x,
+		children: E
 	}));
-}), u = i(function({ className: e, ...t }, n) {
-	return /* @__PURE__ */ o("div", {
+}), f = i(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ c("div", {
 		ref: n,
 		className: ["card__header", e].filter(Boolean).join(" "),
 		...t
 	});
-}), d = i(function({ level: e = 3, size: t = 4, className: r, children: i, ...a }, s) {
-	return /* @__PURE__ */ o(n, {
-		ref: s,
+}), p = i(function({ level: e = 3, size: t = 4, className: r, children: i, ...a }, o) {
+	return /* @__PURE__ */ c(n, {
+		ref: o,
 		level: e,
 		size: t,
 		className: ["card__title", r].filter(Boolean).join(" "),
 		...a,
 		children: i
 	});
-}), f = i(function({ size: e = "small", lines: t, className: n, children: i, ...a }, s) {
-	return /* @__PURE__ */ o(r, {
-		ref: s,
+}), m = i(function({ size: e = "small", lines: t, className: n, children: i, ...a }, o) {
+	return /* @__PURE__ */ c(r, {
+		ref: o,
 		size: e,
 		className: [
 			"card__description",
@@ -87,20 +88,31 @@ var l = i(function({ href: r, render: i, external: l = !1, title: u, description
 		...a,
 		children: i
 	});
-}), p = i(function({ className: e, ...t }, n) {
-	return /* @__PURE__ */ o("div", {
-		ref: n,
-		className: ["card__action", e].filter(Boolean).join(" "),
-		...t
+}), h = i(function({ isolate: e = !0, className: t, onClick: n, ...r }, i) {
+	let s = o(null);
+	return /* @__PURE__ */ c("div", {
+		ref: a((e) => {
+			s.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+		}, [i]),
+		className: ["card__action", t].filter(Boolean).join(" "),
+		onClick: (t) => {
+			if (e) {
+				t.stopPropagation();
+				let e = s.current;
+				(e?.contains(t.target) ?? !1) && e?.parentElement?.closest("a[href], [role=\"link\"]") && t.preventDefault();
+			}
+			n?.(t);
+		},
+		...r
 	});
-}), m = i(function({ className: e, ...t }, n) {
-	return /* @__PURE__ */ o("div", {
+}), g = i(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ c("div", {
 		ref: n,
 		className: ["card__content", e].filter(Boolean).join(" "),
 		...t
 	});
-}), h = i(function({ direction: e = "row", className: t, ...n }, r) {
-	return /* @__PURE__ */ o("div", {
+}), _ = i(function({ direction: e = "row", className: t, ...n }, r) {
+	return /* @__PURE__ */ c("div", {
 		ref: r,
 		className: [
 			"card__footer",
@@ -111,4 +123,4 @@ var l = i(function({ href: r, render: i, external: l = !1, title: u, description
 	});
 });
 //#endregion
-export { l as Card, p as CardAction, m as CardContent, f as CardDescription, h as CardFooter, u as CardHeader, d as CardTitle };
+export { d as Card, h as CardAction, g as CardContent, m as CardDescription, _ as CardFooter, f as CardHeader, p as CardTitle };

package/dist/menu.css

@@ -1 +1 @@
-@keyframes menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.menu__content{box-sizing:border-box;background-color:var(--menu-bg);border-width:var(--menu-border-width);border-style:solid;border-color:var(--menu-border-color);border-radius:var(--menu-border-radius);box-shadow:var(--menu-shadow);padding-block:var(--menu-padding-block);transform-origin:var(--transform-origin);max-height:var(--menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;padding-inline:0;overflow-y:auto}.menu__content[data-open]{animation:menu-open var(--menu-transition-duration) var(--menu-transition-easing)}.menu__content[data-closed]{animation:menu-close var(--menu-transition-duration) var(--menu-transition-easing)}.menu__item{align-items:center;gap:var(--menu-item-icon-gap);padding-block:var(--menu-item-padding-block);padding-inline:var(--menu-item-padding-inline);margin-inline:var(--menu-padding-inline);border-radius:var(--menu-item-border-radius);font-family:var(--menu-item-font-family);font-size:var(--menu-item-font-size);font-weight:var(--menu-item-font-weight);line-height:var(--menu-item-line-height);color:var(--menu-item-color);cursor:var(--menu-item-cursor);box-shadow:none;transition:background-color var(--menu-transition-duration) var(--menu-transition-easing), color var(--menu-transition-duration) var(--menu-transition-easing);outline:none;text-decoration:none;display:flex}.menu__item:focus-visible{outline:none}.menu__item[data-highlighted]{background-color:var(--menu-item-highlighted-bg);color:var(--menu-item-highlighted-color)}.menu__item:is(a):hover:not([data-highlighted]),.menu__item:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-color);box-shadow:none}.menu__item.menu__item--destructive:is(a):hover:not([data-highlighted]),.menu__item.menu__item--destructive:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-destructive-color)}.menu__item[data-disabled]{opacity:var(--menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.menu__item.menu__item--destructive{color:var(--menu-item-destructive-color)}.menu__item.menu__item--destructive[data-highlighted]{background-color:var(--menu-item-destructive-highlighted-bg);color:var(--menu-item-destructive-highlighted-color)}.menu__item svg{width:var(--menu-item-icon-size);height:var(--menu-item-icon-size);flex-shrink:0}.menu__label{padding-block:var(--menu-label-padding-block);padding-inline:var(--menu-label-padding-inline);font-family:var(--menu-item-font-family);font-size:var(--menu-label-font-size);font-weight:var(--menu-label-font-weight);color:var(--menu-label-color)}.menu__item[data-checked]{font-weight:var(--menu-item-selected-font-weight)}.menu__separator{height:var(--menu-separator-height);background-color:var(--menu-separator-color);margin-block:var(--menu-separator-margin-block);border:none;margin-inline:0}.menu__positioner{z-index:var(--menu-z-index)}.menu__content--sm .menu__item{font-size:var(--menu-sm-item-font-size);padding-block:var(--menu-sm-item-padding-block)}.menu__content--sm .menu__item svg{width:var(--menu-sm-item-icon-size);height:var(--menu-sm-item-icon-size)}.menu__content--lg .menu__item{font-size:var(--menu-lg-item-font-size);padding-block:var(--menu-lg-item-padding-block)}.menu__content--lg .menu__item svg{width:var(--menu-lg-item-icon-size);height:var(--menu-lg-item-icon-size)}
+@keyframes menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.menu__content{box-sizing:border-box;background-color:var(--menu-bg);border-width:var(--menu-border-width);border-style:solid;border-color:var(--menu-border-color);border-radius:var(--menu-border-radius);box-shadow:var(--menu-shadow);padding-block:var(--menu-padding-block);transform-origin:var(--transform-origin);max-height:var(--menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;padding-inline:0;overflow-y:auto}.menu__content[data-open]{animation:menu-open var(--menu-transition-duration) var(--menu-transition-easing)}.menu__content[data-closed]{animation:menu-close var(--menu-transition-duration) var(--menu-transition-easing)}.menu__item{align-items:center;gap:var(--menu-item-icon-gap);padding-block:var(--menu-item-padding-block);padding-inline:var(--menu-item-padding-inline);margin-inline:var(--menu-padding-inline);border-radius:var(--menu-item-border-radius);font-family:var(--menu-item-font-family);font-size:var(--menu-item-font-size);font-weight:var(--menu-item-font-weight);line-height:var(--menu-item-line-height);color:var(--menu-item-color);cursor:var(--menu-item-cursor);box-shadow:none;transition:background-color var(--menu-transition-duration) var(--menu-transition-easing), color var(--menu-transition-duration) var(--menu-transition-easing);outline:none;text-decoration:none;display:flex}.menu__item:focus-visible{outline:none}.menu__item[data-highlighted]{background-color:var(--menu-item-highlighted-bg);color:var(--menu-item-highlighted-color)}.menu__item:is(a):hover:not([data-highlighted]),.menu__item:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-color);box-shadow:none}.menu__item.menu__item--destructive:is(a):hover:not([data-highlighted]),.menu__item.menu__item--destructive:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-destructive-color)}.menu__item[data-disabled]{opacity:var(--menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.menu__item.menu__item--destructive{color:var(--menu-item-destructive-color)}.menu__item.menu__item--destructive[data-highlighted]{background-color:var(--menu-item-destructive-highlighted-bg);color:var(--menu-item-destructive-highlighted-color)}.menu__item svg{width:var(--menu-item-icon-size);height:var(--menu-item-icon-size);flex-shrink:0}.menu__label{padding-block:var(--menu-label-padding-block);padding-inline:var(--menu-label-padding-inline);font-family:var(--menu-item-font-family);font-size:var(--menu-label-font-size);font-weight:var(--menu-label-font-weight);color:var(--menu-label-color)}.menu__item[data-checked]{font-weight:var(--menu-item-selected-font-weight)}.menu__separator{height:var(--menu-separator-height);background-color:var(--menu-separator-color);margin-block:var(--menu-separator-margin-block);border:none;margin-inline:0}.menu__positioner{z-index:var(--menu-z-index)}.menu__content--sm .menu__item{font-size:var(--menu-sm-item-font-size);padding-block:var(--menu-sm-item-padding-block)}.menu__content--sm .menu__item svg{width:var(--menu-sm-item-icon-size);height:var(--menu-sm-item-icon-size)}.menu__content--lg .menu__item{font-size:var(--menu-lg-item-font-size);padding-block:var(--menu-lg-item-padding-block)}.menu__content--lg .menu__item svg{width:var(--menu-lg-item-icon-size);height:var(--menu-lg-item-icon-size)}.menu__item-icon{flex-shrink:0}.menu__item-text{flex-direction:column;flex:1;min-width:0;display:flex}.menu__item-label,.menu__item-description{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.menu__item-description{font-size:var(--menu-label-font-size);color:var(--menu-label-color)}.menu__item[data-highlighted] .menu__item-description,.menu__item.menu__item--destructive .menu__item-description{color:inherit}

package/dist/menu.js

@@ -42,6 +42,7 @@ function c({ trigger: c, items: l, value: u, onValueChange: d, renderLink: f = r
 						itemClass: s,
 						separatorClass: "menu__separator",
 						labelClass: "menu__label",
+						blockClass: "menu",
 						radioValue: u,
 						onRadioValueChange: d,
 						renderLink: f

package/dist/prose.js

@@ -2,17 +2,23 @@ import './prose.css';
 import { forwardRef as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/molecules/Prose/Prose.tsx
-var n = e(function({ as: e = "div", size: n = "md", measure: r = !0, className: i, children: a, ...o }, s) {
-	return /* @__PURE__ */ t(e, {
-		ref: s,
-		className: [
-			"prose",
-			n === "md" ? "" : `prose--${n}`,
-			r ? "" : "prose--full",
-			i ?? ""
-		].filter(Boolean).join(" "),
-		...o,
+var n = e(function({ as: e = "div", size: n = "md", measure: r = !0, className: i, children: a, html: o, ...s }, c) {
+	let l = [
+		"prose",
+		n === "md" ? "" : `prose--${n}`,
+		r ? "" : "prose--full",
+		i ?? ""
+	].filter(Boolean).join(" ");
+	return o === void 0 ? /* @__PURE__ */ t(e, {
+		ref: c,
+		className: l,
+		...s,
 		children: a
+	}) : /* @__PURE__ */ t(e, {
+		ref: c,
+		className: l,
+		...s,
+		dangerouslySetInnerHTML: { __html: o }
 	});
 });
 //#endregion

package/dist/sortable.css

@@ -0,0 +1 @@
+.sortable{transform:translate3d(var(--sortable-x,0px), var(--sortable-y,0px), 0) scale(var(--sortable-scale-x,1), var(--sortable-scale-y,1));transition:var(--sortable-transition,none)}.sortable[data-dragging]{opacity:var(--opacity-disabled)}@media (prefers-reduced-motion:reduce){.sortable{transition:none}}

package/dist/sortable.js

@@ -0,0 +1,26 @@
+'use client';
+import './sortable.css';
+import { t as e } from "./_shared/css-properties.js";
+import { forwardRef as t, useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/stories/atoms/Sortable/Sortable.tsx
+var i = t(function({ as: t = "div", transform: i, transition: a, dragging: o = !1, className: s, children: c, ...l }, u) {
+	let d = e({
+		"--sortable-x": i ? `${i.x}px` : void 0,
+		"--sortable-y": i ? `${i.y}px` : void 0,
+		"--sortable-scale-x": i?.scaleX === void 0 ? void 0 : String(i.scaleX),
+		"--sortable-scale-y": i?.scaleY === void 0 ? void 0 : String(i.scaleY),
+		"--sortable-transition": a ?? void 0
+	});
+	return /* @__PURE__ */ r(t, {
+		ref: n((e) => {
+			d(e), typeof u == "function" ? u(e) : u && (u.current = e);
+		}, [d, u]),
+		className: ["sortable", s].filter(Boolean).join(" "),
+		"data-dragging": o ? "" : void 0,
+		...l,
+		children: c
+	});
+});
+//#endregion
+export { i as Sortable };

package/dist/tooltip.css

@@ -1 +1 @@
-.tooltip{box-sizing:border-box;max-width:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{top:100%}.tooltip__arrow[data-side=bottom]{bottom:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}
+.tooltip{box-sizing:border-box;max-width:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{top:100%}.tooltip__arrow[data-side=bottom]{bottom:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}.tooltip__trigger{display:inline-flex}.tooltip__trigger:focus-visible{outline:var(--border-width-focus) solid currentColor;outline-offset:var(--spacing-1)}.tooltip__trigger>:disabled,.tooltip__trigger>[aria-disabled=true]{pointer-events:none}

package/dist/tooltip.js

@@ -20,31 +20,35 @@ function l() {
 	let e = document.documentElement;
 	return c(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
 }
-var u = t(function({ label: t, children: s, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, container: _, className: v, ...y }, b) {
-	let x = e(_), S = n(), [C, w] = r(p ?? !1), T = f ?? C;
+var u = t(function({ label: t, children: s, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, disabledTrigger: _ = !1, container: v, className: y, ...b }, x) {
+	let S = e(v), C = n(), [w, T] = r(p ?? !1), E = f ?? w;
 	return /* @__PURE__ */ a(o.Root, {
 		open: f,
 		defaultOpen: p,
 		onOpenChange: (e) => {
-			f === void 0 && w(e), m?.(e);
+			f === void 0 && T(e), m?.(e);
 		},
 		children: [/* @__PURE__ */ i(o.Trigger, {
-			ref: b,
-			render: s,
-			"aria-describedby": T && g ? S : void 0,
+			ref: x,
+			render: _ ? /* @__PURE__ */ i("span", {
+				className: "tooltip__trigger",
+				tabIndex: 0,
+				children: s
+			}) : s,
+			"aria-describedby": E && g ? C : void 0,
 			...h === void 0 ? {} : { delay: h },
-			...y
+			...b
 		}), /* @__PURE__ */ i(o.Portal, {
-			container: x,
+			container: S,
 			children: /* @__PURE__ */ i(o.Positioner, {
 				className: "tooltip__positioner",
 				side: c,
 				align: u,
 				sideOffset: d ?? l,
 				children: /* @__PURE__ */ a(o.Popup, {
-					id: S,
+					id: C,
 					role: "tooltip",
-					className: ["tooltip", v].filter(Boolean).join(" "),
+					className: ["tooltip", y].filter(Boolean).join(" "),
 					children: [t, /* @__PURE__ */ i(o.Arrow, {
 						className: "tooltip__arrow",
 						children: /* @__PURE__ */ i("svg", {

package/dist/user-menu.css

@@ -1 +1 @@
-.user-menu__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--user-menu-trigger-gap);width:100%;padding-block:var(--user-menu-trigger-padding-block);padding-inline:var(--user-menu-trigger-padding-inline);border-radius:var(--user-menu-trigger-border-radius);cursor:pointer;display:flex}.user-menu__trigger.user-menu__trigger--compact{width:auto;padding-inline:var(--user-menu-trigger-compact-padding-inline)}.user-menu__trigger:focus-visible{outline:var(--user-menu-focus-ring-width) solid var(--user-menu-focus-ring-color);outline-offset:var(--user-menu-focus-ring-offset)}.user-menu__avatar-wrap{flex-shrink:0;position:relative}.user-menu__notification-badge{position:absolute;inset-block-start:calc(-1 * var(--user-menu-badge-offset));inset-inline-end:calc(-1 * var(--user-menu-badge-offset))}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--user-menu-name-font-size);font-weight:var(--user-menu-name-font-weight);color:var(--user-menu-name-color);flex:1;overflow:hidden}.user-menu__chevron{transition:transform var(--user-menu-transition-duration) var(--user-menu-transition-easing);flex-shrink:0;transform:rotate(90deg)}.user-menu__trigger[data-popup-open] .user-menu__chevron{transform:rotate(-90deg)}@keyframes user-menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes user-menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.user-menu__content{box-sizing:border-box;background-color:var(--user-menu-content-bg);border-width:var(--user-menu-content-border-width);border-style:solid;border-color:var(--user-menu-content-border-color);border-radius:var(--user-menu-content-border-radius);box-shadow:var(--user-menu-content-shadow);padding-block:var(--user-menu-content-padding-block);padding-inline:var(--user-menu-content-padding-inline);min-width:var(--user-menu-content-min-width);transform-origin:var(--transform-origin);max-height:var(--user-menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.user-menu__content[data-open]{animation:user-menu-open var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__content[data-closed]{animation:user-menu-close var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__header{gap:var(--user-menu-header-gap);padding-block:var(--user-menu-header-padding-block);padding-inline:var(--user-menu-header-padding-inline);flex-direction:column;display:flex}.user-menu__header-name{font-size:var(--user-menu-header-name-font-size);font-weight:var(--user-menu-header-name-font-weight);color:var(--user-menu-header-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__header-email{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item{align-items:center;gap:var(--user-menu-item-icon-gap);padding-block:var(--user-menu-item-padding-block);padding-inline:var(--user-menu-item-padding-inline);border-radius:var(--user-menu-item-border-radius);font-family:var(--user-menu-item-font-family);font-size:var(--user-menu-item-font-size);font-weight:var(--user-menu-item-font-weight);color:var(--user-menu-item-color);cursor:pointer;box-shadow:none;transition:background-color var(--user-menu-transition-duration) var(--user-menu-transition-easing), color var(--user-menu-transition-duration) var(--user-menu-transition-easing);outline:none;text-decoration:none;display:flex}.user-menu__item[data-highlighted]{background-color:var(--user-menu-item-highlighted-bg);color:var(--user-menu-item-highlighted-color)}.user-menu__item[data-disabled]{opacity:var(--user-menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.user-menu__item.user-menu__item--destructive{color:var(--user-menu-item-destructive-color)}.user-menu__item.user-menu__item--destructive[data-highlighted]{background-color:var(--user-menu-item-destructive-highlighted-bg);color:var(--user-menu-item-destructive-highlighted-color)}.user-menu__separator{height:var(--user-menu-separator-height);background-color:var(--user-menu-separator-color);margin-block:var(--user-menu-separator-margin-block);border:none}.user-menu__positioner{z-index:var(--user-menu-content-z-index)}
+.user-menu__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--user-menu-trigger-gap);width:100%;padding-block:var(--user-menu-trigger-padding-block);padding-inline:var(--user-menu-trigger-padding-inline);border-radius:var(--user-menu-trigger-border-radius);cursor:pointer;display:flex}.user-menu__trigger.user-menu__trigger--compact{width:auto;padding-inline:var(--user-menu-trigger-compact-padding-inline)}.user-menu__trigger:focus-visible{outline:var(--user-menu-focus-ring-width) solid var(--user-menu-focus-ring-color);outline-offset:var(--user-menu-focus-ring-offset)}.user-menu__avatar-wrap{flex-shrink:0;position:relative}.user-menu__notification-badge{position:absolute;inset-block-start:calc(-1 * var(--user-menu-badge-offset));inset-inline-end:calc(-1 * var(--user-menu-badge-offset))}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--user-menu-name-font-size);font-weight:var(--user-menu-name-font-weight);color:var(--user-menu-name-color);flex:1;overflow:hidden}.user-menu__chevron{transition:transform var(--user-menu-transition-duration) var(--user-menu-transition-easing);flex-shrink:0;transform:rotate(90deg)}.user-menu__trigger[data-popup-open] .user-menu__chevron{transform:rotate(-90deg)}@keyframes user-menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes user-menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.user-menu__content{box-sizing:border-box;background-color:var(--user-menu-content-bg);border-width:var(--user-menu-content-border-width);border-style:solid;border-color:var(--user-menu-content-border-color);border-radius:var(--user-menu-content-border-radius);box-shadow:var(--user-menu-content-shadow);padding-block:var(--user-menu-content-padding-block);padding-inline:var(--user-menu-content-padding-inline);min-width:var(--user-menu-content-min-width);transform-origin:var(--transform-origin);max-height:var(--user-menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.user-menu__content[data-open]{animation:user-menu-open var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__content[data-closed]{animation:user-menu-close var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__header{align-items:center;gap:var(--user-menu-trigger-gap);padding-block:var(--user-menu-header-padding-block);padding-inline:var(--user-menu-header-padding-inline);display:flex}.user-menu__header-text{gap:var(--user-menu-header-gap);flex-direction:column;min-width:0;display:flex}.user-menu__header-name{font-size:var(--user-menu-header-name-font-size);font-weight:var(--user-menu-header-name-font-weight);color:var(--user-menu-header-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__header-email{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item{align-items:center;gap:var(--user-menu-item-icon-gap);padding-block:var(--user-menu-item-padding-block);padding-inline:var(--user-menu-item-padding-inline);border-radius:var(--user-menu-item-border-radius);font-family:var(--user-menu-item-font-family);font-size:var(--user-menu-item-font-size);font-weight:var(--user-menu-item-font-weight);color:var(--user-menu-item-color);cursor:pointer;box-shadow:none;transition:background-color var(--user-menu-transition-duration) var(--user-menu-transition-easing), color var(--user-menu-transition-duration) var(--user-menu-transition-easing);outline:none;text-decoration:none;display:flex}.user-menu__item[data-highlighted]{background-color:var(--user-menu-item-highlighted-bg);color:var(--user-menu-item-highlighted-color)}.user-menu__item[data-disabled]{opacity:var(--user-menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.user-menu__item.user-menu__item--destructive{color:var(--user-menu-item-destructive-color)}.user-menu__item.user-menu__item--destructive[data-highlighted]{background-color:var(--user-menu-item-destructive-highlighted-bg);color:var(--user-menu-item-destructive-highlighted-color)}.user-menu__separator{height:var(--user-menu-separator-height);background-color:var(--user-menu-separator-color);margin-block:var(--user-menu-separator-margin-block);border:none}.user-menu__positioner{z-index:var(--user-menu-content-z-index)}.user-menu__item-icon{flex-shrink:0}.user-menu__item-text{flex-direction:column;flex:1;min-width:0;display:flex}.user-menu__item-label,.user-menu__item-description{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item-description{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color)}.user-menu__item[data-highlighted] .user-menu__item-description,.user-menu__item.user-menu__item--destructive .user-menu__item-description{color:inherit}

package/dist/user-menu.js

@@ -69,17 +69,27 @@ function m({ name: u, email: m, avatarUrl: h, notificationCount: g, items: _ = [
 					className: "user-menu__content",
 					children: [/* @__PURE__ */ c("div", {
 						className: "user-menu__header",
-						children: [/* @__PURE__ */ s("span", {
-							className: "user-menu__header-name",
-							children: u
-						}), /* @__PURE__ */ s("span", {
-							className: "user-menu__header-email",
-							children: m
+						children: [/* @__PURE__ */ s(r, {
+							src: h,
+							name: u,
+							alt: "",
+							size: "md",
+							className: "user-menu__header-avatar"
+						}), /* @__PURE__ */ c("div", {
+							className: "user-menu__header-text",
+							children: [/* @__PURE__ */ s("span", {
+								className: "user-menu__header-name",
+								children: u
+							}), /* @__PURE__ */ s("span", {
+								className: "user-menu__header-email",
+								children: m
+							})]
 						})]
 					}), _.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l.Separator, { className: "user-menu__separator" }), a({
 						items: _,
 						itemClass: p,
 						separatorClass: "user-menu__separator",
+						blockClass: "user-menu",
 						renderLink: b
 					})] })]
 				})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.3.1",
+  "version": "49.5.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -574,6 +574,10 @@
       "types": "./dist/_types/atoms/Sparkline/Sparkline.d.ts",
       "import": "./dist/sparkline.js"
     },
+    "./sortable": {
+      "types": "./dist/_types/atoms/Sortable/Sortable.d.ts",
+      "import": "./dist/sortable.js"
+    },
     "./spinner": {
       "types": "./dist/_types/atoms/Spinner/Spinner.d.ts",
       "import": "./dist/spinner.js"