@edc-motor/ui 0.4.19 → 0.4.20

package/package.json

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

@@ -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;
@@ -222,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; }
   }
 }
 

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>