@edc-motor/ui 0.4.26 → 0.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.26",
+  "version": "0.4.27",
   "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/_block-related.scss

@@ -1,7 +1,7 @@
 @use "tokens" as *;
 
 // Bloque `related` (BlockRelated.vue): cabecera en rejilla (títulos + botón
-// al índice a la derecha en ≥sm, patrón del relateds de CDL) sobre una
+// al índice a la derecha en ≥600, patrón del relateds de CDL) sobre una
 // PreviewGrid compacta.
 .block--related {
   .block__related-header {
@@ -9,7 +9,11 @@
     grid-template-columns: 1fr;
     gap: $space-4;
 
-    @media (min-width: $bp-sm) {
+    // 600px es un umbral PROPIO de esta cabecera (sin token: no encaja en
+    // $bp-sm/$bp-md) — por debajo, título + subtítulo + botón caen en TRES
+    // filas (una columna); container query sobre `content` (el ancho real
+    // del bloque), coherente con el resto de bloques con imagen.
+    @container content (min-width: 600px) {
       grid-template-columns: 1fr auto;
       align-items: center;
     }
@@ -24,14 +28,14 @@
   .block__related-button {
     justify-self: center; // estrecho: los botones de bloque van centrados
 
-    @media (min-width: $bp-sm) {
+    @container content (min-width: 600px) {
       justify-self: end;
     }
   }
 
   // Centrado/derecha del campo común `align`: la cabecera acompaña.
   &.block--align-center .block__related-header {
-    @media (min-width: $bp-sm) {
+    @container content (min-width: 600px) {
       grid-template-columns: 1fr;
     }
   }

package/scss/components/_blocks.scss

@@ -2,8 +2,14 @@
 
 // Bloques públicos del CRM (doc 03): estilos base, cada juego los ajusta.
 .block {
-  // Aire vertical entre bloques (CDL usa 4rem; aquí algo más contenido).
+  // Aire vertical entre bloques (CDL usa 4rem; aquí algo más contenido). En
+  // estrecho (contenedor `content') baja un poco: los bloques respiran
+  // menos apretados en pantallas pequeñas.
   padding-block: $space-8 + $space-6; // 56px
+
+  @container content (max-width: #{$bp-sm - 1px}) {
+    padding-block: $space-8 + $space-2; // 40px
+  }
   background: var(--block-bg, transparent);
 
   &__inner {
@@ -15,22 +21,46 @@
   }
 
   // Anchura del contenido (campo común `width`): coherente entre bloques.
-  &--w-narrow .block__inner { max-width: 800px; }
+  &--w-narrow .block__inner { max-width: 880px; }
   &--w-full .block__inner { max-width: none; padding-inline: $space-6; }
 
-  // Tipografía de bloque, escalada ~×1.125 sobre la original para que el
-  // texto BASE sea de 18px: texto $fs-18, subtítulo 22, título $fs-32 (la
-  // cabecera sube a 36/28). Los títulos nunca se justifican.
+  // Las tarjetas (CTA, tarjeta de texto y cita) son algo más angostas que el
+  // resto en cada preset (wide/narrow), con la diferencia PROPORCIONAL (no
+  // un recorte fijo que desaparece de golpe): min(tope, 90%) — 90% ≈ la
+  // relación 1080/1200 del preset ancho, así que en pantallas grandes manda
+  // el tope (120px/100px más angosto que el resto) y, según se estrecha,
+  // manda el porcentaje y la diferencia decrece sin saltos. "Ancho
+  // completo" no lleva tope: full es full.
+  &--cta.block--w-wide .block__inner,
+  &--text-card.block--w-wide .block__inner,
+  &--quote.block--w-wide .block__inner { max-width: min(1080px, 90%); }
+  &--cta.block--w-narrow .block__inner,
+  &--text-card.block--w-narrow .block__inner,
+  &--quote.block--w-narrow .block__inner { max-width: min(780px, 90%); }
+
+  // Tipografía de bloque: texto BASE $fs-16 (el mismo cuerpo que el wysiwyg
+  // por defecto — sin override aquí), subtítulo $fs-24 (entre el título y
+  // la base), título $fs-32 (la cabecera sube a 40/28). Los títulos nunca
+  // se justifican.
   // 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-32; width: 100%; }
   // pre-line: el subtítulo es un textarea — sus saltos de línea cuentan.
-  &__subtitle { margin: 0; color: $text-2; font-size: 22px; white-space: pre-line; width: 100%; }
-  &__text { color: $text-1; font-size: $fs-18; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-24; white-space: pre-line; width: 100%; }
+  &__text { color: $text-1; font-size: $fs-16; }
 
-  // El wysiwyg fija su propio cuerpo ($fs-16): dentro de un bloque manda la
-  // base de bloque (18px). La cita lo re-sube luego a su tamaño.
-  .rich-content { font-size: $fs-18; }
+  // Alineación del bloque (campo común `align`): por CLASE (BlockShell ya
+  // no la mete como style en línea) para poder pisarla en estrecho.
+  &--align-left { text-align: left; }
+  &--align-center { text-align: center; }
+  &--align-right { text-align: right; }
+  &--align-justify { text-align: justify; }
+
+  // Justificado, a la IZQUIERDA por debajo de $bp-sm — mismo criterio (y
+  // mismo mecanismo, @media de viewport) que título/subtítulo, más abajo.
+  @media (max-width: $bp-sm - 1px) {
+    &--align-justify { text-align: left; }
+  }
 
   &--align-justify &__title,
   &--align-justify &__subtitle { text-align: left; }
@@ -88,7 +118,7 @@
     .edc-button { justify-self: start; text-decoration: none; }
   }
 
-  &--header .block__title { font-size: $fs-36; }
+  &--header .block__title { font-size: $fs-40; }
   &--header .block__subtitle { font-size: $fs-28; }
 
   &__media-layout { display: grid; gap: $space-4; }
@@ -122,8 +152,11 @@
     }
   }
 
-  // Marco de la imagen en columnas: el ALTO lo marca el texto de al lado
-  // (la imagen absoluta no aporta altura) y el modo de escalado hace el resto.
+  // Marco de la imagen en columnas: por defecto (cubrir/rellenar) el ALTO
+  // lo marca el texto de al lado (la imagen absoluta no aporta altura) y el
+  // modo de escalado hace el resto — object-position top: con el marco
+  // estirado, "cubrir" centraba la imagen en vertical, SIEMPRE anclada
+  // arriba.
   &__image-frame {
     position: relative;
     min-height: 200px; // que no colapse con textos muy cortos
@@ -136,13 +169,30 @@
       max-width: none;
     }
   }
-
-  // object-position top: con el marco estirado a la altura del texto,
-  // "contain" centraba la imagen en vertical — SIEMPRE anclada arriba.
-  &--fit-contain &__image-frame .block__image { object-fit: contain; object-position: top; }
   &--fit-cover &__image-frame .block__image { object-fit: cover; object-position: top; }
   &--fit-fill &__image-frame .block__image { object-fit: fill; }
 
+  // "Contener" es la excepción: la imagen respeta su tamaño NATURAL — ancho
+  // de columna, alto según su propia proporción — sin ampliarse ni
+  // encogerse para casar con el marco (si es más alta que el texto la fila
+  // crece; si es más baja, queda aire debajo). Por eso escapa del marco
+  // absoluto: vuelve al flujo normal, anclada arriba (align-self) del grid
+  // de columnas.
+  &--fit-contain &__image-frame {
+    @container content (min-width: #{$bp-md}) {
+      position: static;
+      min-height: 0;
+      align-self: start;
+
+      .block__image {
+        position: static;
+        width: 100%;
+        height: auto;
+        max-width: none;
+      }
+    }
+  }
+
   // En una columna (vertical, < 768) la imagen vuelve al flujo normal.
   @container content (max-width: #{$bp-md}) {
     &__image-frame {
@@ -175,10 +225,9 @@
     @container content (min-width: #{$bp-md}) {
       float: left;
       max-width: 50%;
-      margin-right: $space-4;
-      // Anclada ARRIBA mientras el texto la rodea (sin hueco previo ni
-      // alineación heredada que la descuelgue).
-      margin-top: 0;
+      // Respiro de $space-4 (16px) por arriba, abajo y hacia el texto
+      // (derecha); pegada a su lado exterior (izquierda, sin margen).
+      margin: $space-4 $space-4 $space-4 0;
       vertical-align: top;
     }
   }
@@ -186,8 +235,7 @@
     @container content (min-width: #{$bp-md}) {
       float: right;
       max-width: 50%;
-      margin-left: $space-4;
-      margin-top: 0;
+      margin: $space-4 0 $space-4 $space-4;
       vertical-align: top;
     }
   }
@@ -234,10 +282,10 @@
   }
 
   // La imagen del CTA sangra hasta el borde de la tarjeta según su posición:
-  // en columnas toca abajo y su lateral (título y subtítulo van SIEMPRE a
-  // ancho completo por encima del grid; solo si la tarjeta ABRE con la
-  // imagen sangra también por arriba); arriba/abajo toca los laterales.
-  // Esquinas siguiendo el radio de la tarjeta.
+  // en columnas toca TODA la altura (arriba, abajo y su lateral — título y
+  // subtítulo viven dentro de `.block__cta-body`, junto al texto, en la
+  // columna de contenido); arriba/abajo toca los laterales. Esquinas
+  // siguiendo el radio de la tarjeta.
   // Las tarjetas del CTA y de la tarjeta de texto llevan un halo SUTIL del
   // acento, igual por los cuatro bordes, además de su sombra normal.
   &--cta .block__card,
@@ -256,27 +304,13 @@
   }
   &--cta.block--image-right .block__media-layout .block__image-frame {
     @container content (min-width: #{$bp-md}) {
-      margin: 0 (-$space-8) (-$space-8) 0;
-      border-radius: 0 0 $radius-lg 0;
-    }
-  }
-  &--cta.block--image-left .block__media-layout .block__image-frame {
-    @container content (min-width: #{$bp-md}) {
-      margin: 0 0 (-$space-8) (-$space-8);
-      border-radius: 0 0 0 $radius-lg;
-    }
-  }
-  // Sin nada por encima (el media-layout abre la tarjeta): sangra también
-  // por arriba, con el radio completo de su lateral.
-  &--cta.block--image-right .block__card > .block__media-layout:first-child .block__image-frame {
-    @container content (min-width: #{$bp-md}) {
-      margin-top: -$space-8;
+      margin: (-$space-8) (-$space-8) (-$space-8) 0;
       border-radius: 0 $radius-lg $radius-lg 0;
     }
   }
-  &--cta.block--image-left .block__card > .block__media-layout:first-child .block__image-frame {
+  &--cta.block--image-left .block__media-layout .block__image-frame {
     @container content (min-width: #{$bp-md}) {
-      margin-top: -$space-8;
+      margin: (-$space-8) 0 (-$space-8) (-$space-8);
       border-radius: $radius-lg 0 0 $radius-lg;
     }
   }
@@ -343,14 +377,14 @@
     }
   }
 
-  // Cita: sin adorno de borde, en GRANDE ($fs-36, la escala de bloque
-  // subida ~×1.125) y del color de acento.
+  // Cita: sin adorno de borde, en GRANDE ($fs-32, el mismo tamaño que un
+  // título de bloque) y del color de acento.
   &--quote .block__quote {
     margin: 0;
     // Fuente "especial" de la configuración de la web (doc 10); las fuentes
     // decorativas piden un cuerpo mayor.
     font-family: var(--font-special, inherit);
-    font-size: $fs-36;
+    font-size: $fs-32;
     font-style: italic;
     font-weight: $k-fw-semibold;
     color: $accent-500;
@@ -365,7 +399,7 @@
     // El autor no hereda la fuente especial de la cita.
     font-family: var(--font-body, inherit);
     font-style: italic;
-    font-size: $fs-16;
+    font-size: $fs-14;
 
     &--left { text-align: left; }
     &--center { text-align: center; }
@@ -396,11 +430,11 @@
     font-variant-numeric: tabular-nums;
   }
 
-  // Tamaño por nivel, en la escala de bloque (~×1.125): 27 → 25 → 22
-  // (el 3 agrupa "3 o más").
-  .block__index-level-1 { font-size: 27px; }
-  .block__index-level-2 { font-size: 25px; }
-  .block__index-level-3 { font-size: 22px; }
+  // Tamaño por nivel: 24 → 22 (no hay token entre 20 y 24) → 20 (el 3
+  // agrupa "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
@@ -421,7 +455,6 @@
 
 .block__faq-question {
   padding: $space-3 $space-4;
-  font-size: $fs-18;
   font-weight: 600;
   cursor: pointer;
 
@@ -447,7 +480,7 @@
   &--large { padding: $space-4 $space-8; }
   border: 1px solid $accent-500;
   border-radius: $radius-md;
-  font-size: $fs-20;
+  font-size: $fs-18;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;

package/scss/components/_modal.scss

@@ -26,6 +26,9 @@
   &--sm { max-width: 380px; }
   &--md { max-width: 560px; }
   &--lg { max-width: 820px; }
+  // Formularios con más columnas (el modal de bloque, EditModal): más ancho
+  // que el resto, pero sin llegar a ocupar toda la pantalla.
+  &--wide { max-width: 940px; }
 
   &__header {
     flex-shrink: 0;
@@ -50,11 +53,16 @@
   }
 
   // El cuerpo es la única zona que scrollea (cabecera y pie quedan fijos).
+  // Contenedor con nombre (container query, no viewport): los formularios de
+  // dentro (SchemaFields/PageBlocks) apilan sus filas de dos columnas según
+  // el ANCHO REAL del modal, no el del viewport.
   &__body {
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
     padding: $space-5;
+    container-type: inline-size;
+    container-name: modal-body;
   }
 
   &__footer {

package/scss/components/_rich-content.scss

@@ -34,12 +34,13 @@
   > :first-child { margin-block-start: 0; }
   > :last-child { margin-block-end: 0; }
 
-  // Escala del wysiwyg: h2 28 · h3 24 · h4 20 · h5 18 · h6 16.
-  h2 { font-size: $fs-28; }
+  // Escala del wysiwyg: h2 32 (el mismo tamaño que un título de bloque) ·
+  // h3 24 · h4 22 (no hay token entre 20 y 24) · h5 20 · h6 18.
+  h2 { font-size: $fs-32; }
   h3 { font-size: $fs-24; }
-  h4 { font-size: $fs-20; }
-  h5 { font-size: $fs-18; }
-  h6 { font-size: $fs-16; }
+  h4 { font-size: 22px; }
+  h5 { font-size: $fs-20; }
+  h6 { font-size: $fs-18; }
 
   ul,
   ol {

package/src/blocks/BlockCta.vue

@@ -27,16 +27,24 @@ const layoutStyle = computed(() => {
     ]"
   >
     <div class="block__card">
-      <!-- Título y subtítulo SIEMPRE a ancho completo, encima del grid: el
-           reparto en columnas es solo entre la imagen y el contenido. -->
-      <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
-      <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+      <!-- En columnas, título y subtítulo viajan a la columna de texto para
+           que la imagen pueda sangrar a TODA la altura de la tarjeta (a
+           todo ancho, en todos los anchos de pantalla: es una decisión de
+           plantilla por settings, no por el ancho del contenedor). -->
+      <template v-if="!inColumns">
+        <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+        <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+      </template>
       <div class="block__media-layout" :style="layoutStyle">
         <span v-if="settings.image && inColumns" class="block__image-frame">
           <img class="block__image" :src="String(settings.image)" alt="" />
         </span>
         <img v-else-if="settings.image" class="block__image" :src="String(settings.image)" alt="" />
         <div class="block__cta-body">
+          <template v-if="inColumns">
+            <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
+            <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
+          </template>
           <div v-if="settings.body" class="block__text rich-content" v-html="settings.body" />
           <!-- Alineación propia (button_align; en estrecho el CSS centra
                siempre) y tamaño grande opcional (button_large) -->

package/src/blocks/BlockShell.vue

@@ -19,13 +19,15 @@ const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) =>
   return value && value !== 'inherit' ? `block--${prefix}-${value}` : ''
 }
 
+// La alineación va por CLASE (block--align-*, _blocks.scss), no por style en
+// línea: un style inline no se puede pisar desde CSS (bloqueaba el cambio a
+// izquierda del justificado en estrecho, DC-03 ampliado).
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
   return {
     '--block-bg': background
       ? `color-mix(in srgb, ${background} var(--block-tint, 15%), transparent)`
       : 'transparent',
-    textAlign: ((props.settings.align as string) || 'justify') as CSSProperties['textAlign'],
   }
 })
 </script>
@@ -33,7 +35,12 @@ const style = computed<CSSProperties>(() => {
 <template>
   <section
     class="block"
-    :class="[width, align, headingAlign('title_align', 'title'), headingAlign('subtitle_align', 'subtitle')]"
+    :class="[
+      width,
+      align,
+      headingAlign('title_align', 'title'),
+      headingAlign('subtitle_align', 'subtitle'),
+    ]"
     :style="style"
   >
     <div class="block__inner">

package/src/components/BaseModal.vue

@@ -11,7 +11,7 @@ const props = withDefaults(
   defineProps<{
     modelValue: boolean
     title?: string
-    size?: 'sm' | 'md' | 'lg'
+    size?: 'sm' | 'md' | 'lg' | 'wide'
     closeLabel?: string
   }>(),
   { size: 'md', closeLabel: 'Cerrar' },

package/src/components/EditModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import BaseModal from './BaseModal.vue'
 import { Save, X } from '@lucide/vue'
 import BaseButton from './BaseButton.vue'
@@ -11,7 +12,8 @@ const props = withDefaults(
   defineProps<{
     modelValue: boolean
     title: string
-    size?: 'sm' | 'md' | 'lg'
+    /** 'wide' para formularios con más columnas (el modal de bloque). */
+    size?: 'normal' | 'wide'
     loading?: boolean
     submitLabel?: string
     cancelLabel?: string
@@ -20,7 +22,7 @@ const props = withDefaults(
     localeSwitchLabel?: string
   }>(),
   {
-    size: 'md',
+    size: 'normal',
     loading: false,
     submitLabel: 'Guardar',
     cancelLabel: 'Cancelar',
@@ -29,6 +31,11 @@ const props = withDefaults(
   },
 )
 
+// EditModal tiene su propia escala de tamaño (normal/wide, sobre el
+// contenido del FORMULARIO); BaseModal sigue con la suya (sm/md/lg/wide,
+// genérica) — normal se apoya en su 'md' por defecto.
+const modalSize = computed(() => (props.size === 'wide' ? 'wide' : 'md'))
+
 const emit = defineEmits<{ 'update:modelValue': [boolean]; submit: [] }>()
 
 // Locale global del formulario: los campos traducibles del slot (Translatable*
@@ -46,7 +53,7 @@ function close() {
   <BaseModal
     :model-value="modelValue"
     :title="title"
-    :size="size"
+    :size="modalSize"
     @update:model-value="(v) => !loading && emit('update:modelValue', v)"
   >
     <!-- Cabecera propia: título + selector de locale global (si hay campos