libreria-astro-lefebvre 0.1.83 → 0.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",
@@ -42,4 +42,3 @@
     "typescript": "^5.8.3"
   }
 }
- 

package/src/carbins/Hero_2026_Lliria.ts

@@ -36,7 +36,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'imageAlt',
       type: 'text',
-      help: 'Texto alternativo de la imagen de fondo para accesibilidad. Si la imagen es puramente decorativa, puede dejarse vacío',
+      help: 'Texto alternativo de la imagen de fondo. Al ser una imagen decorativa detrás del texto, lo recomendable es dejarlo VACÍO (el lector de pantalla la ignorará). Rellenar solo si la imagen aporta información que no está en el título ni en la descripción',
       label: 'Alt de la imagen',
       mandatory: false,
       example_value: 'Dos profesionales revisando documentación en una tablet'
@@ -44,7 +44,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'ctaText',
       type: 'text',
-      help: 'Texto del botón CTA. El botón SOLO se muestra en móvil (en escritorio el diseño no lo incluye). Si se deja vacío, no aparece ningún botón',
+      help: 'Texto del botón CTA. El botón SOLO se muestra en móvil (en escritorio el diseño no lo incluye). Si se deja vacío el texto o la URL, no aparece ningún botón',
       label: 'Texto del botón (solo móvil)',
       mandatory: false,
       example_value: 'Pruébalo ya'
@@ -52,7 +52,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'ctaUrl',
       type: 'text',
-      help: 'URL de destino del botón CTA móvil. Solo tiene efecto si se ha informado el texto del botón',
+      help: 'URL de destino del botón CTA móvil. Obligatoria para que el botón se muestre: sin URL no se renderiza el botón aunque tenga texto',
       label: 'URL del botón',
       mandatory: false,
       example_value: 'https://www.lefebvre.es/tienda/apuntes-y-consejos'

package/src/components/Astro/Contenido_2025_Malaga.astro

@@ -16,13 +16,18 @@ const {
     fontSize = 'base',
     alignItems = 'center',
     h2Size = 'default',
+    h2SizeBreakpoint = 'lg',
     h2MarginBottom = 'mb-8',
     h2AlignClass = 'text-center lg:text-left',
     h2TrackingClass = '',
-    imageAspectClass = '',
+    imageAspectClass = 'h-auto',
     imageSizeClass = 'md:max-w-xl w-full md:w-[75%]',
     columnGapClass = 'gap-6',
     contentPaddingClass = 'p-4 pr-4',
+    rowBreakpoint = 'md',
+    contentWidthBreakpoint = 'lg',
+    outerPaddingClass = '',
+    rowMaxWidthClass = '',
     loading = 'lazy' as 'lazy' | 'eager',
 
     showBtn = false,
@@ -41,6 +46,23 @@ const {
     const imageModalUrl = extractImageUrl(imageModal);
     const randomId = Math.floor(Math.random() * 1000);
 
+    // Tailwind necesita ver cada clase completa de forma literal en el código para
+    // generarla — no puede resolver un prefijo de breakpoint interpolado en runtime
+    // (`${breakpoint}:utilidad`). Por eso aquí se enumeran las dos combinaciones
+    // posibles (md/lg) en vez de construir el prefijo dinámicamente.
+    const rowFlexClass = rowBreakpoint === 'lg' ? 'lg:flex' : 'md:flex';
+    const rowWidthClass = rowBreakpoint === 'lg' ? 'lg:w-4/5' : 'md:w-4/5';
+    const rowFlex1Class = rowBreakpoint === 'lg' ? 'lg:flex-1' : 'md:flex-1';
+    const rowMinW0Class = rowBreakpoint === 'lg' ? 'lg:min-w-0' : 'md:min-w-0';
+    const contentFlex1Class = contentWidthBreakpoint === 'lg' ? 'lg:flex-1' : 'md:flex-1';
+    const contentMinW0Class = contentWidthBreakpoint === 'lg' ? 'lg:min-w-0' : 'md:min-w-0';
+    const h2AltSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[40px]' : 'md:text-[40px]';
+    const h2AltLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[48px]' : 'md:leading-[48px]';
+    const h2IcoSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[46px]' : 'md:text-[46px]';
+    const h2IcoLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[54px]' : 'md:leading-[54px]';
+    const h2LargeSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[56px]' : 'md:text-[56px]';
+    const h2LargeLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[64px]' : 'md:leading-[64px]';
+
 // Extraer todos los crops definidos en el carbin (base, skyscraper)
 // Funciona igual con JSON de PageBuilder o con objeto simple { base: "url", skyscraper: "url" }
 const crops = extractAllCrops(image) as Record<string, string>;
@@ -63,7 +85,7 @@ const videoUrl = iframeSrc || '';
 <section class="w-full flex items-center justify-center">
     {showImage ? (
         <article class={`w-${width} flex flex-col items-center justify-center py-6`}>
-            <div class={`flex-col md:flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full md:w-4/5 items-${alignItems} ${columnGapClass}`}>
+            <div class={`flex-col ${rowFlexClass} ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full ${rowWidthClass} ${rowMaxWidthClass} items-${alignItems} ${columnGapClass} ${outerPaddingClass}`}>
                 {showIco ? (
                     <div class={`flex ${flexOrientation === 'row' ? 'flex-row' : 'flex-col'} w-full md:w-1/2 gap-6 p-4`}>
                         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[30px]">
@@ -76,7 +98,7 @@ const videoUrl = iframeSrc || '';
                         </svg>
                         <div class={`w-full ${orientation === 'left' ? `pl-[${paddingLeft}px]` : `pr-[${paddingLeft}px]`}`}>
                                 {title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
-                                <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[46px] leading-[44px] lg:leading-[54px]'}`} set:html={subtitle}></h2>
+                                <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2IcoSizeClass} leading-[44px] ${h2IcoLeadingClass}`}`} set:html={subtitle}></h2>
                         
                             <div 
                             class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`} 
@@ -110,10 +132,10 @@ const videoUrl = iframeSrc || '';
                             }
                         }                   
                     </style>
-                    <div class={`w-full lg:w-1/2 ${contentPaddingClass} ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
+                    <div class={`w-full ${contentFlex1Class} ${contentMinW0Class} ${contentPaddingClass} ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
                     style={{ 'padding-left': `${paddingLeft}px` }}>
                         {title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
-                        <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[56px] leading-[44px] lg:leading-[64px]'}`} set:html={subtitle}></h2>
+                        <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
                         <div 
                         class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`} 
                         set:html={description}
@@ -134,13 +156,13 @@ const videoUrl = iframeSrc || '';
 
                 )}
                 
-                <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
+                <div class={`w-full ${rowFlex1Class} ${rowMinW0Class} p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
                     {videoUrl ? (
                         <video autoplay loop muted playsinline preload="metadata" width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto">
                             <source src={videoUrl} type="video/mp4" />
                         </video>
                     ) : (
-                        <img src={imageUrl} alt={title} width="600" height="450" class={`${imageSizeClass} h-auto object-cover rounded-lg m-auto ${imageAspectClass}`} loading={loading} />
+                        <img src={imageUrl} alt={title} width="600" height="450" class={`${imageSizeClass} object-cover rounded-lg m-auto ${imageAspectClass}`} loading={loading} />
                     )}
                 </div>
                 
@@ -165,7 +187,7 @@ const videoUrl = iframeSrc || '';
 
                         <div class="w-1/2 p-4 flex flex-col flex-wrap ">
                             {title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
-                            <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[56px] leading-[44px] lg:leading-[64px]'}`} set:html={subtitle}></h2>
+                            <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
                             <div 
                             class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8" 
                             set:html={description} 
@@ -188,7 +210,7 @@ const videoUrl = iframeSrc || '';
                 ) : (
                     <div class="w-1/2 p-4 flex flex-col flex-wrap ">
                         {title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
-                        <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[56px] leading-[44px] lg:leading-[64px]'}`} set:html={subtitle}></h2>
+                        <h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
                         <div 
                         class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8" 
                         set:html={description} 

package/src/components/Astro/Hero_2026_Lliria.astro

@@ -5,33 +5,42 @@ const {
     title,
     description,
     image,
-    imageAlt = '',
+    imageAlt,
     ctaText,
-    ctaUrl = '#'
+    ctaUrl
 } = Astro.props;
+
+// ACCESIBILIDAD Imagen de fondo: si no llega alt (undefined o null desde Mecano) forzamos alt="" para que el lector de pantalla no anuncie el nombre del fichero.
+const safeImageAlt = imageAlt ?? '';
+
+// ACCESIBILIDAD El CTA solo se renderiza si hay texto Y URL; evita enlaces "#" que solo saltan al inicio de la página.
+const showCta = Boolean(ctaText && ctaUrl);
+
+// ACCESIBILIDAD Id único por instancia para enlazar la sección con su h1 (aria-labelledby) sin colisionar si hay varios heros.
+const titleId = 'hero-title-' + Math.random().toString(36).substring(2, 10);
 ---
 
-<section class="relative w-full overflow-hidden bg-gray-100">
+<section class="relative w-full overflow-hidden bg-gray-100" aria-labelledby={title ? titleId : undefined}>
     <LimboImage
         src={image}
-        alt={imageAlt}
+        alt={safeImageAlt}
         class="absolute inset-0 w-full h-full object-cover object-left md:object-center"
         loading="eager"
     />
     <div class="relative max-w-7xl w-full mx-auto flex items-center min-h-[600px] px-8 md:px-0">
-        <div class="w-full md:w-1/2 flex flex-col items-start gap-8 py-8 md:py-20 md:pr-16">
+        <div class="w-full md:w-1/2 flex flex-col items-start gap-8 pl-8 py-8 md:pl-6 md:py-20 md:pr-16">
             <div class="flex flex-col gap-4 w-full">
                 {title && (
-                    <h1 class="font-poppins text-[#262626] text-4xl leading-[44px] tracking-[-0.5px] font-semibold md:text-[56px] md:leading-[64px] md:tracking-[-1px] md:font-normal" set:html={title}></h1>
+                    <h1 id={titleId} class="font-poppins text-[#262626] text-4xl leading-[44px] tracking-[-0.5px] font-semibold md:text-[56px] md:leading-[64px] md:tracking-[-1px] md:font-normal" set:html={title}></h1>
                 )}
                 {description && (
                     <p class="font-poppins text-[#262626] text-[28px] leading-9 md:text-[32px] md:leading-10 font-normal" set:html={description}></p>
                 )}
             </div>
-            {ctaText && (
+            {showCta && (
                 <a
                     href={ctaUrl}
-                    class="md:hidden inline-flex items-center justify-center w-fit h-10 px-4 rounded-lg bg-[#00092CE5] text-white font-inter text-base font-semibold leading-6 shadow-md"
+                    class="md:hidden inline-flex items-center justify-center w-fit min-h-11 h-11 px-4 rounded-lg bg-[#00092CE5] text-white font-inter text-base font-semibold leading-6 shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#00092C]"
                 >
                     {ctaText}
                 </a>