@edc-motor/ui 0.4.23 → 0.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/components/_blocks.scss

@@ -306,6 +306,7 @@
     font-family: var(--font-special, inherit);
     font-size: $fs-32;
     font-style: italic;
+    font-weight: $k-fw-semibold;
     color: $accent-500;
 
     // La cita llega como richtext y .rich-content fija su propio cuerpo
@@ -331,10 +332,16 @@
   padding-left: 1.2em;
   display: grid;
   gap: $space-1;
+  font-weight: $k-fw-medium;
 
   a { color: $accent-500; text-decoration: none; }
   a:hover { text-decoration: underline; }
 
+  // Tamaño por nivel: 24 → 22 (sin token entre 20 y 24) → 20 (3 o más).
+  .block__index-level-1 { font-size: $fs-24; }
+  .block__index-level-2 { font-size: 22px; }
+  .block__index-level-3 { font-size: $fs-20; }
+
   // Entradas de bloques hijos: sangradas bajo su padre.
   .block__index-child { margin-left: $space-5; }
 }

package/src/blocks/BlockIndex.vue

@@ -14,10 +14,14 @@ defineProps<{
     <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
     <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
     <component :is="settings.numbered ? 'ol' : 'ul'" class="block__index">
+      <!-- Nivel visual por profundidad (tamaños decrecientes; 3 = 3 o más) -->
       <li
         v-for="item in data.items ?? []"
         :key="item.id"
-        :class="{ 'block__index-child': (item.depth ?? 0) > 0 }"
+        :class="[
+          `block__index-level-${Math.min((item.depth ?? 0) + 1, 3)}`,
+          { 'block__index-child': (item.depth ?? 0) > 0 },
+        ]"
       >
         <a :href="`#block-${item.id}`">{{ item.label }}</a>
       </li>