@edc-motor/ui 0.4.22 → 0.4.24

package/package.json

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

@@ -20,9 +20,11 @@
 
   // Tipografía de bloque: texto $fs-16, subtítulo $fs-20, título $fs-28
   // (la cabecera sube a 32/24). Los títulos nunca se justifican.
-  &__title { margin: 0; font-size: $fs-28; }
+  // width 100%: en grids con justify-items start (el cuerpo del CTA) el
+  // elemento encoge a su contenido y el text-align no se vería.
+  &__title { margin: 0; font-size: $fs-28; width: 100%; }
   // pre-line: el subtítulo es un textarea — sus saltos de línea cuentan.
-  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; white-space: pre-line; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; white-space: pre-line; width: 100%; }
   &__text { color: $text-1; font-size: $fs-16; }
 
   &--align-justify &__title,
@@ -30,13 +32,25 @@
 
   // Alineación PROPIA de título/subtítulo (campos comunes title_align y
   // subtitle_align): con valor explícito manda sobre la del bloque (por eso
-  // va DESPUÉS del ajuste del justificado).
-  &--title-left &__title { text-align: left; }
-  &--title-center &__title { text-align: center; }
-  &--title-right &__title { text-align: right; }
-  &--subtitle-left &__subtitle { text-align: left; }
-  &--subtitle-center &__subtitle { text-align: center; }
-  &--subtitle-right &__subtitle { text-align: right; }
+  // va DESPUÉS del ajuste del justificado). En ESTRECHO se revierte a la
+  // izquierda, se haya elegido lo que se haya elegido.
+  &--title-left &__title,
+  &--title-center &__title,
+  &--title-right &__title,
+  &--subtitle-left &__subtitle,
+  &--subtitle-center &__subtitle,
+  &--subtitle-right &__subtitle {
+    text-align: left;
+  }
+
+  @media (min-width: $bp-sm) {
+    &--title-left &__title { text-align: left; }
+    &--title-center &__title { text-align: center; }
+    &--title-right &__title { text-align: right; }
+    &--subtitle-left &__subtitle { text-align: left; }
+    &--subtitle-center &__subtitle { text-align: center; }
+    &--subtitle-right &__subtitle { text-align: right; }
+  }
 
   &__label {
     display: inline-block;
@@ -236,6 +250,53 @@
     border-radius: 0 0 $radius-lg $radius-lg;
   }
 
+  // CTA con imagen en ESTRECHO: da igual la posición elegida — la imagen va
+  // ARRIBA, a sangre por los laterales de la tarjeta y con proporción 2:1
+  // (recortada, no deformada). Va DESPUÉS de las reglas por posición para
+  // ganarles en el empate de especificidad.
+  @container content (max-width: #{$bp-sm}) {
+    &--cta[class*="block--image-"] .block__card .block__media-layout {
+      > .block__image,
+      > .block__image-frame {
+        order: -1;
+        justify-self: stretch;
+        display: block; // el marco es un span: inline dejaría hueco de línea
+        width: calc(100% + #{$space-8 * 2});
+        max-width: none;
+        margin: 0 (-$space-8);
+        border-radius: 0;
+        overflow: hidden;
+      }
+
+      > .block__image {
+        aspect-ratio: 2 / 1;
+        object-fit: cover;
+      }
+
+      // En columnas la imagen vive dentro del marco: la proporción la pone
+      // la propia imagen y el marco (estático en estrecho) la acompaña.
+      > .block__image-frame .block__image {
+        display: block; // inline dejaría el hueco de línea bajo la imagen
+        width: 100%;
+        height: auto;
+        max-width: none;
+        aspect-ratio: 2 / 1;
+        object-fit: cover;
+        border-radius: 0;
+      }
+    }
+
+    // Sin título encima (el media-layout abre la tarjeta): también a sangre
+    // por arriba, siguiendo el radio de la tarjeta.
+    &--cta[class*="block--image-"] .block__card > .block__media-layout:first-child {
+      > .block__image,
+      > .block__image-frame {
+        margin-top: -$space-8;
+        border-radius: $radius-lg $radius-lg 0 0;
+      }
+    }
+  }
+
   // Cita: sin adorno de borde, en GRANDE ($fs-32, el token más cercano a
   // los ~40px pedidos) y del color de acento.
   &--quote .block__quote {
@@ -245,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
@@ -270,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>