@studiolxd/brand 38.17.0 → 40.0.0

package/dist/_shared/imagecropdialog.js

@@ -3,8 +3,8 @@ import { Spinner as e } from "../spinner.js";
 import { Button as t } from "../button.js";
 import { Alert as n } from "../alert.js";
 import { Modal as r } from "../modal.js";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import s, { PureComponent as c, createRef as l, useRef as u, useState as d } from "react";
+import i, { PureComponent as a, createRef as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.4/node_modules/react-image-crop/dist/index.js
 var f = {
 	x: 0,
@@ -72,7 +72,7 @@ function x(e, t, n, r) {
 var S = {
 	capture: !0,
 	passive: !1
-}, C = 0, w = class e extends c {
+}, C = 0, w = class e extends a {
 	static xOrds = ["e", "w"];
 	static yOrds = ["n", "s"];
 	static xyOrds = [
@@ -110,8 +110,8 @@ var S = {
 		clientY: 0,
 		isResize: !0
 	};
-	componentRef = l();
-	mediaRef = l();
+	componentRef = o();
+	mediaRef = o();
 	resizeObserver;
 	initChangeCalled = !1;
 	instanceId = `rc-${C++}`;
@@ -277,8 +277,8 @@ var S = {
 		return n || e.xyOrds.indexOf(u) > -1 ? c = h : e.xOrds.indexOf(u) > -1 ? (c.x = h.x, c.width = h.width) : e.yOrds.indexOf(u) > -1 && (c.y = h.y, c.height = h.height), c.x = p(c.x, 0, a.width - c.width), c.y = p(c.y, 0, a.height - c.height), c;
 	}
 	renderCropSelection() {
-		let { ariaLabels: t = e.defaultProps.ariaLabels, disabled: n, locked: r, renderSelectionAddon: i, ruleOfThirds: a, crop: o } = this.props, c = this.getCropStyle();
-		if (o) return /* @__PURE__ */ s.createElement("div", {
+		let { ariaLabels: t = e.defaultProps.ariaLabels, disabled: n, locked: r, renderSelectionAddon: a, ruleOfThirds: o, crop: s } = this.props, c = this.getCropStyle();
+		if (s) return /* @__PURE__ */ i.createElement("div", {
 			style: c,
 			className: "ReactCrop__crop-selection",
 			onPointerDown: this.onCropPointerDown,
@@ -286,81 +286,81 @@ var S = {
 			tabIndex: 0,
 			onKeyDown: this.onComponentKeyDown,
 			role: "group"
-		}, !n && !r && /* @__PURE__ */ s.createElement("div", {
+		}, !n && !r && /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-elements",
 			onFocus: this.onDragFocus
-		}, /* @__PURE__ */ s.createElement("div", {
+		}, /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-bar ord-n",
 			"data-ord": "n"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-bar ord-e",
 			"data-ord": "e"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-bar ord-s",
 			"data-ord": "s"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-bar ord-w",
 			"data-ord": "w"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-nw",
 			"data-ord": "nw",
 			tabIndex: 0,
 			"aria-label": t.nwDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "nw"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-n",
 			"data-ord": "n",
 			tabIndex: 0,
 			"aria-label": t.nDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "n"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-ne",
 			"data-ord": "ne",
 			tabIndex: 0,
 			"aria-label": t.neDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "ne"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-e",
 			"data-ord": "e",
 			tabIndex: 0,
 			"aria-label": t.eDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "e"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-se",
 			"data-ord": "se",
 			tabIndex: 0,
 			"aria-label": t.seDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "se"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-s",
 			"data-ord": "s",
 			tabIndex: 0,
 			"aria-label": t.sDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "s"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-sw",
 			"data-ord": "sw",
 			tabIndex: 0,
 			"aria-label": t.swDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "sw"),
 			role: "button"
-		}), /* @__PURE__ */ s.createElement("div", {
+		}), /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__drag-handle ord-w",
 			"data-ord": "w",
 			tabIndex: 0,
 			"aria-label": t.wDragHandle,
 			onKeyDown: (e) => this.onHandlerKeyDown(e, "w"),
 			role: "button"
-		})), i && /* @__PURE__ */ s.createElement("div", {
+		})), a && /* @__PURE__ */ i.createElement("div", {
 			className: "ReactCrop__selection-addon",
 			onPointerDown: (e) => e.stopPropagation()
-		}, i(this.state)), a && /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ s.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" })));
+		}, a(this.state)), o && /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ i.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" })));
 	}
 	makePixelCrop(e) {
 		return y({
@@ -369,36 +369,36 @@ var S = {
 		}, e.width, e.height);
 	}
 	render() {
-		let { aspect: e, children: t, circularCrop: n, className: r, crop: i, disabled: a, locked: o, style: c, ruleOfThirds: l } = this.props, { cropIsActive: u, newCropIsBeingDrawn: d } = this.state, f = i ? this.renderCropSelection() : null, p = m("ReactCrop", r, u && "ReactCrop--active", a && "ReactCrop--disabled", o && "ReactCrop--locked", d && "ReactCrop--new-crop", i && e && "ReactCrop--fixed-aspect", i && n && "ReactCrop--circular-crop", i && l && "ReactCrop--rule-of-thirds", !this.dragStarted && i && !i.width && !i.height && "ReactCrop--invisible-crop", n && "ReactCrop--no-animate");
-		return /* @__PURE__ */ s.createElement("div", {
+		let { aspect: e, children: t, circularCrop: n, className: r, crop: a, disabled: o, locked: s, style: c, ruleOfThirds: l } = this.props, { cropIsActive: u, newCropIsBeingDrawn: d } = this.state, f = a ? this.renderCropSelection() : null, p = m("ReactCrop", r, u && "ReactCrop--active", o && "ReactCrop--disabled", s && "ReactCrop--locked", d && "ReactCrop--new-crop", a && e && "ReactCrop--fixed-aspect", a && n && "ReactCrop--circular-crop", a && l && "ReactCrop--rule-of-thirds", !this.dragStarted && a && !a.width && !a.height && "ReactCrop--invisible-crop", n && "ReactCrop--no-animate");
+		return /* @__PURE__ */ i.createElement("div", {
 			ref: this.componentRef,
 			className: p,
 			style: c
-		}, /* @__PURE__ */ s.createElement("div", {
+		}, /* @__PURE__ */ i.createElement("div", {
 			ref: this.mediaRef,
 			className: "ReactCrop__child-wrapper",
 			onPointerDown: this.onComponentPointerDown
-		}, t), i ? /* @__PURE__ */ s.createElement("svg", {
+		}, t), a ? /* @__PURE__ */ i.createElement("svg", {
 			className: "ReactCrop__crop-mask",
 			width: "100%",
 			height: "100%"
-		}, /* @__PURE__ */ s.createElement("defs", null, /* @__PURE__ */ s.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ s.createElement("rect", {
+		}, /* @__PURE__ */ i.createElement("defs", null, /* @__PURE__ */ i.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ i.createElement("rect", {
 			width: "100%",
 			height: "100%",
 			fill: "white"
-		}), n ? /* @__PURE__ */ s.createElement("ellipse", {
-			cx: `${i.x + i.width / 2}${i.unit}`,
-			cy: `${i.y + i.height / 2}${i.unit}`,
-			rx: `${i.width / 2}${i.unit}`,
-			ry: `${i.height / 2}${i.unit}`,
+		}), n ? /* @__PURE__ */ i.createElement("ellipse", {
+			cx: `${a.x + a.width / 2}${a.unit}`,
+			cy: `${a.y + a.height / 2}${a.unit}`,
+			rx: `${a.width / 2}${a.unit}`,
+			ry: `${a.height / 2}${a.unit}`,
 			fill: "black"
-		}) : /* @__PURE__ */ s.createElement("rect", {
-			x: `${i.x}${i.unit}`,
-			y: `${i.y}${i.unit}`,
-			width: `${i.width}${i.unit}`,
-			height: `${i.height}${i.unit}`,
+		}) : /* @__PURE__ */ i.createElement("rect", {
+			x: `${a.x}${a.unit}`,
+			y: `${a.y}${a.unit}`,
+			width: `${a.width}${a.unit}`,
+			height: `${a.height}${a.unit}`,
 			fill: "black"
-		}))), /* @__PURE__ */ s.createElement("rect", {
+		}))), /* @__PURE__ */ i.createElement("rect", {
 			fill: "black",
 			fillOpacity: .5,
 			width: "100%",
@@ -431,9 +431,9 @@ function E(e, t, n) {
 }
 //#endregion
 //#region src/stories/molecules/ImageCropDialog/ImageCropDialog.tsx
-function D({ sourceUrl: s, title: c, description: l, circularCrop: f = !1, aspect: p = 1, outputSize: m = 512, outputMimeType: h, busy: g = !1, cancelLabel: _, confirmLabel: v, closeLabel: y, loadingLabel: b = "Cargando imagen…", errorMessage: x = "No hemos podido cargar la imagen. Prueba con otro archivo.", onConfirm: S, onClose: C, className: D }) {
-	let O = u(null), [k, A] = d(), [j, M] = d(), [N, P] = d("loading"), [F, I] = d(s);
-	s !== F && (I(s), P("loading"), A(void 0), M(void 0));
+function D({ sourceUrl: i, title: a, description: o, circularCrop: f = !1, aspect: p = 1, outputSize: m = 512, outputMimeType: h, busy: g = !1, cancelLabel: _, confirmLabel: v, closeLabel: y, loadingLabel: b = "Cargando imagen…", errorMessage: x = "No hemos podido cargar la imagen. Prueba con otro archivo.", onConfirm: S, onClose: C, className: D }) {
+	let O = s(null), [k, A] = c(), [j, M] = c(), [N, P] = c("loading"), [F, I] = c(i);
+	i !== F && (I(i), P("loading"), A(void 0), M(void 0));
 	let L = () => {
 		A(void 0), M(void 0), C();
 	}, R = async () => {
@@ -443,40 +443,40 @@ function D({ sourceUrl: s, title: c, description: l, circularCrop: f = !1, aspec
 			outputSize: m
 		})), L());
 	};
-	return /* @__PURE__ */ a(r, {
-		open: s !== null,
+	return /* @__PURE__ */ u(r, {
+		open: i !== null,
 		onClose: () => {
 			g || L();
 		},
-		title: c,
+		title: a,
 		...y ? { closeLabel: y } : {},
-		...l == null ? {} : { description: l },
+		...o == null ? {} : { description: o },
 		footerClassName: "image-crop-dialog__actions",
-		footer: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
+		footer: /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
 			variant: "outline",
 			disabled: g,
 			onClick: L,
 			children: _
-		}), /* @__PURE__ */ a(t, {
+		}), /* @__PURE__ */ u(t, {
 			disabled: g || !j?.width,
 			onClick: R,
 			children: v
 		})] }),
-		children: /* @__PURE__ */ a("div", {
+		children: /* @__PURE__ */ u("div", {
 			className: ["image-crop-dialog", D].filter(Boolean).join(" "),
-			children: /* @__PURE__ */ o("div", {
+			children: /* @__PURE__ */ d("div", {
 				className: "image-crop-dialog__area",
 				children: [
-					N === "loading" && /* @__PURE__ */ a(e, {
+					N === "loading" && /* @__PURE__ */ u(e, {
 						size: "lg",
 						label: b
 					}),
-					N === "error" && /* @__PURE__ */ a(n, {
+					N === "error" && /* @__PURE__ */ u(n, {
 						variant: "error",
 						description: x,
 						className: "image-crop-dialog__error"
 					}),
-					s && N !== "error" && /* @__PURE__ */ a(w, {
+					i && N !== "error" && /* @__PURE__ */ u(w, {
 						crop: k,
 						onChange: (e, t) => A(t),
 						onComplete: (e) => M(e),
@@ -484,9 +484,9 @@ function D({ sourceUrl: s, title: c, description: l, circularCrop: f = !1, aspec
 						circularCrop: f,
 						minWidth: 64,
 						keepSelection: !0,
-						children: /* @__PURE__ */ a("img", {
+						children: /* @__PURE__ */ u("img", {
 							ref: O,
-							src: s,
+							src: i,
 							alt: "",
 							onLoad: (e) => {
 								let { width: t, height: n } = e.currentTarget;

package/dist/_shared/tokens.js

@@ -1656,7 +1656,10 @@ var e = {
 	"--star-rating-star-size": "1.25em",
 	"--star-rating-sm-star-size": "1em",
 	"--star-rating-lg-star-size": "1.5em",
+	"--star-rating-count-gap": "0.5rem",
 	"--star-rating-track-color": "#6b6b6b",
+	"--star-rating-count-color": "#4a4a4a",
+	"--star-rating-empty-color": "#4a4a4a",
 	"--star-rating-fill-color": "#111e30",
 	"--star-rating-cursor": "pointer",
 	"--star-rating-disabled-cursor": "not-allowed",
@@ -2356,6 +2359,7 @@ var e = {
 	"--command-palette-item-highlighted-color": "#ffffff",
 	"--command-palette-item-icon-size": "1.5rem",
 	"--confirm-dialog-actions-space-before": "1.5rem",
+	"--confirm-dialog-phrase-space-before": "1rem",
 	"--consent-banner-bg": "#ffffff",
 	"--consent-banner-color": "#111e30",
 	"--consent-banner-border-color": "#111e30",

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

@@ -1,55 +1,112 @@
 import './StarRating.css';
-export interface StarRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
-    /** Valoración mostrada. En lectura se redondea a media estrella. */
-    value?: number;
-    /** Valoración al montar, cuando la entrada no está controlada. */
-    defaultValue?: number;
-    /** Se llama con la valoración elegida. Solo en entrada (`readOnly={false}`). */
-    onValueChange?: (value: number) => void;
-    /** Cuántas estrellas tiene la escala. */
+/** Lo que no depende del modo ni de los textos. */
+export interface StarRatingCommonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** Cuántas estrellas tiene la escala. Default: 5. */
     max?: number;
+    /** Talla de la estrella, relativa al texto que la rodea. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * El recuento de reseñas y su rótulo viajan juntos: sin `reviewCount` no hay
+ * nada que escribir, y con él hace falta saber cómo se escribe.
+ */
+export type StarRatingCountProps = {
+    /**
+     * Cuántas reseñas hay detrás de la media: se pinta a continuación («(24)»)
+     * y entra en el nombre accesible. **Sin él** la nota es la de UNA reseña
+     * suelta, donde un recuento no significa nada.
+     */
+    reviewCount?: undefined;
+    countLabel?: (reviewCount: number) => string;
+} | {
+    /** Cuántas reseñas hay detrás de la media. Obliga a pasar `countLabel`. */
+    reviewCount: number;
+    /**
+     * Cómo se escribe el recuento visible («(24)»). **Obligatorio** con
+     * `reviewCount`: el componente no escribe texto por su cuenta.
+     */
+    countLabel: (reviewCount: number) => string;
+};
+/**
+ * El valor y el texto del vacío, igual: `emptyLabel` solo se lee cuando `value`
+ * puede ser `null`, así que solo lo pide quien pueda pasarlo.
+ */
+export type StarRatingValueProps = {
+    /** Valoración mostrada. Se redondea a media estrella. */
+    value: number;
+    emptyLabel?: string;
+} | {
+    /**
+     * Valoración mostrada. Se redondea a media estrella.
+     *
+     * **`null` no es cero**: es «todavía sin reseñas». Con `null` la escala no
+     * se dibuja —cinco estrellas vacías son el dibujo de «valorado con 0», que
+     * es una nota de verdad y la peor— y en su lugar va `emptyLabel`.
+     */
+    value: number | null;
+    /**
+     * Qué se lee y se ve cuando `value` es `null`. **Obligatorio** en cuanto
+     * `value` pueda serlo: el componente no escribe «Todavía sin reseñas» por
+     * su cuenta.
+     */
+    emptyLabel: string;
+};
+/** Modo lectura (el de siempre): una imagen con su nombre accesible. */
+export type StarRatingReadProps = StarRatingCommonProps & StarRatingCountProps & StarRatingValueProps & {
     /**
      * Solo lectura (por defecto). El componente nace para **mostrar** una media;
      * para capturar una valoración hay que pedirlo con `readOnly={false}`.
      */
-    readOnly?: boolean;
+    readOnly?: true;
+    /**
+     * Nombre accesible de la valoración: recibe el valor ya redondeado a media
+     * estrella, el máximo y, si lo hay, el recuento. Es el nombre COMPLETO —el
+     * recuento visible queda dentro de la imagen y no se lee aparte—, p. ej.
+     * «4,5 de 5 estrellas, 24 reseñas». **Obligatorio**: el nombre accesible lo
+     * pasa el consumidor.
+     */
+    valueLabel: (value: number, max: number, reviewCount?: number) => string;
+};
+/** Modo entrada (`readOnly={false}`): un grupo de radios nativos. */
+export type StarRatingInputProps = StarRatingCommonProps & {
+    /** Modo entrada. */
+    readOnly: false;
+    /** Valoración elegida, cuando la entrada está controlada. */
+    value?: number;
+    /** Valoración al montar, cuando la entrada no está controlada. */
+    defaultValue?: number;
+    /** Se llama con la valoración elegida. */
+    onValueChange?: (value: number) => void;
     /** Deshabilita la entrada. */
     disabled?: boolean;
-    /** Talla de la estrella, relativa al texto que la rodea. */
-    size?: 'sm' | 'md' | 'lg';
     /** `name` de los radios que envían la valoración con el formulario. */
     name?: string;
-    /** Idioma con el que se escribe el número del nombre accesible. */
-    locale?: string;
-    /**
-     * Nombre accesible en lectura: recibe el valor ya redondeado a media estrella
-     * y el máximo. Default: «4,5 de 5 estrellas» (castellano). Una app
-     * multiidioma debe pasarlo traducido.
-     */
-    valueLabel?: (value: number, max: number) => string;
     /**
-     * Nombre accesible de cada estrella elegible. Default: «3 de 5 estrellas»
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible de cada estrella elegible, p. ej. «3 de 5 estrellas».
+     * **Obligatorio**: lo pasa el consumidor.
      */
-    optionLabel?: (value: number, max: number) => string;
+    optionLabel: (value: number, max: number) => string;
     /**
-     * Nombre accesible del grupo en modo entrada. Default: «Valoración»
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible del grupo, p. ej. «Valoración». **Obligatorio**, igual que
+     * `optionLabel`.
      */
-    groupLabel?: string;
-    /** Se añade DESPUÉS de las clases propias. */
-    className?: string;
-}
+    groupLabel: string;
+};
+export type StarRatingProps = StarRatingReadProps | StarRatingInputProps;
 /**
  * Valoración en estrellas, de lectura o de entrada.
  *
  * **En lectura** es una sola imagen: `role="img"` con el valor exacto en el
  * nombre accesible («4,5 de 5 estrellas»), no cinco iconos que el lector tenga
- * que contar. Admite **media estrella**, que es como se lee una media.
+ * que contar. Admite **media estrella**, que es como se lee una media, y
+ * **`value={null}`** para «todavía sin reseñas», que no se dibuja con estrellas
+ * porque las estrellas vacías ya significan otra cosa.
  *
  * **En entrada** (`readOnly={false}`) es un grupo de radios nativos —teclado,
  * envío de formulario y estado marcado vienen del navegador— con una estrella
  * por opción. La entrada va en pasos enteros: la media estrella describe una
  * media calculada, no algo que una persona elija.
  */
-export declare function StarRating({ value: valueProp, defaultValue, onValueChange, max, readOnly, disabled, size, name: nameProp, locale, valueLabel, optionLabel, groupLabel, className, ...rest }: StarRatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function StarRating(props: StarRatingProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/messages/BrandMessages.d.ts

@@ -0,0 +1,26 @@
+import type { PaginationMessages } from '../molecules/Pagination/Pagination';
+/**
+ * El contrato de textos de la librería: un espacio por componente, y dentro
+ * de cada espacio **todas las claves obligatorias**.
+ *
+ * El tipo nace aquí, en el DS, y es el catálogo de la aplicación el que lo
+ * satisface — nunca al revés. Si el tipo se generase desde el JSON de una
+ * suite concreta, el DS pasaría a depender de un paquete de producto para
+ * declarar su propio contrato y dejaría de sostenerse solo.
+ *
+ * Anidado por componente, no plano: son 310 textos en 111 componentes, y una
+ * lista plana de claves sueltas (`paginationPrevious`, `modalClose`…) no se
+ * puede escribir ni revisar. Los espacios calcan además los que el catálogo
+ * de la suite ya tiene (`pagination`, `table`, `common`…), así que montar el
+ * proveedor es mapear namespaces, no inventarlos.
+ *
+ * Cada interfaz de espacio vive **junto a su componente** (como
+ * `RecoveryCodesLabels`), no aquí: aquí solo se ensamblan. Un componente que
+ * gana textos declara su interfaz al lado de sus props y añade una línea a
+ * este tipo; a partir de ese momento, una aplicación que no la rellene no
+ * compila.
+ */
+export interface BrandMessages {
+    pagination: PaginationMessages;
+}
+export type { PaginationMessages };

package/dist/_types/messages/BrandMessagesContext.d.ts

@@ -0,0 +1,21 @@
+import type { BrandMessages } from './BrandMessages';
+/**
+ * El catálogo montado por la aplicación, o `null` si no hay proveedor. Lo
+ * pone `BrandMessagesProvider` y lo leen los componentes con
+ * `useBrandMessages`.
+ */
+export declare const BrandMessagesContext: import("react").Context<BrandMessages | null>;
+/**
+ * Lee un texto del espacio de un componente: `t('previous')` devuelve el del
+ * proveedor, y `t('previous', previousLabel)` deja ganar a la prop cuando el
+ * consumidor la pasa.
+ */
+export interface BrandMessagesReader<K extends keyof BrandMessages> {
+    <N extends keyof BrandMessages[K]>(key: N, override?: BrandMessages[K][N]): BrandMessages[K][N];
+}
+/**
+ * El lector del espacio de un componente. Se llama **en el punto donde el
+ * texto se pinta**, no al principio del render: así un componente que no
+ * enseña el selector de tamaño tampoco exige su texto.
+ */
+export declare function useBrandMessages<K extends keyof BrandMessages>(namespace: K): BrandMessagesReader<K>;

package/dist/_types/messages/BrandMessagesProvider.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { BrandMessages } from './BrandMessages';
+export interface BrandMessagesProviderProps {
+    /**
+     * El catálogo entero, en el idioma vigente. Es `BrandMessages`, con todas
+     * sus claves: si falta una, no compila. Ese es el punto del proveedor —
+     * olvidar un texto tiene que ser un error de compilación y no un
+     * «Cancelar» castellano dentro de una página en francés.
+     */
+    messages: BrandMessages;
+    children: ReactNode;
+}
+/**
+ * Los textos que los componentes emiten por su cuenta, montado **una vez en
+ * la raíz de la aplicación** y alimentado desde el catálogo de la app (en la
+ * suite, `@slxd/messages`).
+ *
+ * El orden de resolución de cada texto es **prop → proveedor → error**, y no
+ * hay un cuarto escalón: ningún componente trae el castellano puesto. La prop
+ * suelta sigue existiendo como anulación puntual —el `ariaLabel` de un
+ * paginador concreto no es el de todos—, pero cuando no se pasa, el texto
+ * sale del proveedor o revienta con un mensaje que dice qué falta.
+ *
+ * ```tsx
+ * // app/[locale]/layout.tsx
+ * const t = await getTranslations();
+ *
+ * <BrandMessagesProvider
+ *   messages={{
+ *     pagination: {
+ *       label: t('pagination.label'),
+ *       pagesGroup: t('pagination.pagesGroup'),
+ *       previous: t('pagination.previous'),
+ *       next: t('pagination.next'),
+ *       goToPage: (page) => t('pagination.goToPage', { page }),
+ *       perPage: t('pagination.perPage'),
+ *       total: (count) => t('pagination.total', { count }),
+ *       allOption: t('pagination.allOption'),
+ *     },
+ *   }}
+ * >
+ *   {children}
+ * </BrandMessagesProvider>
+ * ```
+ */
+export declare function BrandMessagesProvider({ messages, children }: BrandMessagesProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/messages/index.d.ts

@@ -0,0 +1,5 @@
+export { BrandMessagesProvider } from './BrandMessagesProvider';
+export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
+export { useBrandMessages } from './BrandMessagesContext';
+export type { BrandMessagesReader } from './BrandMessagesContext';
+export type { BrandMessages, PaginationMessages } from './BrandMessages';

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

@@ -50,7 +50,18 @@ export interface CardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      * consumidor (varios párrafos, `<Tag>`, texto con formato…).
      */
     description?: React.ReactNode;
-    /** Texto accesible del CTA, visually-hidden (modo link — se espera junto a `href` o `render`). */
+    /**
+     * Texto accesible del CTA (modo link), *visually-hidden*. **Manda sobre la
+     * flecha**: con `ctaLabel` la tarjeta pinta la flecha Y su nombre accesible;
+     * sin `ctaLabel` no pinta ninguna de las dos cosas. Una sola decisión en vez
+     * de dos props que puedan contradecirse — no hay `showArrow`.
+     *
+     * Omitirlo es lo que se quiere en una rejilla de catálogo, donde la flecha
+     * repetida en cada tarjeta es ruido y el destino ya lo dice el título. Con
+     * él, en cambio, la tarjeta suelta de marketing gana la llamada visible y el
+     * enlace un nombre accesible completo («Ver más sobre plataformas LMS»)
+     * cuando lo único visible sería la flecha.
+     */
     ctaLabel?: string;
     /** Color de fondo. Default: `'outline'`. */
     color?: CardColor;

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

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type ModalProps } from '../Modal/Modal';
 import './ConfirmDialog.css';
-export interface ConfirmDialogProps {
+export interface ConfirmDialogBaseProps {
     open: boolean;
     /** Título del diálogo: la pregunta, no «Confirmar». */
     title: string;
@@ -67,6 +67,42 @@ export interface ConfirmDialogProps {
     /** Se añade DESPUÉS de las clases propias del pie del diálogo. */
     className?: string;
 }
+/**
+ * La frase de confirmación y sus dos textos viajan juntos: sin `confirmPhrase`
+ * no hay campo que rotular ni discrepancia que contar, y con ella los dos
+ * textos los pasa el producto —dicen QUÉ hay que teclear—, así que no llevan
+ * default castellano.
+ */
+export type ConfirmDialogPhraseProps = {
+    /**
+     * Exige teclear una frase exacta —el nombre de la organización, el del
+     * plugin— antes de poder confirmar. El botón de confirmar nace apagado y
+     * solo se enciende cuando lo tecleado coincide.
+     */
+    confirmPhrase?: undefined;
+    confirmPhraseLabel?: string;
+    confirmPhraseMismatch?: string;
+} | {
+    /**
+     * La frase exacta que hay que teclear para poder confirmar. Se compara
+     * sin los espacios de los extremos —un espacio pegado al pegar no es un
+     * error de la persona— pero sin tocar nada más: ni la caja ni los
+     * acentos, que es de lo que vive esta barrera.
+     */
+    confirmPhrase: string;
+    /**
+     * Rótulo del campo. **Obligatorio** con `confirmPhrase`, sin default: es
+     * donde el producto dice qué hay que teclear («Escribe *acme* para
+     * confirmar»), y eso el diálogo no lo sabe.
+     */
+    confirmPhraseLabel: string;
+    /**
+     * Mensaje cuando lo tecleado no coincide. **Obligatorio** con
+     * `confirmPhrase`, sin default, por lo mismo.
+     */
+    confirmPhraseMismatch: string;
+};
+export type ConfirmDialogProps = ConfirmDialogBaseProps & ConfirmDialogPhraseProps;
 /**
  * La pregunta antes de una acción que no se puede deshacer: borrar una
  * organización, revocar una clave, expulsar a alguien de un equipo.
@@ -80,5 +116,9 @@ export interface ConfirmDialogProps {
  * queda abierto y ocupado —no se cierra en falso ni deja pulsar dos veces— y
  * se cierra solo al resolver. Si rechaza, sigue abierto: el error lo cuenta el
  * consumidor, que es quien sabe qué ha pasado.
+ *
+ * Con `confirmPhrase` monta además la **barrera de teclear el identificador**
+ * —el patrón de «escribe el nombre de la organización para borrarla»—: un campo
+ * bajo la pregunta y el botón de confirmar apagado hasta que coincida.
  */
-export declare function ConfirmDialog({ open, title, description, children, onConfirm, onCancel, onConfirmError, secondaryActionLabel, onSecondaryAction, destructive, confirmLabel, cancelLabel, pendingLabel, closeLabel, container, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, title, description, children, onConfirm, onCancel, onConfirmError, secondaryActionLabel, onSecondaryAction, destructive, confirmLabel, cancelLabel, pendingLabel, closeLabel, confirmPhrase, confirmPhraseLabel, confirmPhraseMismatch, container, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;