@studiolxd/brand 38.17.0 → 40.0.0

package/dist/tooltip.js

@@ -1,14 +1,14 @@
 'use client';
 import './tooltip.css';
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { forwardRef as n, useId as r, useState as i } from "react";
+import { forwardRef as e, useId as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Tooltip as a } from "@base-ui/react/tooltip";
 //#region src/stories/atoms/Tooltip/Tooltip.tsx
-function o({ children: t, delayDuration: n = 0, skipDelayDuration: r }) {
-	return /* @__PURE__ */ e(a.Provider, {
-		delay: n,
-		...r === void 0 ? {} : { timeout: r },
-		children: t
+function o({ children: e, delayDuration: t = 0, skipDelayDuration: n }) {
+	return /* @__PURE__ */ r(a.Provider, {
+		delay: t,
+		...n === void 0 ? {} : { timeout: n },
+		children: e
 	});
 }
 function s(e, t) {
@@ -19,37 +19,37 @@ function c() {
 	let e = document.documentElement;
 	return s(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
 }
-var l = n(function({ label: n, children: o, side: s = "top", align: l = "center", sideOffset: u, open: d, defaultOpen: f, onOpenChange: p, delayDuration: m, describe: h = !0, className: g, ..._ }, v) {
-	let y = r(), [b, x] = i(f ?? !1), S = d ?? b;
-	return /* @__PURE__ */ t(a.Root, {
+var l = e(function({ label: e, children: o, side: s = "top", align: l = "center", sideOffset: u, open: d, defaultOpen: f, onOpenChange: p, delayDuration: m, describe: h = !0, className: g, ..._ }, v) {
+	let y = t(), [b, x] = n(f ?? !1), S = d ?? b;
+	return /* @__PURE__ */ i(a.Root, {
 		open: d,
 		defaultOpen: f,
 		onOpenChange: (e) => {
 			d === void 0 && x(e), p?.(e);
 		},
-		children: [/* @__PURE__ */ e(a.Trigger, {
+		children: [/* @__PURE__ */ r(a.Trigger, {
 			ref: v,
 			render: o,
 			"aria-describedby": S && h ? y : void 0,
 			...m === void 0 ? {} : { delay: m },
 			..._
-		}), /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(a.Positioner, {
+		}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
 			className: "tooltip__positioner",
 			side: s,
 			align: l,
 			sideOffset: u ?? c,
-			children: /* @__PURE__ */ t(a.Popup, {
+			children: /* @__PURE__ */ i(a.Popup, {
 				id: y,
 				role: "tooltip",
 				className: ["tooltip", g].filter(Boolean).join(" "),
-				children: [n, /* @__PURE__ */ e(a.Arrow, {
+				children: [e, /* @__PURE__ */ r(a.Arrow, {
 					className: "tooltip__arrow",
-					children: /* @__PURE__ */ e("svg", {
+					children: /* @__PURE__ */ r("svg", {
 						width: "10",
 						height: "5",
 						viewBox: "0 0 30 10",
 						preserveAspectRatio: "none",
-						children: /* @__PURE__ */ e("polygon", { points: "0,0 30,0 15,10" })
+						children: /* @__PURE__ */ r("polygon", { points: "0,0 30,0 15,10" })
 					})
 				})]
 			})

package/dist/tree-view.js

@@ -1,8 +1,8 @@
 'use client';
 import './tree-view.css';
 import { Icon as e } from "./icon.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useCallback as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import { useCallback as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/molecules/TreeView/TreeView.tsx
 var c = 500;
 function l(e, t, n = 1, r) {
@@ -13,18 +13,18 @@ function l(e, t, n = 1, r) {
 	}, ...e.children && t.has(e.id) ? l(e.children, t, n + 1, e.id) : []]);
 }
 function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, selected: m, defaultSelected: h, onSelectedChange: g, label: _ = "Árbol", truncateFromLevel: v = 4, nodeRef: y, className: b, ...x }) {
-	let S = i(), C = o(null), [w, T] = s(f ?? []), E = d !== void 0, D = E ? d : w, [O, k] = s(h), A = m !== void 0, j = A ? m : O, M = a(() => new Set(D), [D]), N = a(() => l(u, M), [u, M]), [P, F] = s(void 0), I = P && N.some((e) => e.node.id === P) ? P : j && N.some((e) => e.node.id === j) ? j : N[0]?.node.id, L = o(""), R = o(0), z = r((e) => {
+	let S = n(), C = i(null), [w, T] = a(f ?? []), E = d !== void 0, D = E ? d : w, [O, k] = a(h), A = m !== void 0, j = A ? m : O, M = r(() => new Set(D), [D]), N = r(() => l(u, M), [u, M]), [P, F] = a(void 0), I = P && N.some((e) => e.node.id === P) ? P : j && N.some((e) => e.node.id === j) ? j : N[0]?.node.id, L = i(""), R = i(0), z = t((e) => {
 		E || T(e), p?.(e);
-	}, [E, p]), B = r((e, t) => {
+	}, [E, p]), B = t((e, t) => {
 		let n = M.has(e), r = t ?? !n;
 		r !== n && z(r ? [...D, e] : D.filter((t) => t !== e));
 	}, [
 		D,
 		M,
 		z
-	]), V = r((e) => {
+	]), V = t((e) => {
 		A || k(e), g?.(e);
-	}, [A, g]), H = r((e) => {
+	}, [A, g]), H = t((e) => {
 		let t = N.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !M.has(e));
 		t.length !== 0 && z([...D, ...t]);
 	}, [
@@ -32,9 +32,9 @@ function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, sel
 		N,
 		M,
 		z
-	]), U = r((e) => `${S}-${e}`, [S]), W = r((e) => {
+	]), U = t((e) => `${S}-${e}`, [S]), W = t((e) => {
 		e && (F(e), C.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
-	}, []), G = r((e, t) => {
+	}, []), G = t((e, t) => {
 		let n = Date.now(), r = n - R.current > c ? e : L.current + e;
 		L.current = r, R.current = n;
 		let i = r.length === 1 ? t + 1 : Math.max(t, 0), a = r.toLowerCase();
@@ -79,80 +79,80 @@ function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, sel
 				break;
 		}
 	}
-	function q(r, i, a) {
-		return r.map((r) => {
-			let o = !!r.children?.length, s = o && M.has(r.id), c = j === r.id, l = s && r.iconExpanded || r.icon, u = i >= v, d = u && typeof r.label == "string" ? r.label : void 0, f = r.dropTarget ? "target" : r.dropDisabled ? "disabled" : void 0;
-			return /* @__PURE__ */ n("li", {
+	function q(t, n, r) {
+		return t.map((t) => {
+			let i = !!t.children?.length, a = i && M.has(t.id), c = j === t.id, l = a && t.iconExpanded || t.icon, u = n >= v, d = u && typeof t.label == "string" ? t.label : void 0, f = t.dropTarget ? "target" : t.dropDisabled ? "disabled" : void 0;
+			return /* @__PURE__ */ s("li", {
 				role: "treeitem",
-				"data-tree-item": r.id,
-				"aria-labelledby": U(r.id),
-				"aria-expanded": o ? s : void 0,
+				"data-tree-item": t.id,
+				"aria-labelledby": U(t.id),
+				"aria-expanded": i ? a : void 0,
 				"aria-selected": c,
-				"aria-level": i,
-				"aria-disabled": r.disabled || void 0,
+				"aria-level": n,
+				"aria-disabled": t.disabled || void 0,
 				"data-drop": f,
-				tabIndex: I === r.id ? 0 : -1,
+				tabIndex: I === t.id ? 0 : -1,
 				className: [
 					"tree-view__item",
 					c ? "tree-view__item--selected" : "",
-					r.disabled ? "tree-view__item--disabled" : "",
-					r.dropTarget ? "tree-view__item--drop-target" : "",
-					r.dropDisabled ? "tree-view__item--drop-disabled" : ""
+					t.disabled ? "tree-view__item--disabled" : "",
+					t.dropTarget ? "tree-view__item--drop-target" : "",
+					t.dropDisabled ? "tree-view__item--drop-disabled" : ""
 				].filter(Boolean).join(" "),
 				onKeyDown: (e) => {
 					e.target === e.currentTarget && K(e, {
-						node: r,
-						level: i,
-						parentId: a
+						node: t,
+						level: n,
+						parentId: r
 					});
 				},
 				onFocus: (e) => {
-					e.target === e.currentTarget && F(r.id);
+					e.target === e.currentTarget && F(t.id);
 				},
-				onClick: r.disabled ? void 0 : (e) => {
-					e.stopPropagation(), o && B(r.id), V(r.id), W(r.id);
+				onClick: t.disabled ? void 0 : (e) => {
+					e.stopPropagation(), i && B(t.id), V(t.id), W(t.id);
 				},
-				children: [/* @__PURE__ */ n("span", {
+				children: [/* @__PURE__ */ s("span", {
 					className: "tree-view__row",
-					ref: y ? (e) => y(r.id, e) : void 0,
+					ref: y ? (e) => y(t.id, e) : void 0,
 					children: [
-						/* @__PURE__ */ t("span", {
+						/* @__PURE__ */ o("span", {
 							className: "tree-view__chevron-slot",
 							"aria-hidden": "true",
-							children: o && /* @__PURE__ */ t(e, {
+							children: i && /* @__PURE__ */ o(e, {
 								name: "chevron",
 								className: "tree-view__chevron",
 								size: "sm"
 							})
 						}),
-						l && /* @__PURE__ */ t("span", {
+						l && /* @__PURE__ */ o("span", {
 							className: "tree-view__icon",
 							"aria-hidden": "true",
 							children: l
 						}),
-						/* @__PURE__ */ t("span", {
+						/* @__PURE__ */ o("span", {
 							className: ["tree-view__label", u ? "tree-view__label--truncated" : ""].filter(Boolean).join(" "),
-							id: U(r.id),
+							id: U(t.id),
 							title: d,
-							children: r.label
+							children: t.label
 						}),
-						r.actions && /* @__PURE__ */ t("span", {
+						t.actions && /* @__PURE__ */ o("span", {
 							className: "tree-view__actions",
 							onClick: (e) => e.stopPropagation(),
 							onKeyDown: (e) => e.stopPropagation(),
 							onKeyUp: (e) => e.stopPropagation(),
-							children: r.actions
+							children: t.actions
 						})
 					]
-				}), o && s && /* @__PURE__ */ t("ul", {
+				}), i && a && /* @__PURE__ */ o("ul", {
 					role: "group",
 					className: "tree-view__group",
-					children: q(r.children, i + 1, r.id)
+					children: q(t.children, n + 1, t.id)
 				})]
-			}, r.id);
+			}, t.id);
 		});
 	}
-	return /* @__PURE__ */ t("ul", {
+	return /* @__PURE__ */ o("ul", {
 		ref: C,
 		role: "tree",
 		"aria-label": _,

package/dist/uptime-bars.js

@@ -1,8 +1,8 @@
 'use client';
 import './uptime-bars.css';
 import { Tooltip as e } from "./tooltip.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as r, useRef as i, useState as a } from "react";
+import { forwardRef as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/UptimeBars/uptimeStatus.ts
 var o = {
 	ok: 99.65,
@@ -13,11 +13,11 @@ function s(e, t) {
 }
 //#endregion
 //#region src/stories/molecules/UptimeBars/UptimeBars.tsx
-var c = r(function({ points: r, summary: c, label: l = "Disponibilidad", startLabel: u, endLabel: d, thresholds: f, locale: p = "es-ES", maximumFractionDigits: m = 2, pointLabel: h, noDataLabel: g = "sin datos", tooltips: _ = !0, className: v, ...y }, b) {
+var c = t(function({ points: t, summary: c, label: l = "Disponibilidad", startLabel: u, endLabel: d, thresholds: f, locale: p = "es-ES", maximumFractionDigits: m = 2, pointLabel: h, noDataLabel: g = "sin datos", tooltips: _ = !0, className: v, ...y }, b) {
 	let x = {
 		...o,
 		...f
-	}, S = i([]), [C, w] = a(0), T = new Intl.NumberFormat(p, {
+	}, S = n([]), [C, w] = r(0), T = new Intl.NumberFormat(p, {
 		style: "percent",
 		maximumFractionDigits: m
 	}), E = (e) => e === null || !Number.isFinite(e) ? null : T.format(e / 100), D = (e, t) => {
@@ -25,70 +25,70 @@ var c = r(function({ points: r, summary: c, label: l = "Disponibilidad", startLa
 		let n = `${e.label}: ${t ?? g}`;
 		return e.detail ? `${n}. ${e.detail}` : n;
 	}, O = (e) => {
-		let t = Math.max(0, Math.min(r.length - 1, e));
-		w(t), S.current[t]?.focus();
-	}, k = (e, t) => {
-		let n = {
+		let n = Math.max(0, Math.min(t.length - 1, e));
+		w(n), S.current[n]?.focus();
+	}, k = (e, n) => {
+		let r = {
 			ArrowRight: 1,
 			ArrowDown: 1,
 			ArrowLeft: -1,
 			ArrowUp: -1
 		}[e.key];
-		if (n) {
-			e.preventDefault(), O(t + n);
+		if (r) {
+			e.preventDefault(), O(n + r);
 			return;
 		}
-		e.key === "Home" ? (e.preventDefault(), O(0)) : e.key === "End" && (e.preventDefault(), O(r.length - 1));
-	}, A = Math.max(0, Math.min(C, r.length - 1));
-	return /* @__PURE__ */ n("div", {
+		e.key === "Home" ? (e.preventDefault(), O(0)) : e.key === "End" && (e.preventDefault(), O(t.length - 1));
+	}, A = Math.max(0, Math.min(C, t.length - 1));
+	return /* @__PURE__ */ a("div", {
 		ref: b,
 		className: ["uptime-bars", v].filter(Boolean).join(" "),
 		...y,
-		children: [/* @__PURE__ */ t("ol", {
+		children: [/* @__PURE__ */ i("ol", {
 			className: "uptime-bars__list",
 			"aria-label": l,
-			children: r.map((r, i) => {
-				let a = E(r.value), o = /* @__PURE__ */ t("span", {
-					className: `uptime-bars__bar uptime-bars__bar--${s(r.value, x)}`,
+			children: t.map((t, n) => {
+				let r = E(t.value), o = /* @__PURE__ */ i("span", {
+					className: `uptime-bars__bar uptime-bars__bar--${s(t.value, x)}`,
 					role: "img",
-					"aria-label": D(r, a),
-					tabIndex: _ ? i === A ? 0 : -1 : void 0,
-					onKeyDown: _ ? (e) => k(e, i) : void 0,
-					onFocus: _ ? () => w(i) : void 0
+					"aria-label": D(t, r),
+					tabIndex: _ ? n === A ? 0 : -1 : void 0,
+					onKeyDown: _ ? (e) => k(e, n) : void 0,
+					onFocus: _ ? () => w(n) : void 0
 				});
-				return /* @__PURE__ */ t("li", {
+				return /* @__PURE__ */ i("li", {
 					className: "uptime-bars__item",
-					children: _ ? /* @__PURE__ */ t(e, {
+					children: _ ? /* @__PURE__ */ i(e, {
 						ref: (e) => {
-							S.current[i] = e;
+							S.current[n] = e;
 						},
-						label: /* @__PURE__ */ n("span", {
+						label: /* @__PURE__ */ a("span", {
 							className: "uptime-bars__tooltip",
 							children: [
-								/* @__PURE__ */ t("span", {
+								/* @__PURE__ */ i("span", {
 									className: "uptime-bars__tooltip-label",
-									children: r.label
+									children: t.label
 								}),
-								/* @__PURE__ */ t("span", { children: a ?? g }),
-								r.detail ? /* @__PURE__ */ t("span", { children: r.detail }) : null
+								/* @__PURE__ */ i("span", { children: r ?? g }),
+								t.detail ? /* @__PURE__ */ i("span", { children: t.detail }) : null
 							]
 						}),
 						children: o
 					}) : o
-				}, `${r.label}-${i}`);
+				}, `${t.label}-${n}`);
 			})
-		}), /* @__PURE__ */ n("p", {
+		}), /* @__PURE__ */ a("p", {
 			className: "uptime-bars__footer",
 			children: [
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ i("span", {
 					className: "uptime-bars__edge",
 					children: u
 				}),
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ i("span", {
 					className: "uptime-bars__summary",
 					children: c
 				}),
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ i("span", {
 					className: "uptime-bars__edge uptime-bars__edge--end",
 					children: d
 				})

package/dist/user-message.js

@@ -1,25 +1,25 @@
 import './user-message.css';
 import { MessageBubble as e } from "./message-bubble.js";
 import { t } from "./_shared/messagetimestamp.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/UserMessage/UserMessage.tsx
-var a = i(function({ children: i, author: a, timestamp: o, locale: s, timestampFormat: c, className: l, ...u }, d) {
+var a = n(function({ children: n, author: a, timestamp: o, locale: s, timestampFormat: c, className: l, ...u }, d) {
 	let f = t(o, s, c);
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ i("div", {
 		ref: d,
 		className: `user-message${l ? ` ${l}` : ""}`,
 		...u,
 		children: [
-			a && /* @__PURE__ */ n("span", {
+			a && /* @__PURE__ */ r("span", {
 				className: "user-message__author",
 				children: a
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ r(e, {
 				role: "user",
-				children: i
+				children: n
 			}),
-			f && /* @__PURE__ */ n("time", {
+			f && /* @__PURE__ */ r("time", {
 				className: "user-message__timestamp",
 				dateTime: f.dateTime,
 				children: f.label

package/dist/visually-hidden.js

@@ -1,13 +1,13 @@
 /* empty css                       */
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/VisuallyHidden/VisuallyHidden.tsx
-var n = t(function({ children: t, as: n = "span", className: r, ...i }, a) {
-	return /* @__PURE__ */ e(n, {
+var n = e(function({ children: e, as: n = "span", className: r, ...i }, a) {
+	return /* @__PURE__ */ t(n, {
 		ref: a,
 		className: ["visually-hidden", r].filter(Boolean).join(" "),
 		...i,
-		children: t
+		children: e
 	});
 });
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "38.17.0",
+  "version": "40.0.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -457,6 +457,10 @@
       "types": "./dist/_types/atoms/OtpInput/OtpInput.d.ts",
       "import": "./dist/otp-input.js"
     },
+    "./messages": {
+      "types": "./dist/_types/messages/index.d.ts",
+      "import": "./dist/messages.js"
+    },
     "./pagination": {
       "types": "./dist/_types/molecules/Pagination/Pagination.d.ts",
       "import": "./dist/pagination.js"

package/src/tokens/components/description-list.css

@@ -8,7 +8,7 @@
   --description-list-cell-padding-inline: var(--spacing-4); /** Aire horizontal de cada celda */
   --description-list-border-color: var(--color-primary); /** Color del borde: tinta de la superficie */
   --description-list-term-font-family: var(--label-font-family); /** Tipografía del término (dt): la de las etiquetas */
-  --description-list-term-font-size: var(--label-font-size); /** Cuerpo del término: el de las etiquetas, no el de la prosa */
+  --description-list-term-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del término: un peldaño por debajo del valor, la misma relación en las dos superficies (14/16 en aplicación, 16/20 en la pública). Es el mismo 14px que daba 0.875rem en aplicación, pero atado al cuerpo de la superficie: dentro de un SiteShell el valor sube a 20px y el término tenía que subir con él */
   --description-list-term-line-height: var(--label-line-height); /** Interlineado del término */
   --description-list-term-letter-spacing: var(--label-letter-spacing); /** Tracking del término */
   --description-list-term-color: var(--color-text-on-light); /** Color del término */

package/src/tokens/components/star-rating.css

@@ -9,10 +9,13 @@
   --star-rating-cursor: pointer; /** Cursor sobre una estrella elegible */
   --star-rating-disabled-cursor: not-allowed; /** Cursor cuando la entrada está deshabilitada */
   --star-rating-gap: var(--spacing-1); /** Separación entre estrellas */
+  --star-rating-count-gap: var(--spacing-2); /** Separación entre las estrellas y el recuento de reseñas: más aire que entre estrella y estrella, para que el recuento se lea como otra cosa */
   --star-rating-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando la entrada está deshabilitada */
   --star-rating-transition-duration: var(--motion-duration-fast); /** Duración del cambio de relleno */
   --star-rating-transition-easing: var(--motion-easing-default); /** Easing del cambio de relleno */
   --star-rating-track-color: var(--color-icon-secondary-on-light); /** Contorno de la estrella sin ganar */
+  --star-rating-count-color: var(--color-text-muted-on-light); /** Tinta del recuento de reseñas: texto secundario, es un metadato junto a la valoración */
+  --star-rating-empty-color: var(--color-text-muted-on-light); /** Tinta del «todavía sin reseñas»: texto secundario, igual que el recuento */
   --star-rating-fill-color: var(--color-primary); /** Relleno y contorno de la estrella ganada */
   --star-rating-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --star-rating-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
@@ -24,6 +27,8 @@
 [data-theme="dark"],
 html.dark {
   --star-rating-track-color: var(--color-text-on-dark); /** Contorno de la estrella sin ganar — surface-dark */
+  --star-rating-count-color: var(--color-text-muted-on-dark); /** Tinta del recuento — surface-dark */
+  --star-rating-empty-color: var(--color-text-muted-on-dark); /** Tinta del «todavía sin reseñas» — surface-dark */
   --star-rating-fill-color: var(--color-accent-1); /** Relleno de la estrella ganada — surface-dark. `fill-color` (prussian) coincide con el fondo de la superficie y quedaría invisible. */
   --star-rating-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
 }

package/src/tokens/molecules/confirm-dialog.css

@@ -4,4 +4,5 @@
 
 :root {
   --confirm-dialog-actions-space-before: var(--spacing-5); /** Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto */
+  --confirm-dialog-phrase-space-before: var(--spacing-4); /** Aire entre el cuerpo del diálogo y el campo de la frase de confirmación: menos que el del pie, porque el campo todavía es parte de la pregunta */
 }

package/src/tokens/scss/components/_description-list.scss

@@ -7,7 +7,7 @@ $lxd-description-list-border-color: #111e30; // Color del borde: tinta de la sup
 $lxd-description-list-cell-padding-block: 0.75rem; // Aire vertical de cada celda
 $lxd-description-list-cell-padding-inline: 1rem; // Aire horizontal de cada celda
 $lxd-description-list-term-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del término (dt): la de las etiquetas
-$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: el de las etiquetas, no el de la prosa
+$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: un peldaño por debajo del valor, la misma relación en las dos superficies (14/16 en aplicación, 16/20 en la pública). Es el mismo 14px que daba 0.875rem en aplicación, pero atado al cuerpo de la superficie: dentro de un SiteShell el valor sube a 20px y el término tenía que subir con él
 $lxd-description-list-term-font-weight: 500; // Peso del término
 $lxd-description-list-term-line-height: 1.5; // Interlineado del término
 $lxd-description-list-term-letter-spacing: 0em; // Tracking del término

package/src/tokens/scss/components/_star-rating.scss

@@ -5,7 +5,10 @@ $lxd-star-rating-gap: 0.25rem; // Separación entre estrellas
 $lxd-star-rating-star-size: 1.25em; // Tamaño de la estrella — relativo al texto que la rodea, como el resto de marcas en línea
 $lxd-star-rating-sm-star-size: 1em; // Tamaño de la estrella — talla sm
 $lxd-star-rating-lg-star-size: 1.5em; // Tamaño de la estrella — talla lg
+$lxd-star-rating-count-gap: 0.5rem; // Separación entre las estrellas y el recuento de reseñas: más aire que entre estrella y estrella, para que el recuento se lea como otra cosa
 $lxd-star-rating-track-color: #6b6b6b; // Contorno de la estrella sin ganar
+$lxd-star-rating-count-color: #4a4a4a; // Tinta del recuento de reseñas: texto secundario, es un metadato junto a la valoración
+$lxd-star-rating-empty-color: #4a4a4a; // Tinta del «todavía sin reseñas»: texto secundario, igual que el recuento
 $lxd-star-rating-fill-color: #111e30; // Relleno y contorno de la estrella ganada
 $lxd-star-rating-cursor: pointer; // Cursor sobre una estrella elegible
 $lxd-star-rating-disabled-cursor: not-allowed; // Cursor cuando la entrada está deshabilitada

package/src/tokens/scss/molecules/_confirm-dialog.scss

@@ -2,3 +2,4 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-confirm-dialog-actions-space-before: 1.5rem; // Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto
+$lxd-confirm-dialog-phrase-space-before: 1rem; // Aire entre el cuerpo del diálogo y el campo de la frase de confirmación: menos que el del pie, porque el campo todavía es parte de la pregunta

package/src/tokens/surface-invert.css

@@ -336,6 +336,8 @@ html.dark .surface-invert {
   --sparkline-accent-color: var(--chart-series-1);
   --sparkline-baseline-color: var(--chart-axis-color);
   --star-rating-track-color: var(--color-icon-secondary-on-light);
+  --star-rating-count-color: var(--color-text-muted-on-light);
+  --star-rating-empty-color: var(--color-text-muted-on-light);
   --star-rating-fill-color: var(--color-primary);
   --star-rating-focus-ring-color: var(--color-primary);
   --step-pending-bg: var(--color-background-light);

package/src/tokens/surface-public.css

@@ -31,6 +31,7 @@
   --breadcrumb-font-size: var(--text-paragraph-small-font-size);
   --code-block-font-size: var(--text-paragraph-small-font-size);
   --code-font-size: var(--code-block-font-size);
+  --description-list-term-font-size: var(--text-paragraph-small-font-size);
   --description-list-value-font-size: var(--text-font-size);
   --description-list-value-line-height: var(--text-line-height);
   --empty-state-description-font-size: var(--text-font-size);

package/src/tokens/tokens.json

@@ -1654,7 +1654,10 @@
   "--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",
@@ -2354,6 +2357,7 @@
   "--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",