@edc-motor/ui 0.4.25 → 0.4.27

package/package.json

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

@@ -38,7 +38,7 @@ $k-fw-bold: 700;
 $k-lh-tight: 1.15;
 $k-lh-ui: 1.35;
 $k-lh-body: 1.55;
-$fs-11: 11px; $fs-12: 12px; $fs-13: 13px; $fs-14: 14px; $fs-16: 16px; $fs-18: 18px; $fs-20: 20px; $fs-24: 24px; $fs-28: 28px; $fs-32: 32px;
+$fs-11: 11px; $fs-12: 12px; $fs-13: 13px; $fs-14: 14px; $fs-16: 16px; $fs-18: 18px; $fs-20: 20px; $fs-24: 24px; $fs-28: 28px; $fs-32: 32px; $fs-36: 36px; $fs-40: 40px;
 
 // Espaciado (px, como kontuan)
 $space-0: 0;

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,18 +21,47 @@
   }
 
   // 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: texto $fs-16, subtítulo $fs-20, título $fs-28
-  // (la cabecera sube a 32/24). 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-28; width: 100%; }
+  &__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: $fs-20; white-space: pre-line; width: 100%; }
+  &__subtitle { margin: 0; color: $text-2; font-size: $fs-24; white-space: pre-line; width: 100%; }
   &__text { color: $text-1; font-size: $fs-16; }
 
+  // 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; }
 
@@ -52,17 +87,20 @@
     &--subtitle-right &__subtitle { text-align: right; }
   }
 
+  // Etiqueta de la tarjeta de texto: SIN chip — solo texto coloreado de
+  // acento, con alineación propia (campo label_align del bloque).
   &__label {
-    display: inline-block;
-    justify-self: start;
-    font-size: $fs-12;
+    display: block;
+    width: 100%;
+    font-size: $fs-13;
     font-weight: $k-fw-semibold;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: $accent-500;
-    border: 1px solid color-mix(in srgb, $accent-500 45%, transparent);
-    border-radius: $radius-pill;
-    padding: 2px $space-3;
+
+    &--left { text-align: left; }
+    &--center { text-align: center; }
+    &--right { text-align: right; }
   }
 
   &__card {
@@ -80,8 +118,8 @@
     .edc-button { justify-self: start; text-decoration: none; }
   }
 
-  &--header .block__title { font-size: $fs-32; }
-  &--header .block__subtitle { font-size: $fs-24; }
+  &--header .block__title { font-size: $fs-40; }
+  &--header .block__subtitle { font-size: $fs-28; }
 
   &__media-layout { display: grid; gap: $space-4; }
   &__image {
@@ -90,9 +128,11 @@
     justify-self: center;
   }
 
+  // Columnas solo de $bp-md (768) para arriba: por debajo el bloque pasa a
+  // VERTICAL y la imagen va SIEMPRE encima del texto (regla más abajo).
   &--image-left .block__media-layout,
   &--image-right .block__media-layout {
-    @container content (min-width: #{$bp-sm}) {
+    @container content (min-width: #{$bp-md}) {
       // Reparto izquierda:derecha del campo image_columns (--img-cols).
       grid-template-columns: var(--img-cols, minmax(0, 2fr) minmax(0, 3fr));
       align-items: stretch;
@@ -102,8 +142,21 @@
   &--image-right .block__media-layout .block__image { order: 2; }
   &--image-bottom .block__media-layout .block__image { order: 2; }
 
-  // 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.
+  // En vertical (contenedor < 768) la imagen SIEMPRE encima del texto, da
+  // igual su posición configurada (derecha/abajo incluidas). Después de las
+  // reglas de order de arriba para ganarles el empate.
+  @container content (max-width: #{$bp-md}) {
+    &[class*="block--image-"] .block__media-layout > .block__image,
+    &[class*="block--image-"] .block__media-layout > .block__image-frame {
+      order: -1;
+    }
+  }
+
+  // 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
@@ -116,13 +169,32 @@
       max-width: none;
     }
   }
-
-  &--fit-contain &__image-frame .block__image { object-fit: contain; }
-  &--fit-cover &__image-frame .block__image { object-fit: cover; }
+  &--fit-cover &__image-frame .block__image { object-fit: cover; object-position: top; }
   &--fit-fill &__image-frame .block__image { object-fit: fill; }
 
-  // En una columna (estrecho) la imagen vuelve al flujo normal.
-  @container content (max-width: #{$bp-sm}) {
+  // "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 {
       position: static;
       min-height: 0;
@@ -137,7 +209,9 @@
   }
 
   // Imagen flotada: el texto la rodea y sigue por debajo (cleartext, como
-  // CDL). En estrecho la imagen va arriba a lo ancho, sin flotar.
+  // CDL), con un margen de $space-4 (16px) hacia el texto por los lados que
+  // lo tocan. En vertical (< 768) la imagen va arriba a lo ancho, sin
+  // flotar.
   &--image-clear-left .block__media-layout,
   &--image-clear-right .block__media-layout {
     display: block;
@@ -145,20 +219,24 @@
     // Clearfix: el bloque no se corta si la imagen es más alta que el texto.
     &::after { content: ""; display: table; clear: both; }
 
-    .block__image { margin-bottom: $space-3; }
+    .block__image { margin-bottom: $space-4; }
   }
   &--image-clear-left .block__media-layout .block__image {
-    @container content (min-width: #{$bp-sm}) {
+    @container content (min-width: #{$bp-md}) {
       float: left;
       max-width: 50%;
-      margin-right: $space-4;
+      // 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;
     }
   }
   &--image-clear-right .block__media-layout .block__image {
-    @container content (min-width: #{$bp-sm}) {
+    @container content (min-width: #{$bp-md}) {
       float: right;
       max-width: 50%;
-      margin-left: $space-4;
+      margin: $space-4 0 $space-4 $space-4;
+      vertical-align: top;
     }
   }
 
@@ -204,18 +282,20 @@
   }
 
   // La imagen del CTA sangra hasta el borde de la tarjeta según su posición:
-  // en columnas toca arriba, abajo y su lateral (el título viaja a la
-  // columna de texto); arriba/abajo toca los laterales. Esquinas siguiendo
-  // el radio de la tarjeta.
-  // La tarjeta del CTA lleva un halo SUTIL del acento, igual por los cuatro
-  // bordes (sin offset), además de su sombra de profundidad normal.
-  &--cta .block__card {
+  // 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,
+  &--text-card .block__card {
     box-shadow: $shadow-sm, 0 0 18px color-mix(in srgb, $accent-500 30%, transparent);
   }
 
   &--cta.block--image-right .block__media-layout .block__image-frame,
   &--cta.block--image-left .block__media-layout .block__image-frame {
-    @container content (min-width: #{$bp-sm}) {
+    @container content (min-width: #{$bp-md}) {
       overflow: hidden;
       min-height: 0;
 
@@ -223,13 +303,13 @@
     }
   }
   &--cta.block--image-right .block__media-layout .block__image-frame {
-    @container content (min-width: #{$bp-sm}) {
+    @container content (min-width: #{$bp-md}) {
       margin: (-$space-8) (-$space-8) (-$space-8) 0;
       border-radius: 0 $radius-lg $radius-lg 0;
     }
   }
   &--cta.block--image-left .block__media-layout .block__image-frame {
-    @container content (min-width: #{$bp-sm}) {
+    @container content (min-width: #{$bp-md}) {
       margin: (-$space-8) 0 (-$space-8) (-$space-8);
       border-radius: $radius-lg 0 0 $radius-lg;
     }
@@ -250,11 +330,11 @@
     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 con imagen en VERTICAL (< 768): 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-md}) {
     &--cta[class*="block--image-"] .block__card .block__media-layout {
       > .block__image,
       > .block__image-frame {
@@ -297,8 +377,8 @@
     }
   }
 
-  // Cita: sin adorno de borde, en GRANDE ($fs-32, el token más cercano a
-  // los ~40px pedidos) 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
@@ -337,7 +417,21 @@
   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).
+  // Numerado: la numeración anidada (1, 1.1, 1.2.1…) la pinta el
+  // componente — fuera los números nativos del ol.
+  &--numbered {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  .block__index-number {
+    margin-right: $space-2;
+    color: $text-2;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // 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; }

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

@@ -7,6 +7,12 @@
   font-size: $fs-16;
   line-height: $k-lh-body;
 
+  // Las NEGRITAS del wysiwyg, en el color de acento.
+  strong,
+  b {
+    color: $accent-500;
+  }
+
   // Aire entre TODOS los elementos del wysiwyg (párrafos, listas, títulos…).
   p,
   ul,
@@ -28,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

@@ -28,7 +28,9 @@ const layoutStyle = computed(() => {
   >
     <div class="block__card">
       <!-- 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. -->
+           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>

package/src/blocks/BlockIndex.vue

@@ -1,24 +1,43 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import BlockShell from './BlockShell.vue'
 
 // Í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<{
+const props = defineProps<{
   settings: Record<string, unknown>
   data: { items?: { id: number; label: string; depth?: number }[] }
 }>()
+
+// Numeración ANIDADA del modo numerado (1, 1.1, 1.2, 1.2.1…): la lista
+// llega plana en preorden con `depth`, así que basta una pila de contadores.
+const numbered = computed(() => {
+  const counters: number[] = []
+  return (props.data.items ?? []).map((item) => {
+    const depth = item.depth ?? 0
+    counters.length = depth + 1
+    counters[depth] = (counters[depth] ?? 0) + 1
+    return { ...item, number: counters.join('.') }
+  })
+})
 </script>
 
 <template>
   <BlockShell :settings="settings" class="block--index">
     <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). -->
+    <component
+      :is="settings.numbered ? 'ol' : 'ul'"
+      class="block__index"
+      :class="{ 'block__index--numbered': settings.numbered }"
+    >
+      <!-- Tamaño por nivel (el 3 agrupa "3 o más"); la SANGRÍA, en cambio,
+           escala con la profundidad real (--depth, sin tope). Numerado: la
+           numeración es ANIDADA (1, 1.1, 1.2.1…), calculada aquí — el ol
+           nativo no sabe numerar una lista plana con profundidades. -->
       <li
-        v-for="item in data.items ?? []"
+        v-for="item in numbered"
         :key="item.id"
         :style="{ '--depth': item.depth ?? 0 }"
         :class="[
@@ -26,6 +45,7 @@ defineProps<{
           { 'block__index-child': (item.depth ?? 0) > 0 },
         ]"
       >
+        <span v-if="settings.numbered" class="block__index-number">{{ item.number }}</span>
         <a :href="`#block-${item.id}`">{{ item.label }}</a>
       </li>
     </component>

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/blocks/BlockTextCard.vue

@@ -12,7 +12,13 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
     :class="settings.image ? `block--image-${settings.image_position || 'top'}` : ''"
   >
     <div class="block__card">
-      <span v-if="settings.label" class="block__label">{{ settings.label }}</span>
+      <span
+        v-if="settings.label"
+        class="block__label"
+        :class="`block__label--${settings.label_align || 'left'}`"
+      >
+        {{ settings.label }}
+      </span>
       <h2 v-if="settings.title" class="block__title">{{ settings.title }}</h2>
       <p v-if="settings.subtitle" class="block__subtitle">{{ settings.subtitle }}</p>
       <div class="block__media-layout">

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