libreria-astro-lefebvre 0.1.95 → 0.1.96

package/package.json

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

package/src/carbins/Grid_2026_Aldaia.ts

@@ -4,10 +4,10 @@ export const metadata: ComponentMetadata = {
   component_name: 'Grid_2026_Aldaia',
   category: 'Contenido con listas',
   name: 'Grid de cards con imagen, etiqueta, título y enlace "Más información" (4 columnas) 2026',
-  description: 'Bloque con título opcional (h2 centrado) y un grid de cards: 4 columnas en escritorio, 2 en tablet y 1 en móvil, que crece en filas según el número de ítems. Cada card muestra la imagen recortada a 154px de alto, una etiqueta en mayúsculas (fecha o keywords), el título y un enlace "Más información" con flecha; toda la card es clicable. Emite un ItemList en JSON-LD con los ítems',
+  description: 'Bloque con título opcional (h2 centrado) y un grid de cards: 4 columnas en escritorio y 2 en tablet, que crece en filas según el número de ítems; en móvil las cards se disponen en una fila con scroll horizontal y snap. Cada card muestra la imagen recortada a 154px de alto, una etiqueta en mayúsculas (fecha o keywords), el título y un enlace "Más información" con flecha; toda la card es clicable. Emite un ItemList en JSON-LD con los ítems',
   framework: 'Astro',
   priority: 1,
-  tags: ['grid', 'card', 'imagen', 'boletines', 'listado', 'enlace'],
+  tags: ['grid', 'card', 'carrusel', 'scroll', 'imagen', 'boletines', 'listado', 'enlace'],
   fields: [
     {
       name: 'title',
@@ -40,7 +40,7 @@ export const metadata: ComponentMetadata = {
       type: 'list',
       label: 'Listado de cards',
       mandatory: false,
-      help: 'Cards del bloque. Se muestran en un grid de 4 columnas en escritorio (a partir de la quinta card se crea una nueva fila), 2 en tablet y 1 en móvil',
+      help: 'Cards del bloque. Se muestran en un grid de 4 columnas en escritorio (a partir de la quinta card se crea una nueva fila), 2 en tablet, y en móvil en una fila con scroll horizontal',
       items: {
         type: 'object',
         fields: [

package/src/components/Astro/Grid_2026_Aldaia.astro

@@ -47,11 +47,11 @@ const structuredData = `<script type="application/ld+json">
     {title && title.trim() !== '' && (
         <h2 class="font-poppins text-[#262626] text-[36px] md:text-[40px] font-normal text-center leading-[48px] my-8 md:mb-8 px-8" set:html={title}></h2>
     )}
-    <ul class="list-none m-0 w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-8 lg:px-0 mt-4 md:mt-0">
+    <ul class="aldaia-list list-none m-0 w-full flex gap-4 overflow-x-auto snap-x snap-mandatory px-8 scroll-px-8 pb-4 mt-4 md:grid md:grid-cols-2 lg:grid-cols-4 md:gap-8 md:overflow-visible md:pb-0 md:mt-0 lg:px-0">
         {items.map((item: AldaiaItem) => {
             const tag = etiquetaVisible === "fecha" ? item.fecha : item.keywords;
             return (
-            <li class="w-full flex flex-col">
+            <li class="shrink-0 w-72 snap-start flex flex-col md:w-auto">
                 <article class="relative w-full h-full flex flex-col rounded-lg border border-gray-200 shadow-article hover:bg-gradient-to-r from-[#001978] via-[#2134F1] to-[#F81BBD] transition-all duration-300 p-px">
                     <div class="w-full h-full flex flex-col bg-white mt-px rounded-tl-[7px] rounded-tr-[7px] rounded-b-lg overflow-hidden">
                         <img class="w-full h-[154px] object-cover object-top" src={extractImageUrl(item.image)} alt={item.altImage ?? ''} width="400" height="154" loading="lazy" />
@@ -79,9 +79,16 @@ const structuredData = `<script type="application/ld+json">
     .shadow-article {
         box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
     }
+    /* El SVG ya apunta a la derecha (8x15); el rotate(-90deg) del diseño lo dejaba apuntando hacia arriba. */
     .chevron {
-        width: 15px;
-        height: 7.5px;
-        transform: rotate(-90deg);
+        width: 7.5px;
+        height: 15px;
+    }
+    /* Carrusel en móvil: se navega con gesto/snap, sin barra de scroll visible. */
+    .aldaia-list {
+        scrollbar-width: none;
+    }
+    .aldaia-list::-webkit-scrollbar {
+        display: none;
     }
 </style>