@edc-motor/ui 0.4.23 → 0.4.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.23",
+  "version": "0.4.25",
   "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,12 +332,20 @@
   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; }
 
-  // Entradas de bloques hijos: sangradas bajo su padre.
-  .block__index-child { margin-left: $space-5; }
+  // 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 anidadas: sangría POR NIVEL (profundidad real, sin límite) —
+  // `--depth` lo pone BlockIndex.vue en línea; el tamaño de letra sí se
+  // limita a 3 niveles (block__index-level-1/2/3, el 3 agrupa "3 o más").
+  .block__index-child { margin-left: calc(var(--depth, 1) * #{$space-5}); }
 }
 
 // FAQ (doc 03): acordeón nativo details/summary del bloque `faq`.

package/src/blocks/BlockIndex.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import BlockShell from './BlockShell.vue'
 
-// Índice automático: enlaces de ancla a los bloques posteriores de la página,
-// con sangría por nivel (bloques hijos → depth 1).
+// Índice automático: enlaces de ancla a los bloques posteriores de la
+// página, con sangría por nivel (sin límite de profundidad: la escribe
+// IndexBlock::resolveData subiendo por la cadena de padres del bloque).
 defineProps<{
   settings: Record<string, unknown>
   data: { items?: { id: number; label: string; depth?: number }[] }
@@ -14,10 +15,16 @@ 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">
+      <!-- Tamaño por nivel (24/22/20, el 3 agrupa "3 o más"); la SANGRÍA, en
+           cambio, escala con la profundidad real (--depth, sin tope). -->
       <li
         v-for="item in data.items ?? []"
         :key="item.id"
-        :class="{ 'block__index-child': (item.depth ?? 0) > 0 }"
+        :style="{ '--depth': item.depth ?? 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>