@edc-motor/ui 0.4.18 → 0.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "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,12 +21,23 @@
   // 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,
   &--align-justify &__subtitle { text-align: left; }
 
+  // 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; }
+
   &__label {
     display: inline-block;
     justify-self: start;
@@ -160,10 +171,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}) {
@@ -201,23 +232,28 @@
     border-radius: 0 0 $radius-lg $radius-lg;
   }
 
+  // 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 {
     margin: 0;
-    border-left: 3px solid $accent-500;
-    padding-left: $space-4;
     // 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-24;
+    font-size: $fs-32;
     font-style: italic;
+    color: $accent-500;
   }
   &__author {
     margin-top: $space-2;
     color: $text-3;
     // El autor no hereda la fuente especial de la cita.
     font-family: var(--font-body, inherit);
-    font-style: normal;
+    font-style: italic;
     font-size: $fs-14;
+
+    &--left { text-align: left; }
+    &--center { text-align: center; }
+    &--right { text-align: right; }
   }
 }
 
@@ -267,6 +303,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/BlockQuote.vue

@@ -12,7 +12,13 @@ defineProps<{ settings: Record<string, unknown>; data?: Record<string, unknown>
     <blockquote class="block__quote">
       <img v-if="settings.image" class="block__avatar" :src="String(settings.image)" alt="" />
       <div class="rich-content" v-html="settings.quote" />
-      <footer v-if="settings.author" class="block__author">— {{ settings.author }}</footer>
+      <footer
+        v-if="settings.author"
+        class="block__author"
+        :class="`block__author--${settings.author_align || 'left'}`"
+      >
+        — {{ settings.author }}
+      </footer>
     </blockquote>
   </BlockShell>
 </template>

package/src/blocks/BlockShell.vue

@@ -9,7 +9,15 @@ 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'}`)
+
+// Alineación propia de título/subtítulo (campos comunes): solo pinta clase
+// con un valor explícito — "inherit" (o nada) deja mandar a la del bloque.
+const headingAlign = (key: 'title_align' | 'subtitle_align', prefix: string) => {
+  const value = props.settings[key] as string | undefined
+  return value && value !== 'inherit' ? `block--${prefix}-${value}` : ''
+}
 
 const style = computed<CSSProperties>(() => {
   const background = props.settings.background as string | undefined
@@ -17,13 +25,17 @@ 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>
 
 <template>
-  <section class="block" :class="[width, align]" :style="style">
+  <section
+    class="block"
+    :class="[width, align, headingAlign('title_align', 'title'), headingAlign('subtitle_align', 'subtitle')]"
+    :style="style"
+  >
     <div class="block__inner">
       <slot />
     </div>