libreria-astro-lefebvre 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",

package/src/carbins/Texto_2026_Castellon.ts

@@ -20,7 +20,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'title',
       type: 'text',
-      help: 'Título principal. Admite HTML. La etiqueta HTML (h1-h6) se elige en el campo "Etiqueta del título". El estilo visual es el mismo para cualquier etiqueta; solo cambia la semántica/SEO.',
+      help: 'Título principal. Admite HTML. La etiqueta HTML y su estilo visual se eligen en el campo "Etiqueta del título" (cada variante tiene su propio tamaño, leading y márgenes).',
       label: 'Texto del título',
       mandatory: true,
       example_value: 'Inteligencia artificial al servicio del Derecho'
@@ -37,7 +37,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'titleAlign',
       type: 'select',
-      help: 'Alineación horizontal del pretítulo, del título y del botón. La descripción siempre se renderiza a ancho completo, sin alineación configurable.',
+      help: 'Alineación horizontal del pretítulo, del título, de la descripción y del botón. La descripción mantiene siempre ancho completo (w-full); solo cambia la alineación de su texto interno.',
       label: 'Alineación del título',
       options: ['left', 'center', 'right'],
       options_labels: ['Izquierda', 'Centro', 'Derecha'],
@@ -46,7 +46,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'description',
       type: 'textArea',
-      help: 'Descripción a ancho completo del contenedor padre. Admite HTML (editor enriquecido). Solo se muestra si tiene valor.',
+      help: 'Descripción a ancho completo del contenedor padre. Admite HTML (editor enriquecido). La alineación del texto interno sigue el campo "Alineación del título". Solo se muestra si tiene valor.',
       label: 'Descripción',
       mandatory: false,
       example_value: '<p>Descubre cómo la IA jurídica transforma el trabajo diario de los despachos de abogados.</p>'

package/src/components/Astro/Texto_2026_Castellon.astro

@@ -12,10 +12,15 @@ const {
 
 const alignClass = titleAlign === 'center' ? 'text-center' : titleAlign === 'right' ? 'text-right' : 'text-left';
 const btnSelf = titleAlign === 'center' ? 'self-center' : titleAlign === 'right' ? 'self-end' : 'self-start';
+const pretitleMargin = titleAlign === 'center' ? 'mx-auto' : titleAlign === 'right' ? 'ml-auto' : '';
 ---
 
 <section class="w-full flex flex-col gap-4">
-    {pretitle && <span class={`block w-full font-inter text-[#363942] text-sm md:text-base font-normal ${alignClass}`} set:html={pretitle}></span>}
+    {pretitle && (
+        <div class={`w-auto w-fit ${pretitleMargin}`}>
+            <span class="block font-inter text-[#363942] text-sm md:text-base font-normal rounded-sm bg-[#F2F3F8] py-2 px-3" set:html={pretitle}></span>
+        </div>
+    )}
 
     {title && titleTag === 'h1' && <h1 class={`font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal ${alignClass} leading-[44px] md:leading-[64px] px-6 md:my-12`} set:html={title}></h1>}
     {title && titleTag === 'h1-40' && <h1 class={`font-poppins text-[#262626] text-[40px] font-normal ${alignClass} leading-[48px] mb-8`} set:html={title}></h1>}
@@ -25,7 +30,7 @@ const btnSelf = titleAlign === 'center' ? 'self-center' : titleAlign === 'right'
     {title && titleTag === 'h5' && <h5 class={`font-poppins text-[#262626] ${alignClass}`} set:html={title}></h5>}
     {title && titleTag === 'h6' && <h6 class={`font-poppins text-[#262626] ${alignClass}`} set:html={title}></h6>}
 
-    {description && <div class="w-full font-inter text-[#363942] text-base font-normal leading-7" set:html={description}></div>}
+    {description && <div class={`w-full font-inter text-[#363942] text-base font-normal leading-7 ${alignClass}`} set:html={description}></div>}
 
     {showBtn && btnLabel && (
         <a href={btnSrc} class={`${btnSelf} text-white font-inter font-normal bg-[#2134F1] px-5 py-3 border border-[#2134F1] rounded-xl hover:bg-white hover:text-[#2134F1] transition-all duration-300`}>{btnLabel}</a>