@edc-motor/ui 0.4.24 → 0.4.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.24",
+  "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

@@ -342,8 +342,10 @@
   .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; }
+  // 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,12 @@ 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) -->
+      <!-- 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"
+        :style="{ '--depth': item.depth ?? 0 }"
         :class="[
           `block__index-level-${Math.min((item.depth ?? 0) + 1, 3)}`,
           { 'block__index-child': (item.depth ?? 0) > 0 },