@studiolxd/brand 38.12.4

package/src/tokens/molecules/search-form.css

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --search-form-inline-size: var(--input-width); /** Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él */
+  --search-form-xl-height: var(--spacing-8); /** Altura del campo — xl (64px, el peldaño de espaciado que sigue a los 48 de lg). No es una talla de control del sistema: solo existe aquí, para el buscador del menú del sitio */
+  --search-form-xl-padding-inline: var(--spacing-6); /** Aire horizontal del campo — xl: el peldaño de espaciado siguiente al de lg */
+  --search-form-xl-font-size: var(--font-size-5); /** Cuerpo de letra del campo — xl (28px): la escala de títulos pequeños, no la del cuerpo de texto. A esta talla el buscador se lee como un titular */
+  --search-form-xl-icon-size: var(--font-size-6); /** Tamaño del glifo de la flecha — xl (32px): la mitad del hueco, la misma proporción que guardan md y lg */
+  --search-form-submit-slot-size: var(--size-component-md); /** Lado del hueco que ocupa la flecha dentro del campo: la talla md, la misma que el campo — así el adorno queda cuadrado sobre el control */
+  --search-form-submit-sm-slot-size: var(--size-component-sm); /** Lado del hueco de la flecha — sm */
+  --search-form-submit-lg-slot-size: var(--size-component-lg); /** Lado del hueco de la flecha — lg */
+  --search-form-submit-icon-size: var(--font-size-3); /** Tamaño del glifo de la flecha — md (20px, acorde al campo de 40). El mismo peldaño que la lupa y el aspa de InputField */
+  --search-form-submit-sm-icon-size: var(--icon-size-sm); /** Tamaño del glifo — sm (16px) */
+  --search-form-submit-lg-icon-size: var(--icon-size-md); /** Tamaño del glifo — lg (24px) */
+  --search-form-xl-slot-size: var(--search-form-xl-height); /** Lado del hueco de la flecha — xl: cuadrado a la altura del campo, como en el resto de tallas */
+  --search-form-submit-color: var(--color-primary); /** Color de la flecha: la tinta del campo, prusia sobre claro */
+  --search-form-submit-hover-color: var(--color-primary); /** Color de la flecha en hover: la misma tinta. El adorno no pinta fondo al pasar el puntero —la regla del sistema— y la tinta no se atenúa */
+  --search-form-submit-input-padding-inline-end: var(--search-form-submit-slot-size); /** Padding derecho del campo — el texto termina donde empieza la flecha, que va dentro del borde */
+  --search-form-submit-disabled-color: var(--input-disabled-color); /** Color de la flecha con el campo deshabilitado: el del texto del campo deshabilitado */
+  --search-form-submit-focus-ring-width: var(--control-focus-ring-width); /** Grosor del anillo de foco de la flecha: el del sistema. Es lo único que marca el foco, porque el adorno no tiene fondo */
+  --search-form-submit-focus-ring-color: var(--input-focus-border-color); /** Color del anillo de foco de la flecha: el del borde del campo en foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --search-form-submit-color: var(--color-text-on-dark); /** Color de la flecha — surface-dark (blanco) */
+  --search-form-submit-hover-color: var(--color-text-on-dark); /** Color de la flecha en hover — surface-dark */
+  --search-form-submit-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco de la flecha — surface-dark */
+  --search-form-submit-disabled-color: var(--input-disabled-color); /** Color de la flecha deshabilitada — surface-dark */
+}

package/src/tokens/molecules/search-form.ts

@@ -0,0 +1,7 @@
+import searchForm from '../../../tokens/molecule/search-form.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(searchForm as never);
+
+export const searchFormBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const searchFormDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/select-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --select-field-gap: var(--spacing-2); /** Espacio entre label, select, helper y error */
+  --select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --select-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --select-field-error-color: var(--color-error-text-on-dark); /** Mensaje de error — surface-dark */
+  --select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/select-field.ts

@@ -0,0 +1,4 @@
+import selectField from '../../../tokens/molecule/select-field.json';
+import { flattenTokens } from '../utils';
+
+export const selectFieldTokens = flattenTokens(selectField as never);

package/src/tokens/molecules/sheet.css

@@ -0,0 +1,33 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --sheet-inline-size: min(20rem, 85vw); /** Ancho cuando entra por un lateral */
+  --sheet-block-size: 85vh; /** Alto máximo cuando entra por arriba o abajo */
+  --sheet-gap: var(--spacing-4); /** Separación entre bloques del panel */
+  --sheet-footer-gap: var(--spacing-2); /** Separación entre acciones del pie */
+  --sheet-close-inset: var(--spacing-3); /** Distancia del botón de cierre a la esquina */
+  --sheet-z-index: var(--modal-z-index); /** Capa z del panel */
+  --sheet-padding-block: var(--modal-padding-block); /** Padding vertical del panel */
+  --sheet-padding-inline: var(--modal-padding-inline); /** Padding horizontal del panel */
+  --sheet-backdrop-bg: var(--modal-backdrop-bg); /** Color del velo */
+  --sheet-backdrop-opacity: var(--modal-backdrop-opacity); /** Opacidad del velo */
+  --sheet-backdrop-z-index: var(--modal-backdrop-z-index); /** Capa z del velo */
+  --sheet-header-gap: var(--modal-header-gap); /** Separación dentro de la cabecera */
+  --sheet-title-font-size: var(--modal-title-font-size); /** Tamaño del título */
+  --sheet-close-size: var(--modal-close-size); /** Caja del botón de cerrar — misma talla que Modal */
+  --sheet-close-icon-size: var(--modal-close-icon-size); /** Glifo del botón de cerrar — mismo que Modal */
+  --sheet-transition-duration: var(--modal-transition-duration); /** Duración de la animación de entrada/salida */
+  --sheet-transition-easing: var(--modal-transition-easing); /** Easing de la animación */
+  --sheet-bg: var(--modal-bg); /** Fondo del panel */
+  --sheet-shadow: var(--modal-shadow); /** Sombra del panel */
+  --sheet-title-color: var(--modal-title-color); /** Color del título */
+  --sheet-title-font-weight: var(--modal-title-font-weight); /** Peso del título */
+  --sheet-description-font-size: var(--modal-description-font-size); /** Tamaño del texto descriptivo — hereda el cuerpo de la superficie, como en Modal */
+  --sheet-description-color: var(--modal-description-color); /** Color del texto descriptivo */
+  --sheet-close-color: var(--modal-close-color); /** Color del glifo — la tinta, ya en reposo, igual que Modal */
+  --sheet-close-focus-ring-width: var(--modal-close-focus-ring-width); /** Grosor del anillo de foco */
+  --sheet-close-focus-ring-offset: var(--modal-close-focus-ring-offset); /** Separación del anillo de foco */
+  --sheet-close-focus-ring-color: var(--modal-close-focus-ring-color); /** Color del anillo de foco */
+}

package/src/tokens/molecules/sidebar-nav.css

@@ -0,0 +1,53 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --sidebar-nav-item-empty-cursor: not-allowed; /** Cursor de una entrada vacía */
+  --sidebar-nav-gap: var(--spacing-1); /** Gap entre grupos */
+  --sidebar-nav-group-trigger-padding-block: var(--spacing-2); /** Padding vertical del trigger de grupo */
+  --sidebar-nav-group-trigger-padding-inline: var(--spacing-3); /** Padding horizontal del trigger de grupo */
+  --sidebar-nav-group-trigger-gap: var(--spacing-2); /** Gap entre texto y chevron del grupo */
+  --sidebar-nav-group-label-font-size: var(--font-size-2); /** Tamaño de texto de etiqueta de grupo */
+  --sidebar-nav-item-padding-block: var(--spacing-2); /** Padding vertical de cada ítem */
+  --sidebar-nav-item-padding-inline: var(--spacing-4); /** Padding horizontal de cada ítem */
+  --sidebar-nav-item-font-size: var(--font-size-2); /** Tamaño de texto de ítems */
+  --sidebar-nav-item-line-height: var(--line-height-snug); /** Interlineado de ítems */
+  --sidebar-nav-item-gap: var(--spacing-1); /** Gap entre ítems dentro de un grupo */
+  --sidebar-nav-rail-item-size: var(--size-component-md); /** En rail cada entrada es un cuadrado a talla md, como un botón de icono */
+  --sidebar-nav-item-icon-size: var(--size-component-sm); /** Icono de ítem: talla sm del sistema */
+  --sidebar-nav-item-icon-gap: var(--spacing-2); /** Gap entre icono y texto del ítem */
+  --sidebar-nav-transition-duration: var(--motion-duration-fast); /** Duración de transición de ítems */
+  --sidebar-nav-transition-easing: var(--motion-easing-in-out); /** Easing de transición de ítems */
+  --sidebar-nav-group-transition-duration: var(--motion-duration-fast); /** Duración de la animación de apertura/cierre de grupo */
+  --sidebar-nav-group-transition-easing: var(--motion-easing-in-out); /** Easing de la animación de apertura/cierre de grupo */
+  --sidebar-nav-item-empty-mark-font-size: var(--font-size-1); /** Tamaño de la marca «sin docs» */
+  --sidebar-nav-group-label-font-weight: var(--font-weight-emphasis); /** Peso del texto de etiqueta de grupo */
+  --sidebar-nav-group-label-color: var(--color-primary); /** Color de la etiqueta de grupo */
+  --sidebar-nav-item-padding-inline-start: calc(var(--sidebar-nav-group-trigger-padding-inline) + var(--sidebar-nav-item-icon-size) + var(--sidebar-nav-item-icon-gap)); /** Sangría de los ítems: alineados con el texto de la cabecera de su grupo (aire + icono + gap) */
+  --sidebar-nav-item-border-radius: var(--border-radius-default); /** Radio de cada ítem */
+  --sidebar-nav-item-font-weight: var(--font-weight-default); /** Peso de ítems */
+  --sidebar-nav-item-color: var(--color-text-on-light); /** Color de ítems */
+  --sidebar-nav-item-active-color: var(--color-primary); /** Color de ítem activo */
+  --sidebar-nav-item-active-font-weight: var(--font-weight-emphasis); /** Peso de ítem activo */
+  --sidebar-nav-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --sidebar-nav-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --sidebar-nav-rail-active-bar-width: var(--border-width-focus); /** Barra al borde que marca la sección activa en rail */
+  --sidebar-nav-item-empty-color: var(--color-text-muted-on-light); /** Tinta de una entrada vacía: sigue leyéndose, pero no invita a pulsarla */
+  --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-light); /** Tinta de la marca «sin docs» */
+  --sidebar-nav-item-hover-line-width: var(--border-width-default); /** Grosor de la línea que marca el ítem bajo el puntero. El hover no pinta relleno (regla de Colores): deja una línea de tinta bajo el ítem, el mismo grafismo del subrayado de `Link` */
+  --sidebar-nav-item-hover-line-color: var(--color-primary); /** Color de la línea de hover — tinta de la superficie */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --sidebar-nav-group-label-color: var(--color-text-muted-on-dark); /** Color de la etiqueta de grupo — surface-dark. `group-label-color` (prussian) sería invisible sobre fondo oscuro. */
+  --sidebar-nav-item-color: var(--color-text-on-dark); /** Color de ítems — surface-dark */
+  --sidebar-nav-item-active-color: var(--color-accent-1); /** Color de ítem activo — surface-dark. `item-active-color` (prussian) sería invisible; se usa accent-1 como acento de estado activo, igual que Switcher. */
+  --sidebar-nav-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. Deliberadamente blanco, no accent-1: el ring debe seguir el patrón estándar del sistema aunque el ítem activo use lavanda como acento. */
+  --sidebar-nav-item-empty-color: var(--color-text-muted-on-dark); /** Tinta de una entrada vacía — surface-dark */
+  --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-dark); /** Tinta de la marca «sin docs» — surface-dark */
+  --sidebar-nav-item-hover-line-color: var(--color-text-on-dark); /** Color de la línea de hover — surface-dark */
+}

package/src/tokens/molecules/site-nav.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --site-nav-columns-max: 5; /** Tope de columnas en el breakpoint ancho: a partir de ahí el panel no sigue ensanchando columnas por grupo */
+  --site-nav-group-gap: var(--spacing-6); /** Separación entre grupos: entre columnas en escritorio, entre bloques en móvil */
+  --site-nav-label-margin-block-end: var(--spacing-4); /** Aire entre la cabecera y sus enlaces: un paso más que entre enlaces, que la cabecera no se pegue al primero */
+  --site-nav-item-gap: var(--spacing-3); /** Separación entre enlaces de un grupo */
+  --site-nav-item-font-size: var(--font-size-4); /** Enlaces: un punto por debajo de la cabecera del grupo (Heading talla 6 = font-size.5) */
+  --site-nav-item-line-height: var(--line-height-snug); /** Enlaces */
+  --site-nav-item-font-weight: var(--font-weight-default); /** Enlaces */
+  --site-nav-item-color: var(--color-text-on-light); /** Enlaces */
+  --site-nav-item-hover-color: var(--color-text-on-light); /** Enlaces en hover: en claro no cambia el color, aparece la línea */
+  --site-nav-item-underline-offset: var(--border-width-focus); /** Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer */
+  --site-nav-item-current-font-weight: var(--font-weight-default); /** Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta) */
+  --site-nav-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
+  --site-nav-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --site-nav-focus-ring-color: var(--color-primary); /** Anillo de foco */
+  --site-nav-item-hover-line-width: var(--link-underline-width); /** Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --site-nav-item-hover-line-width: 0px; /** Enlaces en hover — surface-dark: sin línea, cambia el color */
+  --site-nav-item-color: var(--color-text-on-dark); /** Enlaces — surface-dark */
+  --site-nav-item-hover-color: var(--color-accent-2); /** Enlaces en hover — surface-dark: amarillo (accent-2) en vez de línea */
+  --site-nav-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/site-nav.ts

@@ -0,0 +1,4 @@
+import siteNav from '../../../tokens/molecule/site-nav.json';
+import { flattenTokens } from '../utils';
+
+export const siteNavTokens = flattenTokens(siteNav as never);

package/src/tokens/molecules/stat-tile.css

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --stat-tile-bg: rgba(0, 0, 0, 0); /** Fondo: ninguno. La cifra se lee sobre el lienzo de la página, así que la baldosa funciona igual en las dos superficies sin un fondo propio que mantener */
+  --stat-tile-gap: var(--spacing-2); /** Aire entre las piezas de la baldosa: etiqueta, cifra, delta y descripción */
+  --stat-tile-label-gap: var(--spacing-2); /** Aire entre el icono y la etiqueta */
+  --stat-tile-icon-size: var(--icon-size-md); /** Talla del icono de la baldosa */
+  --stat-tile-value-line-height: var(--line-height-tight); /** Interlineado de la cifra */
+  --stat-tile-value-letter-spacing: var(--letter-spacing-tight); /** Espaciado de la cifra — el de los títulos */
+  --stat-tile-sm-padding-inline: var(--spacing-3); /** Padding horizontal — talla sm */
+  --stat-tile-sm-padding-block: var(--spacing-3); /** Padding vertical — talla sm */
+  --stat-tile-sm-label-font-size: var(--font-size-1); /** Cuerpo de la etiqueta — talla sm */
+  --stat-tile-sm-gap: var(--spacing-1); /** Aire entre piezas — talla sm */
+  --stat-tile-delta-gap: var(--spacing-1); /** Aire entre la flecha de tendencia y su cifra dentro del delta */
+  --stat-tile-delta-icon-size: var(--icon-size-sm); /** Talla de la flecha de tendencia */
+  --stat-tile-description-line-height: var(--line-height-normal); /** Interlineado de la descripción */
+  --stat-tile-padding-inline: var(--card-padding-inline); /** Padding horizontal — el de las superficies del sistema */
+  --stat-tile-padding-block-start: var(--card-padding-block-start); /** Padding superior — el de las superficies del sistema */
+  --stat-tile-padding-block-end: var(--card-padding-block-end); /** Padding inferior — el de las superficies del sistema */
+  --stat-tile-label-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de la etiqueta: un peldaño por debajo, porque la protagonista es la cifra */
+  --stat-tile-label-font-weight: var(--font-weight-default); /** Peso de la etiqueta */
+  --stat-tile-label-color: var(--color-text-muted-on-light); /** Color de la etiqueta — atenuado */
+  --stat-tile-icon-color: var(--color-text-muted-on-light); /** Color del icono — atenuado, como la etiqueta a la que acompaña */
+  --stat-tile-value-font-size: var(--text-size-7); /** Cuerpo de la cifra: paso 7 de la escala de títulos, el mismo que un h2. Sube un peldaño en la superficie pública */
+  --stat-tile-value-font-weight: var(--font-weight-emphasis); /** Peso de la cifra */
+  --stat-tile-value-color: var(--color-text-on-light); /** Color de la cifra — tinta de la superficie */
+  --stat-tile-sm-value-font-size: var(--text-size-5); /** Cuerpo de la cifra — talla sm: paso 5 de la escala, el de un h4 */
+  --stat-tile-description-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de la descripción */
+  --stat-tile-description-color: var(--color-text-muted-on-light); /** Color de la descripción — atenuado */
+  --stat-tile-border-radius: var(--card-border-radius); /** Radio de esquinas — el de las superficies del sistema */
+  --stat-tile-border-width: var(--card-outline-border-width); /** Grosor del borde — el de Card outline */
+  --stat-tile-border-color: var(--card-outline-border-color); /** Color del borde — el de Card outline: tinta, no gris */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --stat-tile-label-color: var(--color-text-muted-on-dark); /** Color de la etiqueta — surface-dark */
+  --stat-tile-icon-color: var(--color-text-muted-on-dark); /** Color del icono — surface-dark */
+  --stat-tile-value-color: var(--color-text-on-dark); /** Color de la cifra — surface-dark */
+  --stat-tile-description-color: var(--color-text-muted-on-dark); /** Color de la descripción — surface-dark */
+}

package/src/tokens/molecules/stat-tile.ts

@@ -0,0 +1,7 @@
+import statTile from '../../../tokens/molecule/stat-tile.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(statTile as never);
+
+export const statTileBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const statTileDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/stepper.css

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --stepper-gap: var(--spacing-4); /** Aire entre pasos en la forma horizontal */
+  --stepper-item-gap: var(--spacing-2); /** Aire entre la marca del paso (`StepMarker`) y su etiqueta */
+  --stepper-text-gap: var(--spacing-1); /** Aire entre la etiqueta del paso y su línea de detalle */
+  --stepper-padding-block: var(--spacing-1); /** Aire vertical de cada paso: deja sitio al anillo de foco del paso alcanzable */
+  --stepper-font-family: var(--font-family-sans); /** Tipografía de las etiquetas */
+  --stepper-font-size: var(--font-size-1); /** 14px — etiqueta de interfaz, no texto corriente */
+  --stepper-line-height: var(--line-height-snug); /** Interlineado de la etiqueta: cabe en dos líneas sin apelmazarse */
+  --stepper-description-font-size: var(--font-size-0); /** 12px — la línea de detalle bajo la etiqueta */
+  --stepper-compact-gap: var(--spacing-2); /** Aire entre el contador («Paso 2 de 4») y la etiqueta del paso actual en la forma compacta */
+  --stepper-compact-font-size: var(--font-size-1); /** 14px — la forma compacta es una etiqueta de interfaz */
+  --stepper-font-weight: var(--font-weight-default); /** Peso de la etiqueta de un paso */
+  --stepper-current-font-weight: var(--font-weight-emphasis); /** Peso de la etiqueta del paso actual: el énfasis dice dónde está el usuario sin depender del color. Es la segunda señal del estado y por eso solo lo lleva la etiqueta — la cifra de la marca va en peso de cuerpo (`step.font-weight`), porque dentro de un círculo relleno el peso no señala nada */
+  --stepper-label-color: var(--color-text-on-light); /** Etiqueta de un paso completado o actual */
+  --stepper-pending-color: var(--color-text-muted-on-light); /** Etiqueta de un paso pendiente: texto secundario */
+  --stepper-description-color: var(--color-text-muted-on-light); /** Línea de detalle: texto secundario */
+  --stepper-label-hover-line-width: var(--border-width-default); /** Grosor de la línea bajo la etiqueta de un paso navegable con el puntero encima. Todo subrayado del DS es una línea de 1px, el grosor único del sistema. Apunta al rol de borde y no al grosor de subrayado de `Link` porque ese token vale 0 en superficie oscura —el enlace no lleva línea en reposo sobre prusia— y arrastrarlo borraría esta línea, que sí es de hover */
+  --stepper-label-hover-line-offset: var(--link-underline-offset); /** Separación entre la etiqueta y su línea de hover. La reserva el sitio siempre, aunque la línea solo se pinte en hover: si el hueco apareciese al pasar el puntero, la línea de detalle de debajo daría un salto */
+  --stepper-compact-count-font-weight: var(--font-weight-emphasis); /** Peso del contador de la forma compacta */
+  --stepper-compact-color: var(--color-text-on-light); /** Color del contador de la forma compacta */
+  --stepper-compact-label-color: var(--color-text-muted-on-light); /** Color de la etiqueta del paso actual en la forma compacta */
+  --stepper-focus-ring-color: var(--color-primary); /** Anillo de foco del paso alcanzable */
+  --stepper-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --stepper-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --stepper-label-color: var(--color-text-on-dark); /** Etiqueta de un paso hecho o actual — surface-dark */
+  --stepper-pending-color: var(--color-text-muted-on-dark); /** Etiqueta de un paso pendiente — surface-dark */
+  --stepper-description-color: var(--color-text-muted-on-dark); /** Línea de detalle — surface-dark */
+  --stepper-compact-color: var(--color-text-on-dark); /** Contador de la forma compacta — surface-dark */
+  --stepper-compact-label-color: var(--color-text-muted-on-dark); /** Etiqueta de la forma compacta — surface-dark */
+  --stepper-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/steps.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --steps-column-min-size: 12rem; /** Ancho mínimo de una columna en horizontal: por debajo, los pasos se apilan */
+  --steps-gap: var(--spacing-5); /** Aire entre pasos */
+  --steps-marker-gap: var(--spacing-4); /** Aire entre la marca (`StepMarker`) y el texto del paso */
+  --steps-body-gap: var(--spacing-2); /** Aire entre el título del paso y su descripción */
+  --steps-title-gap: var(--spacing-2); /** Aire entre el icono y el título del paso */
+}

package/src/tokens/molecules/steps.ts

@@ -0,0 +1,7 @@
+import steps from '../../../tokens/organism/steps.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(steps as never);
+
+export const stepsTokens     = all.filter(t => !t.name.includes('-surface-dark-'));
+export const stepsDarkTokens = all.filter(t => t.name.includes('-surface-dark-'));

package/src/tokens/molecules/switcher-field.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --switcher-field-cursor: pointer; /** Cursor */
+  --switcher-field-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --switcher-field-stack-gap: var(--spacing-2); /** Espacio entre el interruptor, la ayuda y el error — el ritmo del resto de campos */
+  --switcher-field-gap: var(--spacing-3); /** Separación entre el interruptor y el texto */
+  --switcher-field-sm-gap: var(--spacing-2); /** Gap — variante sm */
+  --switcher-field-sm-padding-block: var(--spacing-2); /** Padding block — variante sm */
+  --switcher-field-lg-gap: var(--spacing-4); /** Gap — variante lg */
+  --switcher-field-lg-padding-block: var(--spacing-5); /** Padding block — variante lg */
+  --switcher-field-padding-block: var(--control-padding-block); /** Padding block — hereda de control */
+  --switcher-field-sm-label-font-size: var(--label-sm-font-size); /** Cuerpo del texto — variante sm: un peldaño por debajo del cuerpo de la superficie */
+  --switcher-field-lg-label-font-size: var(--label-lg-font-size); /** Tamaño de la etiqueta en lg — el del Label lg (no el párrafo large, que en superficie pública crece con la prosa) */
+  --switcher-field-label-font-family: var(--text-font-family); /** Familia tipográfica */
+  --switcher-field-label-font-size: var(--text-font-size); /** Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --switcher-field-label-line-height: var(--text-line-height); /** Interlineado */
+  --switcher-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
+  --switcher-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --switcher-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --switcher-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --switcher-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --switcher-field-label-font-weight: var(--text-font-weight); /** Peso tipográfico */
+  --switcher-field-label-color: var(--text-color); /** Color del texto */
+  --switcher-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --switcher-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --switcher-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --switcher-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --switcher-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --switcher-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --switcher-field-label-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
+  --switcher-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --switcher-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/switcher-field.ts

@@ -0,0 +1,9 @@
+import json from '../../../tokens/molecule/switcher-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(json as never);
+
+export const switcherFieldErrorTokens  = all.filter(t => t.name.startsWith('--switcher-field-error-') || t.name.startsWith('--switcher-field-surface-dark-error-'));
+export const switcherFieldHelperTokens = all.filter(t => t.name.startsWith('--switcher-field-helper-'));
+export const switcherFieldLabelTokens  = all.filter(t => t.name.includes('-label-'));
+export const switcherFieldBaseTokens   = all.filter(t => !t.name.startsWith('--switcher-field-error-') && !t.name.startsWith('--switcher-field-helper-') && !t.name.includes('-label-'));

package/src/tokens/molecules/table-of-contents.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --table-of-contents-gap: var(--spacing-1); /** Aire entre dos entradas del índice */
+  --table-of-contents-title-font-size: var(--font-size-1); /** Tamaño del rótulo del índice («En esta página») */
+  --table-of-contents-title-space-after: var(--spacing-3); /** Aire entre el rótulo y la primera entrada */
+  --table-of-contents-item-line-height: var(--line-height-snug); /** Interlineado de una entrada, para los títulos que ocupan dos líneas */
+  --table-of-contents-item-padding-block: var(--spacing-1); /** Padding vertical de una entrada: agranda el área de pulsación sin separar la lista */
+  --table-of-contents-item-padding-inline-start: var(--spacing-3); /** Sangría base de una entrada, que deja sitio a la barra de la entrada actual */
+  --table-of-contents-item-indent: var(--spacing-3); /** Sangría que suma cada nivel de profundidad respecto al título más alto del índice */
+  --table-of-contents-sticky-offset: var(--spacing-5); /** Distancia al borde superior cuando el índice queda fijo (`sticky`). El consumidor la sube si tiene una cabecera fija más alta */
+  --table-of-contents-sticky-max-block-size: calc(100vh - (2 * var(--spacing-5))); /** Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro */
+  --table-of-contents-transition-duration: var(--motion-duration-fast); /** Duración de la transición de hover */
+  --table-of-contents-transition-easing: var(--motion-easing-default); /** Easing de la transición de hover */
+  --table-of-contents-title-font-weight: var(--font-weight-emphasis); /** Peso del rótulo del índice */
+  --table-of-contents-title-color: var(--color-text-muted-on-light); /** Color del rótulo del índice — atenuado: rotula, no compite con las entradas */
+  --table-of-contents-item-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de una entrada: un peldaño por debajo del texto que indexa */
+  --table-of-contents-item-color: var(--color-text-on-light); /** Color de una entrada — tinta de la superficie */
+  --table-of-contents-item-hover-line-width: var(--border-width-default); /** Grosor de la línea que marca la entrada bajo el puntero. El hover no pinta relleno (regla de Colores): línea de tinta bajo la entrada, como en SidebarNav */
+  --table-of-contents-item-hover-line-color: var(--color-primary); /** Color de la línea de hover — tinta de la superficie */
+  --table-of-contents-item-active-color: var(--color-primary); /** Color de la entrada actual */
+  --table-of-contents-item-active-font-weight: var(--font-weight-emphasis); /** Peso de la entrada actual: lo actual persiste, así que se dice con peso y barra, nunca con relleno */
+  --table-of-contents-item-active-marker-width: var(--border-width-focus); /** Grosor de la barra al borde de inicio que marca la sección en la que estás */
+  --table-of-contents-item-active-marker-color: var(--color-primary); /** Color de la barra de la entrada actual — tinta de la superficie */
+  --table-of-contents-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco de una entrada */
+  --table-of-contents-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --table-of-contents-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --table-of-contents-title-color: var(--color-text-muted-on-dark); /** Color del rótulo — surface-dark */
+  --table-of-contents-item-color: var(--color-text-on-dark); /** Color de una entrada — surface-dark */
+  --table-of-contents-item-hover-line-color: var(--color-text-on-dark); /** Línea de hover — surface-dark */
+  --table-of-contents-item-active-color: var(--color-accent-1); /** Entrada actual — surface-dark: lavanda. El prusia de `item-active-color` sería invisible sobre el fondo oscuro, igual que en SidebarNav */
+  --table-of-contents-item-active-marker-color: var(--color-accent-1); /** Barra de la entrada actual — surface-dark: lavanda, emparejada con su tinta */
+  --table-of-contents-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/table-of-contents.ts

@@ -0,0 +1,7 @@
+import tableOfContents from '../../../tokens/molecule/table-of-contents.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tableOfContents as never);
+
+export const tableOfContentsBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const tableOfContentsDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/table.css

@@ -0,0 +1,60 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --table-bg: rgba(0, 0, 0, 0); /** Fondo de la tabla */
+  --table-font-family: var(--font-family-sans); /** Font family */
+  --table-header-padding-block: var(--spacing-3); /** Padding block del encabezado */
+  --table-header-padding-inline: var(--spacing-3); /** Padding inline del encabezado */
+  --table-header-content-gap: var(--spacing-2); /** Separación entre el rótulo de la columna y el icono de ordenación */
+  --table-cell-padding-block: var(--spacing-3); /** Padding block de celda */
+  --table-cell-padding-inline: var(--spacing-3); /** Padding inline de celda */
+  --table-transition-duration: var(--motion-duration-fast); /** Duración de transiciones de hover */
+  --table-transition-easing: var(--motion-easing-default); /** Easing de transiciones */
+  --table-sm-font-size: var(--font-size-1); /** 14px — UI label size — variante sm */
+  --table-sm-header-padding-block: var(--spacing-2); /** Padding block del encabezado — variante sm */
+  --table-sm-header-padding-inline: var(--spacing-2); /** Padding inline del encabezado — variante sm */
+  --table-sm-cell-padding-block: var(--spacing-2); /** Padding block de celda — variante sm */
+  --table-sm-cell-padding-inline: var(--spacing-2); /** Padding inline de celda — variante sm */
+  --table-font-size: var(--text-font-size); /** Las celdas heredan el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --table-font-weight: var(--font-weight-default); /** Font weight base */
+  --table-line-height: var(--text-line-height); /** Interlineado heredado del cuerpo de la superficie, para celdas multilínea */
+  --table-color: var(--color-text-on-light); /** Color de texto base */
+  --table-border-width: var(--border-width-default); /** Grosor de separadores de fila */
+  --table-header-font-weight: var(--font-weight-emphasis); /** Peso tipográfico del encabezado */
+  --table-header-border-width: var(--border-width-default); /** Borde inferior del thead — 1px, como todo borde del sistema; la cabecera se lee por peso, no por grosor */
+  --table-header-border-color: var(--color-text-on-light); /** Color del borde inferior del thead */
+  --table-sort-icon-color: var(--color-text-muted-on-light); /** Icono de ordenación en reposo, tinta plana; el hover lo lleva al color activo */
+  --table-sort-icon-active-color: var(--color-primary); /** Color del icono de sort activo */
+  --table-row-border-color: var(--color-primary); /** Color del separador entre filas */
+  --table-row-selected-color: var(--color-primary); /** Tinta de la fila seleccionada: la selección se dice con tinta y peso, no con un fondo gris */
+  --table-row-hover-marker-width: var(--border-width-focus); /** Grosor de la barra que marca la fila bajo el puntero. El hover no pinta relleno (regla de Colores): la fila se señala con una barra de tinta en su borde de inicio, el mismo grafismo que la sección activa del SidebarNav en rail */
+  --table-row-hover-marker-color: var(--color-primary); /** Color de la barra de hover — tinta de la superficie */
+  --table-row-selected-font-weight: var(--font-weight-emphasis); /** Peso de la fila seleccionada */
+  --table-sticky-bg: var(--color-background-light); /** Fondo de la columna de acciones pegajosa (cabecera y celda): opaco, para tapar el resto de columnas que se deslizan debajo al hacer scroll horizontal */
+  --table-footer-bg: var(--color-surface-secondary-on-light); /** Fondo del tfoot: superficie clara secundaria, no un fondo de estado */
+  --table-footer-border-width: var(--border-width-default); /** Borde superior del tfoot — 1px, como el del thead */
+  --table-footer-border-color: var(--color-text-on-light); /** Color del borde superior del tfoot */
+  --table-footer-font-weight: var(--font-weight-emphasis); /** Peso tipográfico de las celdas del footer */
+  --table-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --table-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --table-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --table-color: var(--color-text-on-dark); /** Color de texto base — surface-dark */
+  --table-header-border-color: var(--color-text-on-dark); /** Borde inferior del thead — surface-dark */
+  --table-sort-icon-color: var(--color-text-muted-on-dark); /** Icono de sort inactivo — surface-dark */
+  --table-sort-icon-active-color: var(--color-text-on-dark); /** Icono de sort activo — surface-dark */
+  --table-row-border-color: var(--color-text-on-dark); /** Separador entre filas — surface-dark */
+  --table-row-selected-color: var(--color-accent-1); /** Tinta de la fila seleccionada — surface-dark: lavanda, como en el SidebarNav */
+  --table-sticky-bg: var(--color-background-dark); /** Fondo de la columna pegajosa — surface-dark */
+  --table-footer-bg: var(--color-surface-secondary-on-dark); /** Fondo del tfoot — surface-dark */
+  --table-footer-border-color: var(--color-text-on-dark); /** Borde superior del tfoot — surface-dark */
+  --table-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+  --table-row-hover-marker-color: var(--color-text-on-dark); /** Color de la barra de hover — surface-dark */
+}

package/src/tokens/molecules/table.ts

@@ -0,0 +1,14 @@
+import table from '../../../tokens/component/table.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(table as never);
+
+const light = all.filter(t => !t.name.startsWith('--table-surface-dark-'));
+
+export const tableBaseTokens   = light.filter(t => !t.name.match(/--table-(header|sort-icon|cell|row|sticky|footer|focus|sm)-/));
+export const tableHeaderTokens = light.filter(t => t.name.match(/--table-(header|sort-icon)-/));
+export const tableRowTokens    = light.filter(t => t.name.match(/--table-(cell|row|sticky)-/));
+export const tableFooterTokens = light.filter(t => t.name.startsWith('--table-footer-'));
+export const tableFocusTokens  = light.filter(t => t.name.startsWith('--table-focus-'));
+export const tableSmTokens     = light.filter(t => t.name.startsWith('--table-sm-'));
+export const tableDarkTokens   = all.filter(t => t.name.startsWith('--table-surface-dark-'));

package/src/tokens/molecules/textarea-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --textarea-field-gap: var(--spacing-2); /** Espacio entre label, textarea, helper y error */
+  --textarea-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --textarea-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --textarea-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --textarea-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --textarea-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --textarea-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --textarea-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --textarea-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --textarea-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --textarea-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --textarea-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --textarea-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/textarea-field.ts

@@ -0,0 +1,10 @@
+import textareaFieldJson from '../../../tokens/molecule/textarea-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(textareaFieldJson as never);
+
+export const textareaFieldBaseTokens = all.filter(t => t.name === '--textarea-field-gap');
+
+export const textareaFieldErrorTokens = all.filter(t => t.name.startsWith('--textarea-field-error-'));
+
+export const textareaFieldHelperTokens = all.filter(t => t.name.startsWith('--textarea-field-helper-'));

package/src/tokens/molecules/theme-switcher.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --theme-switcher-icon-gap: var(--spacing-2); /** Entre el icono del tema y su nombre, en el menú y en la lista */
+  --theme-switcher-list-gap: var(--spacing-4); /** Separación entre temas en la lista desplegada */
+  --theme-switcher-list-font-size: var(--font-size-2); /** Temas en la lista */
+  --theme-switcher-list-current-font-weight: var(--font-weight-emphasis); /** Tema actual en la lista: solo cambia el peso */
+  --theme-switcher-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
+  --theme-switcher-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
+  --theme-switcher-focus-ring-color: var(--color-primary); /** Anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --theme-switcher-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/theme-switcher.ts

@@ -0,0 +1,4 @@
+import themeSwitcher from '../../../tokens/molecule/theme-switcher.json';
+import { flattenTokens } from '../utils';
+
+export const themeSwitcherTokens = flattenTokens(themeSwitcher as never);

package/src/tokens/molecules/time-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --time-field-gap: var(--spacing-2); /** Espacio entre label, control, helper y error */
+  --time-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --time-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --time-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --time-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --time-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --time-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --time-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --time-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --time-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --time-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --time-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --time-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}