@edc-motor/ui 0.4.19 → 0.4.21

package/package.json

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

@@ -113,6 +113,11 @@ $input-border-hover: $border-strong;
 $input-border-focus: $accent-500;
 $input-focus-ring: $focus-ring;
 
+// Separación entre los ELEMENTOS de un bloque del CRM (título, subtítulo,
+// texto, botón…): un único token para todos los huecos interiores de los
+// bloques (antes cada zona llevaba el suyo: 20/16/12px).
+$block-gap: $space-6; // 24px
+
 // ---------------------------------------------------------
 // Texto que CONTRASTA con un fondo arbitrario (el acento elegido en
 // Ajustes, el color de una acción…): el navegador resuelve claro u oscuro

package/scss/components/_blocks.scss

@@ -11,7 +11,7 @@
     margin: 0 auto;
     padding: 0 $space-4;
     display: grid;
-    gap: $space-5; // separación entre los elementos del bloque
+    gap: $block-gap; // separación entre los elementos del bloque
   }
 
   // Anchura del contenido (campo común `width`): coherente entre bloques.
@@ -28,6 +28,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;
@@ -51,7 +61,7 @@
     box-shadow: $shadow-sm;
     padding: $space-8;
     display: grid;
-    gap: $space-4;
+    gap: $block-gap;
 
     .edc-button { justify-self: start; text-decoration: none; }
   }
@@ -156,9 +166,13 @@
   // Cuerpo del CTA (texto + botón) dentro de su media-layout.
   &__cta-body {
     display: grid;
-    gap: $space-3;
+    gap: $block-gap;
     justify-items: start;
     align-content: center; // centrado frente a la imagen sangrada
+
+    // El botón respira más que el resto: su hueco total (gap + margen)
+    // casi DOBLA la separación normal entre elementos del bloque.
+    .block-button { margin-top: $space-5; }
   }
 
   // Botón del CTA: en estrecho va SIEMPRE centrado (como el del related);
@@ -222,23 +236,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; }
   }
 }
 

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

@@ -12,6 +12,13 @@ const width = computed(() => `block--w-${(props.settings.width as string) || 'wi
 // 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
   return {
@@ -24,7 +31,11 @@ const style = computed<CSSProperties>(() => {
 </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>