@studiolxd/brand 50.0.0 → 51.0.1

package/dist/user-menu.js

@@ -1,6 +1,6 @@
 'use client';
 import './user-menu.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { n } from "./_shared/portal-container.js";
 import { Avatar as r } from "./avatar.js";
@@ -10,39 +10,42 @@ import { t as o } from "./_shared/default-render-link.js";
 import { t as s } from "./_shared/dropdownitems.js";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 import { Menu as d } from "@base-ui/react/menu";
-//#region src/stories/molecules/UserMenu/UserMenu.tsx
-var f = i("--user-menu-offset");
-function p(e) {
+//#region src/stories/messages/es/userMenu.ts
+var f = {
+	trigger: (e) => `Cuenta de ${e}`,
+	unread: (e) => `${e} notificaciones sin leer`
+}, p = i("--user-menu-offset");
+function m(e) {
 	return ["user-menu__item", e ? "user-menu__item--destructive" : ""].filter(Boolean).join(" ");
 }
-function m({ name: i, email: m, avatarUrl: h, notificationCount: g, items: _ = [], label: v, compact: y = !1, renderLink: b = o, onOpenChange: x, defaultOpen: S, className: C }) {
-	let w = e("userMenu"), T = n(void 0);
+function h({ name: i, email: h, avatarUrl: g, notificationCount: _, items: v = [], label: y, compact: b = !1, renderLink: x = o, onOpenChange: S, defaultOpen: C, className: w }) {
+	let T = e("userMenu", f), E = n(void 0);
 	return /* @__PURE__ */ u(d.Root, {
-		onOpenChange: (e) => x?.(e),
-		defaultOpen: S,
+		onOpenChange: (e) => S?.(e),
+		defaultOpen: C,
 		children: [/* @__PURE__ */ u(d.Trigger, {
 			className: [
 				"user-menu__trigger",
-				y ? "user-menu__trigger--compact" : "",
-				C
+				b ? "user-menu__trigger--compact" : "",
+				w
 			].filter(Boolean).join(" "),
-			"aria-label": v ?? w("trigger")(i),
+			"aria-label": y ?? T("trigger")(i),
 			children: [
 				/* @__PURE__ */ u("span", {
 					className: "user-menu__avatar-wrap",
 					children: [/* @__PURE__ */ l(r, {
-						src: h,
+						src: g,
 						name: i,
 						alt: "",
 						size: "sm"
-					}), !!g && g > 0 && /* @__PURE__ */ l(a, {
-						count: g,
-						variant: "danger",
-						"aria-label": w("unread")(g),
+					}), !!_ && _ > 0 && /* @__PURE__ */ l(a, {
+						count: _,
+						tone: "error",
+						"aria-label": T("unread")(_),
 						className: "user-menu__notification-badge"
 					})]
 				}),
-				!y && /* @__PURE__ */ l("span", {
+				!b && /* @__PURE__ */ l("span", {
 					className: "user-menu__name",
 					children: i
 				}),
@@ -53,17 +56,17 @@ function m({ name: i, email: m, avatarUrl: h, notificationCount: g, items: _ = [
 				})
 			]
 		}), /* @__PURE__ */ l(d.Portal, {
-			container: T,
+			container: E,
 			children: /* @__PURE__ */ l(d.Positioner, {
 				className: "user-menu__positioner",
-				sideOffset: f,
+				sideOffset: p,
 				align: "start",
 				children: /* @__PURE__ */ u(d.Popup, {
 					className: "user-menu__content",
 					children: [/* @__PURE__ */ u("div", {
 						className: "user-menu__header",
 						children: [/* @__PURE__ */ l(r, {
-							src: h,
+							src: g,
 							name: i,
 							alt: "",
 							size: "md",
@@ -75,15 +78,15 @@ function m({ name: i, email: m, avatarUrl: h, notificationCount: g, items: _ = [
 								children: i
 							}), /* @__PURE__ */ l("span", {
 								className: "user-menu__header-email",
-								children: m
+								children: h
 							})]
 						})]
-					}), _.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(d.Separator, { className: "user-menu__separator" }), s({
-						items: _,
-						itemClass: p,
+					}), v.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(d.Separator, { className: "user-menu__separator" }), s({
+						items: v,
+						itemClass: m,
 						separatorClass: "user-menu__separator",
 						blockClass: "user-menu",
-						renderLink: b
+						renderLink: x
 					})] })]
 				})
 			})
@@ -91,4 +94,4 @@ function m({ name: i, email: m, avatarUrl: h, notificationCount: g, items: _ = [
 	});
 }
 //#endregion
-export { m as UserMenu };
+export { h as UserMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "50.0.0",
+  "version": "51.0.1",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -980,7 +980,7 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "test": "vitest run --project unit --project components",
-    "test:stories": "vitest run --project storybook",
+    "test:stories": "vitest run --project storybook --project storybook-dark",
     "build:all": "pnpm build:tokens && pnpm build:lib && pnpm build:css && pnpm build:tokens-css && pnpm build:fonts-css && pnpm build:icons && pnpm build:email-assets && pnpm build:native-icons",
     "release:check": "node scripts/release-check.mjs",
     "release:npm": "node scripts/publish-npm.mjs"

package/src/tokens/colors.ts

@@ -26,7 +26,7 @@ const refMap: Record<string, string> = {
   ...entries(feedback.color as Group, 'color'),
   ...entries(brand.color as Group, 'color'),
   ...entries(semantic.color.text as Group, 'color.text'),
-  ...entries(semantic.color.background as Group, 'color.background'),
+  ...entries(semantic.color.bg as Group, 'color.bg'),
   ...entries(semantic.color.surface as Group, 'color.surface'),
 };
 
@@ -53,7 +53,7 @@ const b = brand.color as Group;
 const sys = system.color as Group;
 const fb = feedback.color as Group;
 const txt = semantic.color.text as Group;
-const bg = semantic.color.background as Group;
+const bg = semantic.color.bg as Group;
 const surf = semantic.color.surface as Group;
 
 const swatch = (title: string, subtitle: string, tokens: string[], group: Group, prefix = '--color-'): Swatch => ({
@@ -111,7 +111,7 @@ export const semanticSwatches: Swatch[] = [
   swatch('Texto', 'on-light · on-dark', ['on-light', 'on-dark'], txt, '--color-text-'),
   swatch('Texto atenuado', 'muted-on-light · muted-on-dark', ['muted-on-light', 'muted-on-dark'], txt, '--color-text-'),
   swatch('Placeholder', 'placeholder-on-light · placeholder-on-dark', ['placeholder-on-light', 'placeholder-on-dark'], txt, '--color-text-'),
-  swatch('Fondo', 'light · dark', ['light', 'dark'], bg, '--color-background-'),
+  swatch('Fondo', 'light · dark', ['light', 'dark'], bg, '--color-bg-'),
   swatch('Superficie secundaria', 'secondary-on-light · secondary-on-dark', ['secondary-on-light', 'secondary-on-dark'], surf, '--color-surface-'),
   swatch('Superficie invertida', 'inverse-on-light · inverse-on-dark', ['inverse-on-light', 'inverse-on-dark'], surf, '--color-surface-'),
 ];
@@ -120,8 +120,8 @@ export const semanticSwatches: Swatch[] = [
 export interface NamedColor { name: string; token: string; hex: string }
 
 export const surfaces: NamedColor[] = [
-  { name: 'Blanco', token: '--color-background-light', hex: hex(bg.light.$value) },
-  { name: 'Prusia', token: '--color-background-dark', hex: hex(bg.dark.$value) },
+  { name: 'Blanco', token: '--color-bg-light', hex: hex(bg.light.$value) },
+  { name: 'Prusia', token: '--color-bg-dark', hex: hex(bg.dark.$value) },
 ];
 
 /** Todo color que pueda acabar como tinta (texto, icono, borde) sobre una superficie. */
@@ -161,7 +161,7 @@ const tagPair = (variant: string, label: string) => ({
 });
 export const tagPairs = [
   tagPair('info', 'Info'), tagPair('warning', 'Aviso'), tagPair('success', 'Éxito'),
-  tagPair('danger', 'Peligro'), tagPair('neutral', 'Neutral'),
+  tagPair('error', 'Error'), tagPair('neutral', 'Neutral'),
   tagPair('support-1', 'Soporte 1'), tagPair('support-2', 'Soporte 2'),
 ];
 

package/src/tokens/components/accordion.css

@@ -8,7 +8,7 @@
   --accordion-trigger-padding-inline: var(--spacing-6); /** Aire horizontal del disparador */
   --accordion-trigger-gap: var(--spacing-4); /** Hueco entre el texto y el chevron */
   --accordion-index-font-family: var(--font-family-mono); /** Monoespaciada: los números del acordeón numerado se alinean en columna */
-  --accordion-index-min-inline-size: var(--spacing-5); /** Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras */
+  --accordion-index-min-width: var(--spacing-5); /** Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras */
   --accordion-content-padding-block: var(--spacing-6); /** Aire inferior del contenido */
   --accordion-content-padding-inline: var(--spacing-6); /** Aire horizontal del contenido */
   --accordion-transition-duration: var(--motion-duration-slow); /** Duración de abrir/cerrar (cambio de contexto: el panel entra) */

package/src/tokens/components/app-header.css

@@ -10,7 +10,7 @@
   --app-header-flyout-offset: var(--spacing-1); /** Separación compartida entre el borde inferior de la cabecera y el flotante que anclan sus disparadores (menú de usuario, panel de notificaciones): la que ya tenía el menú de usuario */
   --app-header-z-index: var(--z-index-bar); /** Capa de barra fija */
   --app-header-height: calc(var(--app-header-content-height) + 2 * var(--app-header-padding-block)); /** Altura de la barra: compuesta, 56px */
-  --app-header-bg: var(--color-background-light); /** Fondo */
+  --app-header-bg: var(--color-bg-light); /** Fondo */
   --app-header-border-width: var(--border-width-default); /** Borde inferior que la separa del contenido */
   --app-header-border-color: var(--color-primary); /** Color del borde */
 }
@@ -19,6 +19,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --app-header-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --app-header-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --app-header-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }

package/src/tokens/components/async-multi-select.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-  --async-multi-select-input-min-inline-size: 4rem; /** Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra */
+  --async-multi-select-input-min-width: 4rem; /** Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra */
   --async-multi-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
   --async-multi-select-disabled-opacity: var(--async-select-disabled-opacity); /** Opacidad del control deshabilitado: la del buscador de selección única */
   --async-multi-select-pill-remove-opacity: var(--opacity-muted); /** Opacidad del aspa de la píldora en reposo: presente pero en segundo plano */

package/src/tokens/components/breadcrumb.css

@@ -12,7 +12,7 @@
   --breadcrumb-font-weight: var(--font-weight-default); /** Font weight base */
   --breadcrumb-separator-color: var(--color-text-on-light); /** Color del separador */
   --breadcrumb-link-color: var(--color-text-on-light); /** Color del link navegable */
-  --breadcrumb-link-color-hover: var(--color-primary); /** Color del link en hover */
+  --breadcrumb-link-hover-color: var(--color-primary); /** Color del link en hover */
   --breadcrumb-current-color: var(--color-text-on-light); /** Color del item activo (página actual) */
   --breadcrumb-current-font-weight: var(--font-weight-emphasis); /** Peso del item activo */
   --breadcrumb-focus-ring-color: var(--color-primary); /** Color del focus ring */
@@ -25,7 +25,7 @@
 [data-theme="dark"],
 html.dark {
   --breadcrumb-link-color: var(--color-text-on-dark); /** Link color — surface-dark */
-  --breadcrumb-link-color-hover: var(--color-text-on-dark); /** Link hover color — surface-dark */
+  --breadcrumb-link-hover-color: var(--color-text-on-dark); /** Link hover color — surface-dark */
   --breadcrumb-current-color: var(--color-text-on-dark); /** Current color — surface-dark */
   --breadcrumb-separator-color: var(--color-text-on-dark); /** Separator color — surface-dark */
   --breadcrumb-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */

package/src/tokens/components/button.css

@@ -15,6 +15,7 @@
   --button-outline-bg: rgba(0, 0, 0, 0); /** Background */
   --button-text-border-width: 0; /** Border width — 0 para uso inline en texto */
   --button-text-padding-inline: 0; /** Inline (horizontal) padding — 0 para uso inline en texto */
+  --button-text-padding-block-start: 0; /** Padding superior — 0. Anula el `padding-block` de 1px que el agente de usuario pone a `<button>`: sin él, la variante como botón medía 21px y como enlace (`href`) 20px. La caja es el alto de línea más la separación de la línea (`underline-offset`) */
   --button-text-bg: rgba(0, 0, 0, 0); /** Background — always transparent */
   --button-text-border: rgba(0, 0, 0, 0); /** Border color — transparent */
   --button-text-hover-bg: rgba(0, 0, 0, 0); /** Hover background — stays transparent */
@@ -61,7 +62,11 @@
   --button-text-cursor: var(--link-cursor); /** Cursor */
   --button-text-white-space: var(--button-white-space); /** White space */
   --button-text-hover-underline-width: var(--link-hover-underline-width); /** Grosor de la línea en hover y en activo — el de `Link` */
+  --button-text-decoration-line: var(--link-decoration-line); /** Si se subraya en reposo — el de `Link` */
+  --button-text-hover-decoration-line: var(--link-hover-decoration-line); /** Si se subraya en hover y en activo — el de `Link` */
   --button-text-ink-hover-underline-width: var(--link-ink-hover-underline-width); /** tone=ink: grosor del subrayado en hover */
+  --button-text-ink-decoration-line: var(--link-ink-decoration-line); /** tone=ink: si se subraya en reposo */
+  --button-text-ink-hover-decoration-line: var(--link-ink-hover-decoration-line); /** tone=ink: si se subraya en hover */
   --button-text-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
   --button-text-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
   --button-ghost-border-style: var(--button-border-style); /** Border style */
@@ -124,7 +129,7 @@
   --button-text-font-family: var(--button-font-family); /** Font family */
   --button-text-font-size: var(--button-font-size); /** Font size */
   --button-text-line-height: var(--button-line-height); /** Line height */
-  --button-text-underline-offset: var(--link-underline-offset); /** Separación entre el texto y su línea — la de `Link`. Va como `padding-block-end`, así que la línea cae por debajo del icono igual que del texto */
+  --button-text-underline-offset: var(--link-underline-offset); /** Separación entre el texto y su línea — la de `Link`. Se reserva como `padding-block-end` (la caja mide alto de línea más esta separación) y la línea cae en el borde inferior de ese hueco (`text-underline-offset: calc(<separación> - <grosor>)`) */
   --button-text-transition-duration: var(--button-transition-duration); /** Transition duration */
   --button-text-transition-easing: var(--button-transition-easing); /** Transition easing */
   --button-ghost-font-family: var(--button-font-family); /** Font family */
@@ -152,7 +157,7 @@
   --button-outline-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
   --button-text-border-radius: var(--button-border-radius); /** Border radius */
   --button-text-font-weight: var(--button-font-weight); /** Font weight */
-  --button-text-underline-width: var(--link-underline-width); /** Grosor de la línea en reposo. La variante `text` se subraya con la misma técnica que `Link` —sombra interior, no `text-decoration`— porque `text-decoration` no cubre un SVG y un botón con icono quedaba con la línea cortada. Apunta al token de `Link` para que las dos piezas no puedan separarse */
+  --button-text-underline-width: var(--link-underline-width); /** Grosor del subrayado en reposo (`text-decoration-thickness`). La variante `text` se subraya igual que `Link` —`text-decoration` con grosor y distancia de token (D64)—, y apunta a sus tokens para que las dos piezas no puedan separarse. El icono del botón no se subraya */
   --button-text-ink-color: var(--link-ink-color); /** tone=ink: la tinta de la superficie, como en Link */
   --button-text-ink-underline-width: var(--link-ink-underline-width); /** tone=ink: grosor del subrayado en reposo */
   --button-text-disabled-color: var(--button-disabled-color); /** Text color when disabled — light surface */
@@ -178,6 +183,8 @@ html.dark {
   --button-outline-active-border: var(--color-white); /** Active border color — surface-dark */
   --button-outline-focus-ring-color: var(--color-white); /** Focus ring color — surface-dark */
   --button-text-underline-width: var(--link-underline-width); /** Grosor de la línea en reposo — surface-dark: el de `Link`, que sobre fondo oscuro no lleva línea en reposo */
+  --button-text-decoration-line: var(--link-decoration-line); /** Si se subraya en reposo — surface-dark: el de `Link`, sin línea */
+  --button-text-hover-decoration-line: var(--link-hover-decoration-line); /** Si se subraya en hover y activo — surface-dark: el de `Link`, con línea */
   --button-primary-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark (blanco) */
   --button-destructive-color: var(--color-destructive-text-on-dark); /** Text color — surface-dark */
   --button-destructive-border: var(--color-destructive-text-on-dark); /** Border color — surface-dark */

package/src/tokens/components/card.css

@@ -14,7 +14,7 @@
   --card-footer-gap: var(--spacing-2); /** Separación entre acciones del pie */
   --card-border-radius: var(--border-radius-default); /** Radio de esquinas — sin redondeado */
   --card-title-font-weight: var(--font-weight-emphasis); /** Peso del título de la tarjeta */
-  --card-primary-bg: var(--color-accent-1); /** Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.background.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro */
+  --card-primary-bg: var(--color-accent-1); /** Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.bg.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro */
   --card-primary-color: var(--color-primary); /** Variante primary — texto prussian sobre el fondo lavanda */
   --card-accent-1-bg: var(--color-accent-1); /** Variante accent-1 — fondo lavanda */
   --card-accent-1-color: var(--color-text-on-light); /** Variante accent-1 — texto. Color saturado que ya contrasta en cualquier superficie: sin par surface-dark, como las variantes semánticas de Alert/Tag */
@@ -24,7 +24,7 @@
   --card-support-1-color: var(--color-text-on-light); /** Variante support-1 — texto. Sin par surface-dark: mismo motivo que accent-1 */
   --card-support-2-bg: var(--color-support-2); /** Variante support-2 — fondo cayena */
   --card-support-2-color: var(--color-text-on-light); /** Variante support-2 — texto. Sin par surface-dark: mismo motivo que accent-1 */
-  --card-outline-bg: var(--color-background-light); /** Variante outline — fondo blanco (light) */
+  --card-outline-bg: var(--color-bg-light); /** Variante outline — fondo blanco (light) */
   --card-outline-color: var(--color-text-on-light); /** Variante outline — texto oscuro sobre blanco */
   --card-outline-border-color: var(--color-primary); /** Variante outline — borde prussian */
   --card-outline-border-width: var(--border-width-default); /** Variante outline — grosor de borde */
@@ -37,7 +37,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --card-outline-bg: var(--color-background-dark); /** Variante outline — fondo, surface-dark */
+  --card-outline-bg: var(--color-bg-dark); /** Variante outline — fondo, surface-dark */
   --card-outline-color: var(--color-text-on-dark); /** Variante outline — texto, surface-dark */
   --card-outline-border-color: var(--color-text-on-dark); /** Variante outline — borde, surface-dark */
 }

package/src/tokens/components/checkbox.css

@@ -21,13 +21,13 @@
   --checkbox-border-radius: var(--border-radius-default); /** Border radius */
   --checkbox-border-width: var(--border-width-default); /** Border width */
   --checkbox-border-color: var(--color-primary); /** Color del borde */
-  --checkbox-bg-checked: var(--color-primary); /** Fondo cuando está marcado */
+  --checkbox-checked-bg: var(--color-primary); /** Fondo cuando está marcado */
   --checkbox-focus-ring-width: var(--border-width-focus); /** Ancho del anillo de foco */
   --checkbox-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco respecto al borde */
   --checkbox-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
   --checkbox-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (texto/borde, nunca fondo) */
   --checkbox-disabled-border-color: var(--color-disabled-border-on-light); /** Color del borde cuando está deshabilitado */
-  --checkbox-disabled-bg-checked: var(--color-disabled-border-on-light); /** Fondo marcado/indeterminado cuando está deshabilitado */
+  --checkbox-checked-disabled-bg: var(--color-disabled-border-on-light); /** Fondo marcado/indeterminado cuando está deshabilitado */
 }
 
 .surface-dark,
@@ -36,9 +36,9 @@
 html.dark {
   --checkbox-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --checkbox-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
-  --checkbox-bg-checked: var(--color-text-on-dark); /** Background when checked — surface-dark */
-  --checkbox-check-color: var(--color-background-dark); /** Checkmark color — surface-dark */
+  --checkbox-checked-bg: var(--color-text-on-dark); /** Background when checked — surface-dark */
+  --checkbox-check-color: var(--color-bg-dark); /** Checkmark color — surface-dark */
   --checkbox-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
   --checkbox-disabled-border-color: var(--color-text-muted-on-dark); /** Borde deshabilitado — surface-dark */
-  --checkbox-disabled-bg-checked: var(--color-text-muted-on-dark); /** Fondo marcado deshabilitado — surface-dark */
+  --checkbox-checked-disabled-bg: var(--color-text-muted-on-dark); /** Fondo marcado deshabilitado — surface-dark */
 }

package/src/tokens/components/collapsible.css

@@ -13,6 +13,7 @@
   --collapsible-transition-easing: var(--motion-easing-default); /** Easing de abrir y cerrar */
   --collapsible-trigger-font-family: var(--control-font-family); /** Familia tipográfica del disparador */
   --collapsible-trigger-font-size: var(--control-font-size); /** Tamaño de fuente del disparador */
+  --collapsible-trigger-line-height: var(--text-line-height); /** Interlineado del disparador: el del texto corriente. Con `all: unset` el botón lo heredaba de su padre; ahora es fijo y no depende de dónde se monte */
   --collapsible-trigger-color: var(--color-text-on-light); /** Tinta del disparador */
   --collapsible-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --collapsible-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */

package/src/tokens/components/embed-frame.css

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --embed-frame-device-mobile-width: 375px; /** Ancho del marco con `device="mobile"`: el de un teléfono en vertical, el ancho de referencia contra el que el sistema comprueba que una maqueta cabe. No es un punto de corte —el primero, `breakpoint.sm`, es el teléfono apaisado—: es la pantalla que se simula */
+  --embed-frame-device-tablet-width: var(--breakpoint-md); /** Ancho del marco con `device="tablet"` (768px): la tableta. Apunta al breakpoint porque es justo lo que se simula —el ancho en el que el documento de dentro pasa de una columna a varias— */
+}

package/src/tokens/components/file-upload.css

@@ -57,7 +57,7 @@
   --file-upload-thumb-bg: var(--color-surface-secondary-on-light); /** Fondo del thumb para iconos (no imagen) */
   --file-upload-thumb-icon-color: var(--color-icon-secondary-on-light); /** Color del icono de archivo genérico */
   --file-upload-remove-color: var(--color-text-muted-on-light); /** Color del botón eliminar */
-  --file-upload-remove-color-hover: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
+  --file-upload-remove-hover-color: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
   --file-upload-text-font-size: var(--text-font-size); /** El texto del dropzone es texto corriente: hereda el cuerpo de la superficie — talla md */
   --file-upload-sm-text-font-size: var(--text-paragraph-small-font-size); /** Texto del dropzone — talla sm: un peldaño por debajo del cuerpo */
   --file-upload-lg-text-font-size: var(--text-paragraph-large-font-size); /** Texto del dropzone — talla lg: un peldaño por encima */
@@ -80,18 +80,18 @@ html.dark {
   --file-upload-subtext-color: var(--color-text-muted-on-dark); /** Texto secundario — surface-dark */
   --file-upload-icon-color: var(--color-text-on-dark); /** Icono de subida — surface-dark */
   --file-upload-drag-border-color: var(--color-text-on-dark); /** Borde con arrastre activo — surface-dark */
-  --file-upload-drag-bg: var(--color-background-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
+  --file-upload-drag-bg: var(--color-bg-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
   --file-upload-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --file-upload-error-bg: var(--color-surface-secondary-on-dark); /** Fondo en error — surface-dark */
-  --file-upload-item-bg: var(--color-background-dark); /** Fondo de cada archivo — surface-dark */
+  --file-upload-item-bg: var(--color-bg-dark); /** Fondo de cada archivo — surface-dark */
   --file-upload-item-border-color: var(--color-text-on-dark); /** Borde de cada archivo — surface-dark */
   --file-upload-item-name-color: var(--color-text-on-dark); /** Nombre del archivo — surface-dark */
   --file-upload-item-size-color: var(--color-text-muted-on-dark); /** Peso del archivo — surface-dark */
   --file-upload-item-error-color: var(--color-error-text-on-dark); /** Mensaje de error por archivo — surface-dark */
   --file-upload-item-error-border-color: var(--color-error-text-on-dark); /** Borde del archivo con error — surface-dark */
-  --file-upload-item-error-bg: var(--color-background-dark); /** Fondo del archivo con error — surface-dark */
+  --file-upload-item-error-bg: var(--color-bg-dark); /** Fondo del archivo con error — surface-dark */
   --file-upload-thumb-bg: var(--color-surface-secondary-on-dark); /** Fondo de la miniatura — surface-dark */
   --file-upload-thumb-icon-color: var(--color-text-muted-on-dark); /** Icono de archivo genérico — surface-dark: `grey-dark` no llega a 3:1 sobre prusia */
   --file-upload-remove-color: var(--color-text-muted-on-dark); /** Aspa de quitar — surface-dark */
-  --file-upload-remove-color-hover: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
+  --file-upload-remove-hover-color: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
 }

package/src/tokens/components/floating-dock.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --floating-dock-panel-inline-size: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.width-max`: no sale de la escala de espaciado */
-  --floating-dock-panel-block-size: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
+  --floating-dock-panel-width: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.max-width`: no sale de la escala de espaciado */
+  --floating-dock-panel-height: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
   --floating-dock-z-index: var(--z-index-bar); /** Capa del ancla: la del chrome de aplicación (100). Por debajo del velo y del modal, para que un diálogo del producto siga tapando al dock */
   --floating-dock-offset-inline: var(--spacing-5); /** Distancia al borde lateral de la ventana (24px). Se suma al `safe-area-inset` del dispositivo, nunca lo sustituye */
   --floating-dock-offset-block: var(--spacing-5); /** Distancia al borde superior o inferior de la ventana (24px). Se suma al `safe-area-inset` */

package/src/tokens/components/floating-panel.css

@@ -6,7 +6,7 @@
   --floating-panel-z-index: var(--z-index-floating); /** Capa z — por encima del modal (1001) para que los paneles flotantes sean visibles dentro de modales */
   --floating-panel-transition-duration: var(--motion-duration-fast); /** Duración de la animación de entrada/salida */
   --floating-panel-transition-easing: var(--motion-easing-default); /** Easing de la animación */
-  --floating-panel-bg: var(--color-background-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
+  --floating-panel-bg: var(--color-bg-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
   --floating-panel-border-width: var(--border-width-default); /** Grosor del borde */
   --floating-panel-border-color: var(--color-primary); /** Color del borde — prussian en modo claro */
   --floating-panel-border-radius: var(--border-radius-default); /** Sin radio de esquinas */
@@ -17,6 +17,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --floating-panel-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --floating-panel-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --floating-panel-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }

package/src/tokens/components/input.css

@@ -46,7 +46,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --input-bg: var(--color-background-dark); /** Background — surface-dark */
+  --input-bg: var(--color-bg-dark); /** Background — surface-dark */
   --input-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --input-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --input-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
@@ -57,7 +57,7 @@ html.dark {
   --input-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
   --input-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
   --input-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
-  --input-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --input-error-bg: var(--color-bg-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
   --input-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
   --input-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
   --input-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */

package/src/tokens/components/kbd.css

@@ -29,7 +29,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --kbd-bg: rgba(255, 255, 255, 0.08); /** Fondo del keycap — surface-dark: el gris claro no existe en superficie oscura, y el velo translúcido es el mismo recurso que usan Skeleton y Table */
+  --kbd-bg: var(--color-surface-secondary-on-dark); /** Fondo del keycap — surface-dark: la superficie secundaria en su par oscuro, el mismo rol (y el mismo token) que usa Skeleton. Antes era un velo blanco al 8 % escrito a mano */
   --kbd-color: var(--color-text-on-dark); /** Símbolo — surface-dark */
   --kbd-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }

package/src/tokens/components/label.css

@@ -11,6 +11,7 @@
   --label-letter-spacing: var(--letter-spacing-normal); /** Letter spacing */
   --label-font-weight: var(--font-weight-emphasis); /** Font weight */
   --label-color: var(--color-text-on-light); /** Text color */
+  --label-optional-color: var(--color-text-muted-on-light); /** Tinta de la marca « (opcional)» tras la etiqueta de un campo `optional` (D70): la apagada, mismo tamaño que la etiqueta */
 }
 
 .surface-dark,
@@ -18,4 +19,5 @@
 [data-theme="dark"],
 html.dark {
   --label-color: var(--color-text-on-dark); /** Color — surface-dark */
+  --label-optional-color: var(--color-text-muted-on-dark); /** Tinta de la marca de opcional — surface-dark */
 }

package/src/tokens/components/link.css

@@ -3,23 +3,33 @@
  */
 
 :root {
-  --link-hover-underline-width: 0px; /** Grosor de la línea en hover (en claro desaparece) */
+  --link-hover-underline-width: 0px; /** Grosor del subrayado en hover (en claro no hay línea: la quita `link.hover-decoration-line`) */
+  --link-decoration-line: underline; /** Si el enlace se subraya en reposo (`text-decoration-line`): `underline` o `none`. En claro, sí */
+  --link-hover-decoration-line: none; /** Si el enlace se subraya en hover (`text-decoration-line`): en claro la línea desaparece */
+  --link-in-text-hover-underline-width: 0px; /** Enlace dentro de texto corrido: sin línea en hover, en las dos superficies (D41) */
+  --link-in-text-decoration-line: underline; /** Enlace dentro de texto corrido: subrayado en reposo, en las DOS superficies (D41). Sin par oscuro a propósito */
+  --link-in-text-hover-decoration-line: none; /** Enlace dentro de texto corrido: sin subrayado en hover, en las dos superficies (D41) */
   --link-cursor: pointer; /** Cursor */
   --link-ink-hover-underline-width: 0px; /** Tono ink: sin línea en hover */
+  --link-ink-decoration-line: underline; /** Tono ink: subrayado en reposo, en las dos superficies */
+  --link-ink-hover-decoration-line: none; /** Tono ink: sin subrayado en hover */
   --link-accent-1-hover-underline-width: 0px; /** Tono accent-1: sin línea en hover, como accent */
-  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea */
+  --link-accent-1-decoration-line: underline; /** Tono accent-1: subrayado en reposo, en las dos superficies */
+  --link-accent-1-hover-decoration-line: none; /** Tono accent-1: sin subrayado en hover */
+  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea. Se reserva como `padding-block-end` (el hueco de la línea: nada se mueve al aparecer) y la línea se coloca con `text-underline-position: under` y `text-underline-offset: calc(<separación> - <grosor>)`, de modo que cae en el borde inferior de ese hueco */
   --link-icon-gap: var(--spacing-2); /** Aire entre el icono y el texto del enlace */
   --link-color: var(--color-text-on-light); /** El enlace no tiene color propio: es texto, y lo distingue el subrayado */
   --link-hover-color: var(--color-text-on-light); /** Color en hover */
-  --link-underline-width: var(--border-width-default); /** El subrayado es una línea bajo el enlace (borde, no text-decoration): cubre texto e icono y se separa del texto. Su grosor */
+  --link-underline-width: var(--border-width-default); /** Grosor del subrayado (`text-decoration-thickness`). El subrayado es `text-decoration` con grosor y distancia de token (D64): se mantiene en alto contraste, se imprime y lo reconocen las herramientas de accesibilidad. Si se pinta o no lo dice `link.decoration-line`: un grosor 0 no oculta la línea (el navegador pinta como mínimo un píxel de dispositivo) */
+  --link-in-text-underline-width: var(--border-width-default); /** Enlace dentro de texto corrido (párrafo, etiqueta, Prose): línea en reposo, en las DOS superficies. Entre texto, el color no basta para distinguirlo (en oscuro, amarillo sobre blanco da 1,5:1; WCAG 1.4.1 pide 3:1 u otra marca), así que la marca es la línea (D41). Sin par oscuro a propósito */
   --link-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --link-focus-ring-offset: var(--border-width-default); /** Separación entre el enlace y el anillo */
   --link-focus-ring-color: var(--color-primary); /** Anillo de foco */
   --link-ink-color: var(--color-text-on-light); /** Tono ink (enlaces utilitarios: legal, volver): tinta */
   --link-ink-underline-width: var(--border-width-default); /** Tono ink: línea en reposo, en las dos superficies */
-  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 (lavanda): color saturado que ya contrasta en cualquier superficie, sin par surface-dark (mismo motivo que Card/Step/ProgressBar) */
-  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1: mismo color en hover, como accent — lo que cambia es la línea */
-  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, igual en las dos superficies (el color no cambia) */
+  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, en las dos superficies */
+  --link-accent-1-color: var(--link-color); /** Tono accent-1 (lavanda) en superficie clara: cae al tono por defecto. La lavanda sobre blanco da 2,02:1 (D41): el tono solo se ve en superficie oscura */
+  --link-accent-1-hover-color: var(--link-hover-color); /** Tono accent-1 en hover, superficie clara: el del tono por defecto */
 }
 
 .surface-dark,
@@ -27,9 +37,13 @@
 [data-theme="dark"],
 html.dark {
   --link-underline-width: 0px; /** Sin línea en reposo — surface-dark */
+  --link-decoration-line: none; /** Sin subrayado en reposo — surface-dark: el amarillo ya lo distingue fuera del texto corrido */
+  --link-hover-decoration-line: underline; /** Subrayado en hover — surface-dark */
   --link-color: var(--color-accent-2); /** Color — surface-dark: amarillo (accent-2), y sin línea en reposo */
   --link-hover-color: var(--color-accent-2); /** Hover — surface-dark: amarillo, con línea */
   --link-hover-underline-width: var(--border-width-default); /** Línea en hover — surface-dark */
   --link-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --link-ink-color: var(--color-text-on-dark); /** Tono ink — surface-dark: blanco, no amarillo */
+  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 — surface-dark: lavanda, que sobre prusia sí contrasta */
+  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1 en hover — surface-dark: lavanda */
 }

package/src/tokens/components/logo.css

@@ -7,7 +7,7 @@
   --logo-height-md: var(--size-component-md); /** Alto por defecto: cabeceras y formularios de acceso */
   --logo-height-lg: var(--size-component-lg); /** Alto destacado: pie de página */
   --logo-height-xl: var(--icon-size-xl); /** Alto de marca: la cabecera del sitio. Es la talla ilustrativa de la escala de iconos (64px), no una talla de control */
-  --logo-height-xxl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
+  --logo-height-2xl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
   --logo-color: var(--color-text-on-light); /** Color del trazado sobre superficie clara */
 }
 

package/src/tokens/components/message-bubble.css

@@ -16,7 +16,7 @@
   --message-bubble-font-weight: var(--font-weight-default); /** Peso tipográfico */
   --message-bubble-color: var(--color-text-on-light); /** Tinta del mensaje. La misma para los dos emisores: el globo no tiene relleno, así que el texto va sobre la superficie */
   --message-bubble-border-color: var(--color-text-on-light); /** Contorno del globo. Único separador del mensaje: no hay relleno ni sombra */
-  --message-bubble-tail-fill: var(--color-background-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
+  --message-bubble-tail-fill: var(--color-bg-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
 }
 
 .surface-dark,
@@ -25,5 +25,5 @@
 html.dark {
   --message-bubble-color: var(--color-text-on-dark); /** Tinta del mensaje — superficie oscura */
   --message-bubble-border-color: var(--color-text-on-dark); /** Contorno del globo — superficie oscura */
-  --message-bubble-tail-fill: var(--color-background-dark); /** Vaciado de la cola — superficie oscura */
+  --message-bubble-tail-fill: var(--color-bg-dark); /** Vaciado de la cola — superficie oscura */
 }

package/src/tokens/components/multi-select.css

@@ -61,12 +61,12 @@
 [data-theme="dark"],
 html.dark {
   --multi-select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
-  --multi-select-bg: var(--color-background-dark); /** Background — surface-dark */
+  --multi-select-bg: var(--color-bg-dark); /** Background — surface-dark */
   --multi-select-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --multi-select-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --multi-select-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
   --multi-select-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder color — surface-dark */
-  --multi-select-content-bg: var(--color-background-dark); /** Dropdown background — surface-dark */
+  --multi-select-content-bg: var(--color-bg-dark); /** Dropdown background — surface-dark */
   --multi-select-content-border-color: var(--color-text-on-dark); /** Dropdown border color — surface-dark */
   --multi-select-pill-bg: var(--color-accent-1); /** Relleno de las pills — surface-dark: el prusia coincidiría con el lienzo; par de `Button primary` (lavanda con tinta prusia) */
   --multi-select-pill-color: var(--color-primary); /** Texto de las pills — surface-dark */

package/src/tokens/components/number-badge.css

@@ -20,8 +20,8 @@
   --number-badge-support-1-color: var(--color-text-on-light); /** Texto sobre support-1 */
   --number-badge-support-2-bg: var(--color-support-2); /** Fondo support-2 (cayenne) */
   --number-badge-support-2-color: var(--color-text-on-light); /** Texto sobre support-2 */
-  --number-badge-danger-bg: var(--color-error-fill); /** Fondo danger (red) */
-  --number-badge-danger-color: var(--color-error-fill-text); /** Texto sobre danger */
+  --number-badge-error-bg: var(--color-error-fill); /** Fondo error (rojo) */
+  --number-badge-error-color: var(--color-error-fill-text); /** Texto sobre error */
   --number-badge-success-bg: var(--color-success-fill); /** Fondo success (green) */
   --number-badge-success-color: var(--color-success-fill-text); /** Texto sobre success */
   --number-badge-neutral-bg: var(--color-surface-inverse-on-light); /** Fondo neutral (dark grey) */
@@ -33,7 +33,7 @@
 [data-theme="dark"],
 html.dark {
   --number-badge-primary-bg: var(--color-text-on-dark); /** Relleno primary — surface-dark. El prusia es el lienzo y el contador desaparecería; se invierte en vez de pasar a lavanda porque `accent-1` ya es otra variante del mismo componente (mismo caso que `Tag`) */
-  --number-badge-primary-color: var(--color-background-dark); /** Texto sobre primary — surface-dark */
+  --number-badge-primary-color: var(--color-bg-dark); /** Texto sobre primary — surface-dark */
   --number-badge-neutral-bg: var(--color-surface-inverse-on-dark); /** Relleno neutral — surface-dark: la superficie invertida, como en `Tag` */
   --number-badge-neutral-color: var(--color-text-on-light); /** Texto sobre neutral — surface-dark */
 }