@studiolxd/brand 49.28.0 → 51.0.0

package/dist/user-menu.js

@@ -1,96 +1,92 @@
 '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";
-import { NumberBadge as i } from "./number-badge.js";
-import { n as a } from "./_shared/dropdownitems.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Menu as l } from "@base-ui/react/menu";
-//#region src/stories/molecules/UserMenu/UserMenu.tsx
-function u(e) {
-	let t = parseFloat(e);
-	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
-}
-function d() {
-	let e = document.documentElement;
-	return u(getComputedStyle(e).getPropertyValue("--user-menu-offset").trim());
-}
-function f({ children: e, ...t }) {
-	return /* @__PURE__ */ s("a", {
-		...t,
-		children: e
-	});
-}
-function p(e) {
+import { t as i } from "./_shared/side-offset.js";
+import { NumberBadge as a } from "./number-badge.js";
+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/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: u, email: m, avatarUrl: h, notificationCount: g, items: _ = [], label: v, compact: y = !1, renderLink: b = f, onOpenChange: x, defaultOpen: S }) {
-	let C = e("userMenu"), w = n(void 0);
-	return /* @__PURE__ */ c(l.Root, {
-		onOpenChange: (e) => x?.(e),
-		defaultOpen: S,
-		children: [/* @__PURE__ */ c(l.Trigger, {
-			className: ["user-menu__trigger", y ? "user-menu__trigger--compact" : ""].filter(Boolean).join(" "),
-			"aria-label": v ?? C("trigger")(u),
+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) => S?.(e),
+		defaultOpen: C,
+		children: [/* @__PURE__ */ u(d.Trigger, {
+			className: [
+				"user-menu__trigger",
+				b ? "user-menu__trigger--compact" : "",
+				w
+			].filter(Boolean).join(" "),
+			"aria-label": y ?? T("trigger")(i),
 			children: [
-				/* @__PURE__ */ c("span", {
+				/* @__PURE__ */ u("span", {
 					className: "user-menu__avatar-wrap",
-					children: [/* @__PURE__ */ s(r, {
-						src: h,
-						name: u,
+					children: [/* @__PURE__ */ l(r, {
+						src: g,
+						name: i,
 						alt: "",
 						size: "sm"
-					}), !!g && g > 0 && /* @__PURE__ */ s(i, {
-						count: g,
-						variant: "danger",
-						"aria-label": C("unread")(g),
+					}), !!_ && _ > 0 && /* @__PURE__ */ l(a, {
+						count: _,
+						tone: "error",
+						"aria-label": T("unread")(_),
 						className: "user-menu__notification-badge"
 					})]
 				}),
-				!y && /* @__PURE__ */ s("span", {
+				!b && /* @__PURE__ */ l("span", {
 					className: "user-menu__name",
-					children: u
+					children: i
 				}),
-				/* @__PURE__ */ s(t, {
+				/* @__PURE__ */ l(t, {
 					name: "chevron",
 					size: "sm",
 					className: "user-menu__chevron"
 				})
 			]
-		}), /* @__PURE__ */ s(l.Portal, {
-			container: w,
-			children: /* @__PURE__ */ s(l.Positioner, {
+		}), /* @__PURE__ */ l(d.Portal, {
+			container: E,
+			children: /* @__PURE__ */ l(d.Positioner, {
 				className: "user-menu__positioner",
-				sideOffset: d,
+				sideOffset: p,
 				align: "start",
-				children: /* @__PURE__ */ c(l.Popup, {
+				children: /* @__PURE__ */ u(d.Popup, {
 					className: "user-menu__content",
-					children: [/* @__PURE__ */ c("div", {
+					children: [/* @__PURE__ */ u("div", {
 						className: "user-menu__header",
-						children: [/* @__PURE__ */ s(r, {
-							src: h,
-							name: u,
+						children: [/* @__PURE__ */ l(r, {
+							src: g,
+							name: i,
 							alt: "",
 							size: "md",
 							className: "user-menu__header-avatar"
-						}), /* @__PURE__ */ c("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "user-menu__header-text",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ l("span", {
 								className: "user-menu__header-name",
-								children: u
-							}), /* @__PURE__ */ s("span", {
+								children: i
+							}), /* @__PURE__ */ l("span", {
 								className: "user-menu__header-email",
-								children: m
+								children: h
 							})]
 						})]
-					}), _.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l.Separator, { className: "user-menu__separator" }), a({
-						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
 					})] })]
 				})
 			})
@@ -98,4 +94,4 @@ function m({ name: u, email: m, avatarUrl: h, notificationCount: g, items: _ = [
 	});
 }
 //#endregion
-export { m as UserMenu };
+export { h as UserMenu };

package/dist/visuallyhidden.css

@@ -1 +1 @@
-.visually-hidden{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
+.visually-hidden{clip-path:inset(50%);white-space:nowrap;border-width:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.28.0",
+  "version": "51.0.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/studiolxd/brand.git"
   },
   "homepage": "https://github.com/studiolxd/brand#readme",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
   "type": "module",
   "exports": {
     "./accordion": {
@@ -207,6 +211,11 @@
       "import": "./dist/copy-button.js",
       "default": "./dist/copy-button.js"
     },
+    "./floating-toolbar": {
+      "types": "./dist/_types/molecules/FloatingToolbar/FloatingToolbar.d.ts",
+      "import": "./dist/floating-toolbar.js",
+      "default": "./dist/floating-toolbar.js"
+    },
     "./recovery-codes": {
       "types": "./dist/_types/molecules/RecoveryCodes/RecoveryCodes.d.ts",
       "import": "./dist/recovery-codes.js",
@@ -950,21 +959,18 @@
   "files": [
     "dist",
     "src/tokens",
-    "CHANGELOG.md"
+    "!src/tokens/**/*.test.ts"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
     "build:lib": "rm -rf dist && vite build --config vite.lib.config.ts && tsc -b --force tsconfig.lib.json && node scripts/post-build.mjs",
-    "build:css": "postcss src/index.css --use postcss-import -o dist/brand.css",
-    "build:tokens-css": "postcss src/tokens/index.css --use postcss-import -o dist/tokens.css",
+    "build:css": "postcss src/index.css --use postcss-import --no-map -o dist/brand.css",
+    "build:tokens-css": "postcss src/tokens/index.css --use postcss-import --no-map -o dist/tokens.css",
     "build:fonts-css": "node scripts/build-fonts-css.mjs",
     "build:icons": "node scripts/build-icons.mjs",
     "lint": "eslint .",
-    "preview": "vite preview",
     "build:tokens": "node sd.config.mjs",
     "build:email-assets": "node scripts/build-email-assets.mjs",
     "build:native-fonts": "python3 scripts/build-native-fonts.py",
@@ -974,29 +980,35 @@
     "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"
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@tanstack/react-table": "^8.21.3",
-    "react-image-crop": "^11.1.2",
     "react-phone-number-input": "^3.4.16"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
+    "@tanstack/react-table": "^8.21.3",
+    "react": ">=19",
+    "react-dom": ">=19",
     "react-email": ">=6",
-    "react-hook-form": ">=7"
+    "react-hook-form": ">=7",
+    "react-image-crop": "^11.1.2"
   },
   "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    },
     "react-email": {
       "optional": true
     },
     "react-hook-form": {
       "optional": true
+    },
+    "react-image-crop": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -1007,6 +1019,7 @@
     "@storybook/addon-mcp": "^10.6.0",
     "@storybook/addon-vitest": "^10.6.0",
     "@storybook/react-vite": "^10.6.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.5",
@@ -1033,7 +1046,7 @@
     "react-dom": "^19.2.4",
     "react-email": "^6.9.3",
     "react-hook-form": "^7.85.0",
-    "react-phone-number-input": "^3.4.16",
+    "react-image-crop": "^11.1.2",
     "remark-gfm": "^4.0.1",
     "sharp": "^0.35.4",
     "storybook": "^10.6.0",
@@ -1042,7 +1055,6 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.0",
     "vite": "^8.0.1",
-    "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.2"
   },
   "sideEffects": [

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,11 @@
  */
 
 :root {
+  --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 */
+  --async-multi-select-pill-remove-hover-opacity: var(--opacity-full); /** Opacidad del aspa de la píldora bajo el puntero */
   --async-multi-select-content-max-height: var(--multi-select-content-max-height); /** Hereda de `multi-select.content-max-height`: el buscador múltiple tiene la misma cara que el control síncrono */
   --async-multi-select-border-style: var(--multi-select-border-style); /** Hereda de `multi-select.border-style`: el buscador múltiple tiene la misma cara que el control síncrono */
   --async-multi-select-content-gap: var(--multi-select-content-gap); /** Hereda de `multi-select.content-gap`: el buscador múltiple tiene la misma cara que el control síncrono */

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

@@ -3,8 +3,11 @@
  */
 
 :root {
+  --async-select-disabled-opacity: 0.5; /** Opacidad del control deshabilitado. 0.5 no está en la escala `opacity` (la más cercana, `opacity.disabled`, es 0.4): se conserva el valor de siempre */
   --async-select-border-style: var(--select-border-style); /** Hereda de `select.border-style`: el buscador tiene la misma cara que el control síncrono */
   --async-select-disabled-cursor: var(--input-disabled-cursor); /** Cursor cuando está deshabilitado: el de los campos */
+  --async-select-clear-opacity: var(--opacity-muted); /** Opacidad del botón de limpiar en reposo: presente pero en segundo plano */
+  --async-select-clear-hover-opacity: var(--opacity-full); /** Opacidad del botón de limpiar bajo el puntero */
   --async-select-content-max-height: var(--select-content-max-height); /** Hereda de `select.content-max-height`: el buscador tiene la misma cara que el control síncrono */
   --async-select-bg: var(--select-bg); /** Hereda de `select.bg`: el buscador tiene la misma cara que el control síncrono */
   --async-select-content-bg: var(--select-content-bg); /** Hereda de `select.content-bg`: el buscador tiene la misma cara que el control síncrono */

package/src/tokens/components/autocomplete.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --autocomplete-disabled-opacity: var(--async-select-disabled-opacity); /** Hereda de `async-select.disabled-opacity`: el autocompletado tiene la misma cara que el buscador y el Select */
   --autocomplete-border-style: var(--async-select-border-style); /** Hereda de `async-select.border-style`: el autocompletado tiene la misma cara que el buscador y el Select */
   --autocomplete-disabled-cursor: var(--async-select-disabled-cursor); /** Hereda de `async-select.disabled-cursor`: el autocompletado tiene la misma cara que el buscador y el Select */
   --autocomplete-content-max-height: var(--async-select-content-max-height); /** Hereda de `async-select.content-max-height`: el autocompletado tiene la misma cara que el buscador y el Select */

package/src/tokens/components/breadcrumb.css

@@ -4,8 +4,6 @@
 
 :root {
   --breadcrumb-padding-inline: 0; /** Sin padding lateral */
-  --breadcrumb-link-text-decoration: none; /** OBSOLETO — no viste nada. El subrayado de las migas es la línea del sistema, la misma de cualquier enlace, y no `text-decoration`. Se conserva en `none` para no romper a quien lo tenga referenciado; a retirar en el próximo major */
-  --breadcrumb-link-text-decoration-hover: none; /** OBSOLETO — no viste nada. Valía `underline` y era la vía por la que el subrayado de `text-decoration` seguía entrando en el DS. A retirar en el próximo major */
   --breadcrumb-font-family: var(--font-family-sans); /** Font family */
   --breadcrumb-line-height: var(--line-height-none); /** Single-line */
   --breadcrumb-gap: var(--spacing-2); /** Gap entre items y separadores */
@@ -14,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 */
@@ -27,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

@@ -4,7 +4,6 @@
 
 :root {
   --button-border-style: solid; /** Border style */
-  --button-border-color: rgba(0, 0, 0, 0); /** Default border color — overridden by variants */
   --button-justify-content: center; /** Justify content */
   --button-cursor: pointer; /** Cursor */
   --button-white-space: nowrap; /** White space */
@@ -16,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 */
@@ -50,14 +50,6 @@
   --button-primary-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
   --button-primary-disabled-color: var(--color-white); /** Text color when disabled — white on grey background */
   --button-primary-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
-  --button-destructive-border-style: var(--button-border-style); /** Border style */
-  --button-destructive-justify-content: var(--button-justify-content); /** Justify content */
-  --button-destructive-cursor: var(--button-cursor); /** Cursor */
-  --button-destructive-white-space: var(--button-white-space); /** White space */
-  --button-destructive-text-decoration: var(--button-text-decoration); /** Text decoration */
-  --button-destructive-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
-  --button-destructive-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
-  --button-destructive-bg: var(--color-white); /** Background */
   --button-outline-border-style: var(--button-border-style); /** Border style */
   --button-outline-justify-content: var(--button-justify-content); /** Justify content */
   --button-outline-cursor: var(--button-cursor); /** Cursor */
@@ -70,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 */
@@ -83,7 +79,6 @@
   --button-border-radius: var(--border-radius-default); /** Rectangular: el radio del sistema (0), como los campos */
   --button-border-width: var(--border-width-default); /** Border width */
   --button-font-weight: var(--font-weight-default); /** Font weight */
-  --button-disabled-bg: var(--color-disabled-bg-on-light); /** Background when disabled — only form button changes bg */
   --button-disabled-color: var(--color-disabled-text-on-light); /** Text color when disabled — light surface */
   --button-disabled-border: var(--color-disabled-text-on-light); /** Border color when disabled — light surface, matches text for contrast */
   --button-focus-ring-width: var(--border-width-focus); /** Focus ring width */
@@ -104,13 +99,6 @@
   --button-primary-active-bg: var(--color-accent-2); /** Active background */
   --button-primary-active-color: var(--color-primary); /** Active text color */
   --button-primary-active-border: var(--color-accent-2); /** Active border color */
-  --button-destructive-font-family: var(--button-font-family); /** Font family */
-  --button-destructive-font-size: var(--button-font-size); /** Font size */
-  --button-destructive-line-height: var(--button-line-height); /** Line height */
-  --button-destructive-transition-duration: var(--button-transition-duration); /** Transition duration */
-  --button-destructive-transition-easing: var(--button-transition-easing); /** Transition easing */
-  --button-destructive-padding-inline: var(--button-padding-inline); /** Inline (horizontal) padding */
-  --button-destructive-focus-ring-offset: var(--button-focus-ring-offset); /** Focus ring offset */
   --button-destructive-focus-ring-color: var(--color-destructive-text-on-light); /** Focus ring color */
   --button-destructive-color: var(--color-destructive-text-on-light); /** Text color */
   --button-destructive-border: var(--color-destructive-text-on-light); /** Border color */
@@ -141,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 */
@@ -163,19 +151,13 @@
   --button-primary-disabled-bg: var(--button-disabled-border); /** Background when disabled — filled with the disabled border color */
   --button-primary-disabled-border: var(--button-disabled-border); /** Border color when disabled */
   --button-primary-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
-  --button-destructive-border-radius: var(--button-border-radius); /** Border radius */
-  --button-destructive-border-width: var(--button-border-width); /** Border width */
-  --button-destructive-font-weight: var(--button-font-weight); /** Font weight */
-  --button-destructive-disabled-color: var(--button-disabled-color); /** Text color when disabled */
-  --button-destructive-disabled-border: var(--button-disabled-border); /** Border color when disabled */
-  --button-destructive-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
   --button-outline-border-radius: var(--button-border-radius); /** Border radius */
   --button-outline-border-width: var(--button-border-width); /** Border width */
   --button-outline-font-weight: var(--button-font-weight); /** Font weight */
   --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 */
@@ -201,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/control.css

@@ -4,14 +4,10 @@
 
 :root {
   --control-border-style: solid; /** Estilo del borde */
-  --control-cursor: text; /** Cursor por defecto */
-  --control-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
   --control-height: var(--size-component-md); /** Altura del control de una línea: la talla md del sistema. Es la talla de PARTIDA, y la superficie pública la apunta a `lg-height` */
   --control-font-family: var(--font-family-sans); /** Familia tipográfica */
   --control-font-size: var(--font-size-2); /** Tamaño de fuente */
   --control-line-height: var(--line-height-none); /** Interlineado */
-  --control-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
-  --control-transition-easing: var(--motion-easing-default); /** Curva de animación */
   --control-padding-inline: var(--spacing-4); /** Padding inline — compartido por controles y elementos de formulario */
   --control-padding-block: var(--spacing-4); /** Padding block — solo para lo multilínea (Textarea) y para el aire de las filas de formulario. Los controles de una línea fijan su altura a la talla (`height`) con padding vertical 0 */
   --control-lg-height: var(--size-component-lg); /** Altura del control en talla lg: la talla lg del sistema. Es lo que la superficie pública pone como talla de partida (`.site-shell`) */

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— */
+}