@edc-motor/ui 0.4.18 → 0.4.19

package/package.json

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

@@ -22,7 +22,7 @@
   }
 
   .block__related-button {
-    justify-self: start;
+    justify-self: center; // estrecho: los botones de bloque van centrados
 
     @media (min-width: $bp-sm) {
       justify-self: end;

package/scss/components/_blocks.scss

@@ -21,7 +21,8 @@
   // 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; }
-  &__subtitle { margin: 0; color: $text-2; font-size: $fs-20; }
+  // 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; }
   &__text { color: $text-1; font-size: $fs-16; }
 
   &--align-justify &__title,
@@ -160,10 +161,30 @@
     align-content: center; // centrado frente a la imagen sangrada
   }
 
+  // Botón del CTA: en estrecho va SIEMPRE centrado (como el del related);
+  // de $bp-sm para arriba manda su campo "Alineación del botón".
+  &__cta-button--left,
+  &__cta-button--center,
+  &__cta-button--right {
+    justify-self: center;
+  }
+
+  @media (min-width: $bp-sm) {
+    &__cta-button--left { justify-self: start; }
+    &__cta-button--center { justify-self: center; }
+    &__cta-button--right { justify-self: end; }
+  }
+
   // 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 {
+    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}) {
@@ -267,6 +288,9 @@
   align-items: center;
   gap: $space-2;
   padding: $space-2 $space-5;
+
+  // "Botón grande" (campo button_large del CTA): más aire interior.
+  &--large { padding: $space-4 $space-8; }
   border: 1px solid $accent-500;
   border-radius: $radius-md;
   font-size: $fs-18;

package/src/blocks/BlockCta.vue

@@ -44,10 +44,16 @@ const layoutStyle = computed(() => {
             <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) -->
           <a
             v-if="settings.button_text && settings.button_url"
             class="block-button"
-            :class="`block-button--${settings.button_variant || 'primary'}`"
+            :class="[
+              `block-button--${settings.button_variant || 'primary'}`,
+              `block__cta-button--${settings.button_align || 'left'}`,
+              settings.button_large ? 'block-button--large' : '',
+            ]"
             :href="String(settings.button_url)"
           >
             {{ settings.button_text }}

package/src/blocks/BlockShell.vue

@@ -9,7 +9,8 @@ import { computed, type CSSProperties } from 'vue'
 const props = defineProps<{ settings: Record<string, unknown> }>()
 
 const width = computed(() => `block--w-${(props.settings.width as string) || 'wide'}`)
-const align = computed(() => `block--align-${(props.settings.align as string) || 'left'}`)
+// Sin valor guardado, JUSTIFICADO (el default del campo común del motor).
+const align = computed(() => `block--align-${(props.settings.align as string) || 'justify'}`)
 
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
@@ -17,7 +18,7 @@ const style = computed<CSSProperties>(() => {
     '--block-bg': background
       ? `color-mix(in srgb, ${background} var(--block-tint, 15%), transparent)`
       : 'transparent',
-    textAlign: ((props.settings.align as string) || 'left') as CSSProperties['textAlign'],
+    textAlign: ((props.settings.align as string) || 'justify') as CSSProperties['textAlign'],
   }
 })
 </script>