@greghowe79/the-lib 2.8.7 → 2.8.8

package/lib/components/sliders/AnimatedTextSlider.qwik.cjs

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const styles = require("./styles.css.qwik.cjs");
+const AnimatedTextSlider = qwik.component$(({ headline, subtitle, items, duration, reverse }) => {
+  qwik.useStyles$(styles);
+  const activeIndex = qwik.useSignal(0);
+  const isPaused = qwik.useSignal(false);
+  const isCarousel = qwik.useSignal(false);
+  const carouselRef = qwik.useSignal();
+  const wrapperRef = qwik.useSignal();
+  const durationMs = qwik.useComputed$(() => duration || 8e3);
+  const updateCarouselMode = qwik.$(() => {
+    isCarousel.value = window.innerWidth < 1024;
+  });
+  qwik.useOnWindow("resize", updateCarouselMode);
+  const fixCarouselHeight = qwik.$(() => {
+    const wrapper = wrapperRef.value;
+    if (!wrapper) return;
+    if (!isCarousel.value) {
+      wrapper.style.height = "";
+      return;
+    }
+    wrapper.style.height = "";
+    let maxH = 0;
+    for (let i = 0; i < wrapper.children.length; i++) {
+      maxH = Math.max(maxH, wrapper.children[i].scrollHeight);
+    }
+    if (maxH > 0) {
+      wrapper.style.height = `${maxH}px`;
+    }
+  });
+  qwik.useOnWindow("resize", fixCarouselHeight);
+  qwik.useVisibleTask$(() => {
+    updateCarouselMode();
+    fixCarouselHeight();
+  }, {
+    strategy: "document-idle"
+  });
+  qwik.useVisibleTask$(({ cleanup }) => {
+    const el = carouselRef.value;
+    if (!el) return;
+    let scrollTimeout;
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        if (!isCarousel.value) return;
+        const newIndex = Math.round(el.scrollLeft / el.offsetWidth);
+        if (newIndex >= 0 && newIndex < items.length && newIndex !== activeIndex.value) {
+          activeIndex.value = newIndex;
+        }
+      }, 100);
+    };
+    el.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    cleanup(() => {
+      el.removeEventListener("scroll", onScroll);
+      clearTimeout(scrollTimeout);
+    });
+  });
+  qwik.useVisibleTask$(({ track, cleanup }) => {
+    const index = track(() => activeIndex.value);
+    const paused = track(() => isPaused.value);
+    const ms = track(() => durationMs.value);
+    if (paused) return;
+    const timer = setTimeout(() => {
+      activeIndex.value = (index + 1) % items.length;
+    }, ms);
+    cleanup(() => clearTimeout(timer));
+  });
+  qwik.useVisibleTask$(({ track }) => {
+    const index = track(() => activeIndex.value);
+    if (!isCarousel.value) return;
+    const el = carouselRef.value;
+    if (!el) return;
+    el.scrollTo({
+      left: index * el.offsetWidth,
+      behavior: "smooth"
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: `glue-page ${reverse ? "glue-reverse" : ""}`,
+    style: {
+      "--duration": `${durationMs.value}ms`
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "glue-grid",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "glue-cell-pre-title"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "glue-cell-title",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "glue-text-center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", {
+                class: "glue-headline",
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  class: "glue-font-weight-medium",
+                  children: headline
+                })
+              }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "glue-spacer glue-body",
+                children: subtitle
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+                name: "header-extra"
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "glue-cell-post-title"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "glue-cell-pre-slider"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "glue-slider-image-container",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            class: "image-wrapper",
+            children: items.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs("picture", {
+              class: `slide-picture ${activeIndex.value === index ? "show" : ""}`,
+              "data-crop": "animatedTextImage-1x1",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("source", {
+                  srcset: slide.imageSources.webp,
+                  type: "image/webp",
+                  width: "999",
+                  height: "1000"
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("source", {
+                  srcset: slide.imageSources.fallback,
+                  width: "999",
+                  height: "1000"
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("img", {
+                  class: "Image slide-image-element",
+                  alt: slide.title,
+                  srcset: slide.imageSources.fallback,
+                  width: "999",
+                  height: "1000",
+                  loading: "lazy",
+                  src: slide.imageSources.src
+                })
+              ]
+            }, index))
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "animated-text-list",
+          ref: carouselRef,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            class: "glue-item-animated-wrapper",
+            ref: wrapperRef,
+            children: items.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              class: `item-animated ${activeIndex.value === index ? "is-active" : ""}`,
+              onClick$: () => activeIndex.value = index,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                  class: "glue-font-weight-medium item-title",
+                  children: slide.title
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  class: "accordion-content",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "accordion-inner glue-body",
+                    children: slide.description
+                  })
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  class: "progress-track",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "progress-bar"
+                  })
+                })
+              ]
+            }, index))
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "glue-pagination",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", {
+              class: "pagination-arrow",
+              onClick$: () => {
+                if (activeIndex.value > 0) activeIndex.value--;
+              },
+              disabled: activeIndex.value === 0,
+              "aria-label": "Slide precedente",
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
+                width: "24",
+                height: "24",
+                role: "presentation",
+                "aria-hidden": "true",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                  d: "M16.41 5.41L15 4l-8 8 8 8 1.41-1.41L9.83 12"
+                })
+              })
+            }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", {
+              class: "pagination-number",
+              children: [
+                activeIndex.value + 1,
+                " / ",
+                items.length
+              ]
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", {
+              class: "pagination-arrow",
+              onClick$: () => {
+                if (activeIndex.value < items.length - 1) activeIndex.value++;
+              },
+              disabled: activeIndex.value === items.length - 1,
+              "aria-label": "Slide successiva",
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
+                width: "24",
+                height: "24",
+                role: "presentation",
+                "aria-hidden": "true",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+                  d: "M7.59 18.59L9 20l8-8-8-8-1.41 1.41L14.17 12"
+                })
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+exports.AnimatedTextSlider = AnimatedTextSlider;

package/lib/components/sliders/AnimatedTextSlider.qwik.mjs

@@ -0,0 +1,238 @@
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStyles$, useSignal, useComputed$, $, useOnWindow, useVisibleTask$, Slot } from "@builder.io/qwik";
+import styles from "./styles.css.qwik.mjs";
+const AnimatedTextSlider = component$(({ headline, subtitle, items, duration, reverse }) => {
+  useStyles$(styles);
+  const activeIndex = useSignal(0);
+  const isPaused = useSignal(false);
+  const isCarousel = useSignal(false);
+  const carouselRef = useSignal();
+  const wrapperRef = useSignal();
+  const durationMs = useComputed$(() => duration || 8e3);
+  const updateCarouselMode = $(() => {
+    isCarousel.value = window.innerWidth < 1024;
+  });
+  useOnWindow("resize", updateCarouselMode);
+  const fixCarouselHeight = $(() => {
+    const wrapper = wrapperRef.value;
+    if (!wrapper) return;
+    if (!isCarousel.value) {
+      wrapper.style.height = "";
+      return;
+    }
+    wrapper.style.height = "";
+    let maxH = 0;
+    for (let i = 0; i < wrapper.children.length; i++) {
+      maxH = Math.max(maxH, wrapper.children[i].scrollHeight);
+    }
+    if (maxH > 0) {
+      wrapper.style.height = `${maxH}px`;
+    }
+  });
+  useOnWindow("resize", fixCarouselHeight);
+  useVisibleTask$(() => {
+    updateCarouselMode();
+    fixCarouselHeight();
+  }, {
+    strategy: "document-idle"
+  });
+  useVisibleTask$(({ cleanup }) => {
+    const el = carouselRef.value;
+    if (!el) return;
+    let scrollTimeout;
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        if (!isCarousel.value) return;
+        const newIndex = Math.round(el.scrollLeft / el.offsetWidth);
+        if (newIndex >= 0 && newIndex < items.length && newIndex !== activeIndex.value) {
+          activeIndex.value = newIndex;
+        }
+      }, 100);
+    };
+    el.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    cleanup(() => {
+      el.removeEventListener("scroll", onScroll);
+      clearTimeout(scrollTimeout);
+    });
+  });
+  useVisibleTask$(({ track, cleanup }) => {
+    const index = track(() => activeIndex.value);
+    const paused = track(() => isPaused.value);
+    const ms = track(() => durationMs.value);
+    if (paused) return;
+    const timer = setTimeout(() => {
+      activeIndex.value = (index + 1) % items.length;
+    }, ms);
+    cleanup(() => clearTimeout(timer));
+  });
+  useVisibleTask$(({ track }) => {
+    const index = track(() => activeIndex.value);
+    if (!isCarousel.value) return;
+    const el = carouselRef.value;
+    if (!el) return;
+    el.scrollTo({
+      left: index * el.offsetWidth,
+      behavior: "smooth"
+    });
+  });
+  return /* @__PURE__ */ jsx("div", {
+    class: `glue-page ${reverse ? "glue-reverse" : ""}`,
+    style: {
+      "--duration": `${durationMs.value}ms`
+    },
+    children: /* @__PURE__ */ jsxs("div", {
+      class: "glue-grid",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          class: "glue-cell-pre-title"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "glue-cell-title",
+          children: /* @__PURE__ */ jsxs("div", {
+            class: "glue-text-center",
+            children: [
+              /* @__PURE__ */ jsx("h2", {
+                class: "glue-headline",
+                children: /* @__PURE__ */ jsx("div", {
+                  class: "glue-font-weight-medium",
+                  children: headline
+                })
+              }),
+              subtitle && /* @__PURE__ */ jsx("div", {
+                class: "glue-spacer glue-body",
+                children: subtitle
+              }),
+              /* @__PURE__ */ jsx(Slot, {
+                name: "header-extra"
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "glue-cell-post-title"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "glue-cell-pre-slider"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "glue-slider-image-container",
+          children: /* @__PURE__ */ jsx("div", {
+            class: "image-wrapper",
+            children: items.map((slide, index) => /* @__PURE__ */ jsxs("picture", {
+              class: `slide-picture ${activeIndex.value === index ? "show" : ""}`,
+              "data-crop": "animatedTextImage-1x1",
+              children: [
+                /* @__PURE__ */ jsx("source", {
+                  srcset: slide.imageSources.webp,
+                  type: "image/webp",
+                  width: "999",
+                  height: "1000"
+                }),
+                /* @__PURE__ */ jsx("source", {
+                  srcset: slide.imageSources.fallback,
+                  width: "999",
+                  height: "1000"
+                }),
+                /* @__PURE__ */ jsx("img", {
+                  class: "Image slide-image-element",
+                  alt: slide.title,
+                  srcset: slide.imageSources.fallback,
+                  width: "999",
+                  height: "1000",
+                  loading: "lazy",
+                  src: slide.imageSources.src
+                })
+              ]
+            }, index))
+          })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "animated-text-list",
+          ref: carouselRef,
+          children: /* @__PURE__ */ jsx("div", {
+            class: "glue-item-animated-wrapper",
+            ref: wrapperRef,
+            children: items.map((slide, index) => /* @__PURE__ */ jsxs("div", {
+              class: `item-animated ${activeIndex.value === index ? "is-active" : ""}`,
+              onClick$: () => activeIndex.value = index,
+              children: [
+                /* @__PURE__ */ jsx("h3", {
+                  class: "glue-font-weight-medium item-title",
+                  children: slide.title
+                }),
+                /* @__PURE__ */ jsx("div", {
+                  class: "accordion-content",
+                  children: /* @__PURE__ */ jsx("div", {
+                    class: "accordion-inner glue-body",
+                    children: slide.description
+                  })
+                }),
+                /* @__PURE__ */ jsx("div", {
+                  class: "progress-track",
+                  children: /* @__PURE__ */ jsx("div", {
+                    class: "progress-bar"
+                  })
+                })
+              ]
+            }, index))
+          })
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: "glue-pagination",
+          children: [
+            /* @__PURE__ */ jsx("button", {
+              class: "pagination-arrow",
+              onClick$: () => {
+                if (activeIndex.value > 0) activeIndex.value--;
+              },
+              disabled: activeIndex.value === 0,
+              "aria-label": "Slide precedente",
+              children: /* @__PURE__ */ jsx("svg", {
+                width: "24",
+                height: "24",
+                role: "presentation",
+                "aria-hidden": "true",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx("path", {
+                  d: "M16.41 5.41L15 4l-8 8 8 8 1.41-1.41L9.83 12"
+                })
+              })
+            }),
+            /* @__PURE__ */ jsxs("span", {
+              class: "pagination-number",
+              children: [
+                activeIndex.value + 1,
+                " / ",
+                items.length
+              ]
+            }),
+            /* @__PURE__ */ jsx("button", {
+              class: "pagination-arrow",
+              onClick$: () => {
+                if (activeIndex.value < items.length - 1) activeIndex.value++;
+              },
+              disabled: activeIndex.value === items.length - 1,
+              "aria-label": "Slide successiva",
+              children: /* @__PURE__ */ jsx("svg", {
+                width: "24",
+                height: "24",
+                role: "presentation",
+                "aria-hidden": "true",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx("path", {
+                  d: "M7.59 18.59L9 20l8-8-8-8-1.41 1.41L14.17 12"
+                })
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+export {
+  AnimatedTextSlider
+};

package/lib/components/sliders/styles.css.qwik.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const styles = "/* =========================================\r\n   1. BASE\r\n   ========================================= */\r\n.glue-page {\r\n  margin: 0 10px;\r\n  --duration: 8000ms;\r\n  --active-size: 28px;\r\n  --inactive-size: 20px;\r\n  --spacing-top: 118px;\r\n  overflow-x: hidden;\r\n  text-rendering: optimizeLegibility;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.glue-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(5px, 1fr));\r\n  column-gap: 28px;\r\n  overflow-anchor: none;\r\n  align-items: center;\r\n}\r\n\r\n.glue-cell-pre-title,\r\n.glue-cell-post-title,\r\n.glue-cell-pre-slider {\r\n  display: none;\r\n}\r\n\r\n.glue-cell-title {\r\n  grid-column: 1 / -1;\r\n}\r\n\r\n.glue-text-center {\r\n  text-align: center;\r\n}\r\n\r\n.glue-headline {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  color: #333;\r\n  font-size: 1.75rem;\r\n  line-height: 1.2857;\r\n  font-weight: 500;\r\n  margin: 0;\r\n}\r\n\r\n.glue-body {\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n  color: #3c4043;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.glue-spacer {\r\n  margin-top: 24px;\r\n}\r\n\r\n/* =========================================\r\n   2. ACCORDION\r\n   ========================================= */\r\n.animated-text-list {\r\n  grid-column: 1 / -1;\r\n  align-self: center;\r\n  margin-top: 40px;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.glue-item-animated-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.item-animated {\r\n  position: relative;\r\n  cursor: pointer;\r\n  padding-left: 32px;\r\n  border: none;\r\n  scroll-margin-top: calc(var(--spacing-top) + 16px);\r\n  transition: padding 0.3s ease;\r\n}\r\n\r\n.item-animated:not(:first-child) {\r\n  margin-top: 32px;\r\n}\r\n\r\n.item-title {\r\n  margin: 0;\r\n  font-size: var(--inactive-size);\r\n  color: #5f6368;\r\n  font-weight: 400;\r\n  transition:\r\n    font-size 0.3s ease,\r\n    color 0.3s ease;\r\n}\r\n\r\n.item-animated.is-active .item-title {\r\n  font-size: var(--active-size);\r\n  color: #333;\r\n}\r\n\r\n.accordion-content {\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  opacity: 0;\r\n  transition:\r\n    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n    opacity 0.4s ease;\r\n}\r\n\r\n.item-animated.is-active .accordion-content {\r\n  max-height: 250px;\r\n  opacity: 1;\r\n}\r\n\r\n.accordion-inner {\r\n  padding-top: 12px;\r\n}\r\n\r\n/* Progress bar */\r\n.item-animated::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  width: 2px;\r\n  background-color: #f1f3f4;\r\n}\r\n\r\n.progress-track {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  width: 2px;\r\n  background-color: #dadce0;\r\n  overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n  width: 100%;\r\n  height: 0%;\r\n  background-color: #333;\r\n}\r\n\r\n.item-animated.is-active .progress-bar {\r\n  animation: progressFillVertical var(--duration) linear forwards;\r\n}\r\n\r\n@keyframes progressFillVertical {\r\n  from {\r\n    height: 0%;\r\n  }\r\n  to {\r\n    height: 100%;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   3. IMMAGINI\r\n   ========================================= */\r\n.glue-slider-image-container {\r\n  display: none;\r\n  grid-column: 1 / -1;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.image-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n  min-width: 280px;\r\n  aspect-ratio: 999 / 1000;\r\n}\r\n\r\n.slide-picture {\r\n  position: absolute;\r\n  inset: 0;\r\n  opacity: 0;\r\n  z-index: 0;\r\n  visibility: hidden;\r\n  transition:\r\n    opacity 0.6s ease-in-out,\r\n    visibility 0.6s;\r\n}\r\n\r\n.slide-picture.show {\r\n  opacity: 1;\r\n  z-index: 1;\r\n  visibility: visible;\r\n}\r\n\r\n.slide-image-element {\r\n  width: 100%;\r\n  height: auto;\r\n  object-fit: contain;\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   4. PAGINATION (nascosta di default)\r\n   ========================================= */\r\n.glue-pagination {\r\n  display: none;\r\n}\r\n\r\n.pagination-arrow {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 8px;\r\n  color: #5f6368;\r\n  font-size: 18px;\r\n  line-height: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: color 0.2s ease;\r\n}\r\n\r\n.pagination-arrow:hover {\r\n  color: #333;\r\n}\r\n\r\n.pagination-arrow:disabled {\r\n  visibility: hidden;\r\n}\r\n\r\n.pagination-number {\r\n  border: 1px solid #dadce0;\r\n  padding: 6px 20px;\r\n  border-radius: 20px;\r\n  font-size: 14px;\r\n  color: #5f6368;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  user-select: none;\r\n}\r\n\r\n/* =========================================\r\n   5. MOBILE + TABLET (< 1024px)\r\n   Layout carousel condiviso\r\n   ========================================= */\r\n@media (max-width: 1023px) {\r\n  .glue-grid {\r\n    grid-template-columns: 1fr;\r\n    column-gap: 0;\r\n    grid-template-areas:\r\n      'title'\r\n      'image'\r\n      'slider'\r\n      'pagination';\r\n    justify-items: center;\r\n    align-items: start;\r\n  }\r\n\r\n  .glue-cell-pre-title,\r\n  .glue-cell-post-title,\r\n  .glue-cell-pre-slider {\r\n    display: none;\r\n  }\r\n\r\n  .glue-cell-title {\r\n    grid-area: title;\r\n    grid-column: auto;\r\n    width: 100%;\r\n    max-width: 780px;\r\n  }\r\n\r\n  .glue-headline {\r\n    max-width: clamp(480px, 75%, 720px);\r\n    margin: 0 auto;\r\n  }\r\n\r\n  /* Immagine centrata sopra */\r\n  .glue-slider-image-container {\r\n    grid-area: image;\r\n    grid-column: auto;\r\n    display: flex;\r\n    width: 100%;\r\n    max-width: 780px;\r\n    padding: 20px;\r\n    margin-top: 40px;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .image-wrapper {\r\n    min-width: 280px;\r\n  }\r\n\r\n  /* Carousel: scroll-snap orizzontale */\r\n  .animated-text-list {\r\n    grid-area: slider;\r\n    grid-column: auto;\r\n    flex-direction: row;\r\n    overflow-x: auto;\r\n    scroll-snap-type: x mandatory;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    margin-top: 0;\r\n    padding: 0;\r\n    width: 100%;\r\n    max-width: 780px;\r\n  }\r\n\r\n  .animated-text-list::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .glue-item-animated-wrapper {\r\n    flex-direction: row;\r\n    min-width: 100%;\r\n    /* Altezza fissa: previene il resize a fisarmonica.\r\n       Tutti gli item si allineano in alto,\r\n       il wrapper mantiene l'altezza del più alto */\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .item-animated {\r\n    flex: 0 0 100%;\r\n    scroll-snap-align: center;\r\n    padding: 0 40px;\r\n    text-align: center;\r\n    margin-top: 0 !important;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .item-animated::before,\r\n  .progress-track {\r\n    display: none;\r\n  }\r\n\r\n  .item-title {\r\n    font-size: 1.5rem;\r\n    font-weight: 500;\r\n    color: #333;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .accordion-content {\r\n    max-height: none;\r\n    opacity: 1;\r\n    overflow: visible;\r\n    transition: none;\r\n  }\r\n\r\n  /* Paginazione visibile */\r\n  .glue-pagination {\r\n    grid-area: pagination;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    margin-top: 20px;\r\n    margin-bottom: 40px;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   5b. TABLET ≥ 600px (sovrascrive solo spacing)\r\n   ========================================= */\r\n@media (min-width: 600px) and (max-width: 1023px) {\r\n  .glue-page {\r\n    margin: 0 40px;\r\n  }\r\n\r\n  .glue-headline {\r\n    font-size: 2.5rem;\r\n    line-height: 1.2;\r\n    letter-spacing: -0.5px;\r\n  }\r\n\r\n  .image-wrapper {\r\n    min-width: 320px;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   5a. MOBILE < 600px (sovrascrive font)\r\n   ========================================= */\r\n@media (max-width: 599px) {\r\n  .glue-headline {\r\n    font-size: 1.75rem;\r\n    line-height: 1.2857;\r\n    letter-spacing: 0;\r\n  }\r\n\r\n  .item-title {\r\n    font-size: 20px;\r\n    font-weight: 400;\r\n  }\r\n\r\n  .accordion-inner {\r\n    color: #5f6368;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   6. DESKTOP ≥ 1024px\r\n   ========================================= */\r\n@media (min-width: 1024px) {\r\n  .glue-page {\r\n    margin: 0 72px;\r\n  }\r\n\r\n  .glue-grid {\r\n    grid-template-columns: repeat(12, minmax(5px, 1fr));\r\n    grid-template-areas: none;\r\n    column-gap: 48px;\r\n    height: 750px;\r\n    align-items: center;\r\n    justify-items: stretch;\r\n  }\r\n\r\n  /* Riga 1: titolo */\r\n  .glue-cell-pre-title {\r\n    display: block;\r\n    grid-column: 1 / span 1;\r\n    grid-row: 1;\r\n  }\r\n\r\n  .glue-cell-title {\r\n    grid-column: 2 / span 10;\r\n    grid-row: 1;\r\n    width: auto;\r\n    max-width: none;\r\n  }\r\n\r\n  .glue-cell-post-title {\r\n    display: block;\r\n    grid-column: 12 / span 1;\r\n    grid-row: 1;\r\n  }\r\n\r\n  .glue-headline {\r\n    font-size: 3rem;\r\n    line-height: 1.1666;\r\n    max-width: none;\r\n  }\r\n\r\n  .glue-cell-pre-slider {\r\n    display: block;\r\n    grid-column: 1 / span 1;\r\n    grid-row: 2;\r\n  }\r\n\r\n  /* Riga 2: accordion (sinistra) */\r\n  .animated-text-list {\r\n    grid-column: 2 / span 5;\r\n    grid-row: 2;\r\n    flex-direction: column;\r\n    overflow: visible;\r\n    scroll-snap-type: none;\r\n    width: auto;\r\n    max-width: none;\r\n    margin-top: 0;\r\n  }\r\n\r\n  .glue-item-animated-wrapper {\r\n    flex-direction: column;\r\n    min-width: unset;\r\n  }\r\n\r\n  .item-animated {\r\n    flex: unset;\r\n    text-align: left;\r\n    padding: 0 0 0 32px;\r\n    scroll-snap-align: unset;\r\n  }\r\n\r\n  .item-animated:not(:first-child) {\r\n    margin-top: 32px !important;\r\n  }\r\n\r\n  .item-title {\r\n    font-size: var(--inactive-size);\r\n    color: #5f6368;\r\n    font-weight: 400;\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .item-animated.is-active .item-title {\r\n    font-size: var(--active-size);\r\n    color: #333;\r\n  }\r\n\r\n  .item-animated::before,\r\n  .progress-track {\r\n    display: block;\r\n  }\r\n\r\n  .accordion-content {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow: hidden;\r\n    transition:\r\n      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n      opacity 0.4s ease;\r\n  }\r\n\r\n  .item-animated.is-active .accordion-content {\r\n    max-height: 250px;\r\n    opacity: 1;\r\n  }\r\n\r\n  .accordion-inner {\r\n    color: #3c4043;\r\n  }\r\n\r\n  /* Riga 2: immagine (destra) */\r\n  .glue-slider-image-container {\r\n    display: flex;\r\n    grid-column: 8 / span 4;\r\n    grid-row: 2;\r\n    transform: translateX(-32px);\r\n    margin-top: 0;\r\n    margin-bottom: 0;\r\n    height: 100%;\r\n    width: auto;\r\n    max-width: none;\r\n  }\r\n\r\n  .image-wrapper {\r\n    min-width: 434px;\r\n  }\r\n\r\n  .glue-pagination {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n  .glue-grid {\r\n    column-gap: 64px;\r\n    height: 800px;\r\n  }\r\n\r\n  .glue-slider-image-container {\r\n    grid-column: 8 / span 5;\r\n    transform: translateX(-125px);\r\n  }\r\n\r\n  .glue-cell-title {\r\n    grid-column: 3 / span 8;\r\n  }\r\n\r\n  /* Reverse ≥ 1440px */\r\n  .glue-reverse .glue-slider-image-container {\r\n    grid-column: 1 / span 5;\r\n    transform: translateX(125px);\r\n  }\r\n\r\n  .glue-reverse .animated-text-list {\r\n    grid-column: 7 / span 5;\r\n  }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n  .glue-grid {\r\n    margin-inline: auto;\r\n    max-width: 1456px;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   REVERSE LAYOUT (desktop only)\r\n   Immagine a sinistra, accordion a destra\r\n   ========================================= */\r\n@media (min-width: 1024px) {\r\n  .glue-reverse .glue-slider-image-container {\r\n    grid-column: 2 / span 4;\r\n    transform: translateX(32px);\r\n  }\r\n\r\n  .glue-reverse .animated-text-list {\r\n    grid-column: 7 / span 5;\r\n  }\r\n}\r\n";
+module.exports = styles;

package/lib/components/sliders/styles.css.qwik.mjs

@@ -0,0 +1,4 @@
+const styles = "/* =========================================\r\n   1. BASE\r\n   ========================================= */\r\n.glue-page {\r\n  margin: 0 10px;\r\n  --duration: 8000ms;\r\n  --active-size: 28px;\r\n  --inactive-size: 20px;\r\n  --spacing-top: 118px;\r\n  overflow-x: hidden;\r\n  text-rendering: optimizeLegibility;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.glue-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(5px, 1fr));\r\n  column-gap: 28px;\r\n  overflow-anchor: none;\r\n  align-items: center;\r\n}\r\n\r\n.glue-cell-pre-title,\r\n.glue-cell-post-title,\r\n.glue-cell-pre-slider {\r\n  display: none;\r\n}\r\n\r\n.glue-cell-title {\r\n  grid-column: 1 / -1;\r\n}\r\n\r\n.glue-text-center {\r\n  text-align: center;\r\n}\r\n\r\n.glue-headline {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  color: #333;\r\n  font-size: 1.75rem;\r\n  line-height: 1.2857;\r\n  font-weight: 500;\r\n  margin: 0;\r\n}\r\n\r\n.glue-body {\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n  color: #3c4043;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.glue-spacer {\r\n  margin-top: 24px;\r\n}\r\n\r\n/* =========================================\r\n   2. ACCORDION\r\n   ========================================= */\r\n.animated-text-list {\r\n  grid-column: 1 / -1;\r\n  align-self: center;\r\n  margin-top: 40px;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.glue-item-animated-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.item-animated {\r\n  position: relative;\r\n  cursor: pointer;\r\n  padding-left: 32px;\r\n  border: none;\r\n  scroll-margin-top: calc(var(--spacing-top) + 16px);\r\n  transition: padding 0.3s ease;\r\n}\r\n\r\n.item-animated:not(:first-child) {\r\n  margin-top: 32px;\r\n}\r\n\r\n.item-title {\r\n  margin: 0;\r\n  font-size: var(--inactive-size);\r\n  color: #5f6368;\r\n  font-weight: 400;\r\n  transition:\r\n    font-size 0.3s ease,\r\n    color 0.3s ease;\r\n}\r\n\r\n.item-animated.is-active .item-title {\r\n  font-size: var(--active-size);\r\n  color: #333;\r\n}\r\n\r\n.accordion-content {\r\n  max-height: 0;\r\n  overflow: hidden;\r\n  opacity: 0;\r\n  transition:\r\n    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n    opacity 0.4s ease;\r\n}\r\n\r\n.item-animated.is-active .accordion-content {\r\n  max-height: 250px;\r\n  opacity: 1;\r\n}\r\n\r\n.accordion-inner {\r\n  padding-top: 12px;\r\n}\r\n\r\n/* Progress bar */\r\n.item-animated::before {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  width: 2px;\r\n  background-color: #f1f3f4;\r\n}\r\n\r\n.progress-track {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  width: 2px;\r\n  background-color: #dadce0;\r\n  overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n  width: 100%;\r\n  height: 0%;\r\n  background-color: #333;\r\n}\r\n\r\n.item-animated.is-active .progress-bar {\r\n  animation: progressFillVertical var(--duration) linear forwards;\r\n}\r\n\r\n@keyframes progressFillVertical {\r\n  from {\r\n    height: 0%;\r\n  }\r\n  to {\r\n    height: 100%;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   3. IMMAGINI\r\n   ========================================= */\r\n.glue-slider-image-container {\r\n  display: none;\r\n  grid-column: 1 / -1;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.image-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n  min-width: 280px;\r\n  aspect-ratio: 999 / 1000;\r\n}\r\n\r\n.slide-picture {\r\n  position: absolute;\r\n  inset: 0;\r\n  opacity: 0;\r\n  z-index: 0;\r\n  visibility: hidden;\r\n  transition:\r\n    opacity 0.6s ease-in-out,\r\n    visibility 0.6s;\r\n}\r\n\r\n.slide-picture.show {\r\n  opacity: 1;\r\n  z-index: 1;\r\n  visibility: visible;\r\n}\r\n\r\n.slide-image-element {\r\n  width: 100%;\r\n  height: auto;\r\n  object-fit: contain;\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   4. PAGINATION (nascosta di default)\r\n   ========================================= */\r\n.glue-pagination {\r\n  display: none;\r\n}\r\n\r\n.pagination-arrow {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 8px;\r\n  color: #5f6368;\r\n  font-size: 18px;\r\n  line-height: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: color 0.2s ease;\r\n}\r\n\r\n.pagination-arrow:hover {\r\n  color: #333;\r\n}\r\n\r\n.pagination-arrow:disabled {\r\n  visibility: hidden;\r\n}\r\n\r\n.pagination-number {\r\n  border: 1px solid #dadce0;\r\n  padding: 6px 20px;\r\n  border-radius: 20px;\r\n  font-size: 14px;\r\n  color: #5f6368;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  user-select: none;\r\n}\r\n\r\n/* =========================================\r\n   5. MOBILE + TABLET (< 1024px)\r\n   Layout carousel condiviso\r\n   ========================================= */\r\n@media (max-width: 1023px) {\r\n  .glue-grid {\r\n    grid-template-columns: 1fr;\r\n    column-gap: 0;\r\n    grid-template-areas:\r\n      'title'\r\n      'image'\r\n      'slider'\r\n      'pagination';\r\n    justify-items: center;\r\n    align-items: start;\r\n  }\r\n\r\n  .glue-cell-pre-title,\r\n  .glue-cell-post-title,\r\n  .glue-cell-pre-slider {\r\n    display: none;\r\n  }\r\n\r\n  .glue-cell-title {\r\n    grid-area: title;\r\n    grid-column: auto;\r\n    width: 100%;\r\n    max-width: 780px;\r\n  }\r\n\r\n  .glue-headline {\r\n    max-width: clamp(480px, 75%, 720px);\r\n    margin: 0 auto;\r\n  }\r\n\r\n  /* Immagine centrata sopra */\r\n  .glue-slider-image-container {\r\n    grid-area: image;\r\n    grid-column: auto;\r\n    display: flex;\r\n    width: 100%;\r\n    max-width: 780px;\r\n    padding: 20px;\r\n    margin-top: 40px;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .image-wrapper {\r\n    min-width: 280px;\r\n  }\r\n\r\n  /* Carousel: scroll-snap orizzontale */\r\n  .animated-text-list {\r\n    grid-area: slider;\r\n    grid-column: auto;\r\n    flex-direction: row;\r\n    overflow-x: auto;\r\n    scroll-snap-type: x mandatory;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    margin-top: 0;\r\n    padding: 0;\r\n    width: 100%;\r\n    max-width: 780px;\r\n  }\r\n\r\n  .animated-text-list::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  .glue-item-animated-wrapper {\r\n    flex-direction: row;\r\n    min-width: 100%;\r\n    /* Altezza fissa: previene il resize a fisarmonica.\r\n       Tutti gli item si allineano in alto,\r\n       il wrapper mantiene l'altezza del più alto */\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .item-animated {\r\n    flex: 0 0 100%;\r\n    scroll-snap-align: center;\r\n    padding: 0 40px;\r\n    text-align: center;\r\n    margin-top: 0 !important;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .item-animated::before,\r\n  .progress-track {\r\n    display: none;\r\n  }\r\n\r\n  .item-title {\r\n    font-size: 1.5rem;\r\n    font-weight: 500;\r\n    color: #333;\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .accordion-content {\r\n    max-height: none;\r\n    opacity: 1;\r\n    overflow: visible;\r\n    transition: none;\r\n  }\r\n\r\n  /* Paginazione visibile */\r\n  .glue-pagination {\r\n    grid-area: pagination;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    margin-top: 20px;\r\n    margin-bottom: 40px;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   5b. TABLET ≥ 600px (sovrascrive solo spacing)\r\n   ========================================= */\r\n@media (min-width: 600px) and (max-width: 1023px) {\r\n  .glue-page {\r\n    margin: 0 40px;\r\n  }\r\n\r\n  .glue-headline {\r\n    font-size: 2.5rem;\r\n    line-height: 1.2;\r\n    letter-spacing: -0.5px;\r\n  }\r\n\r\n  .image-wrapper {\r\n    min-width: 320px;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   5a. MOBILE < 600px (sovrascrive font)\r\n   ========================================= */\r\n@media (max-width: 599px) {\r\n  .glue-headline {\r\n    font-size: 1.75rem;\r\n    line-height: 1.2857;\r\n    letter-spacing: 0;\r\n  }\r\n\r\n  .item-title {\r\n    font-size: 20px;\r\n    font-weight: 400;\r\n  }\r\n\r\n  .accordion-inner {\r\n    color: #5f6368;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   6. DESKTOP ≥ 1024px\r\n   ========================================= */\r\n@media (min-width: 1024px) {\r\n  .glue-page {\r\n    margin: 0 72px;\r\n  }\r\n\r\n  .glue-grid {\r\n    grid-template-columns: repeat(12, minmax(5px, 1fr));\r\n    grid-template-areas: none;\r\n    column-gap: 48px;\r\n    height: 750px;\r\n    align-items: center;\r\n    justify-items: stretch;\r\n  }\r\n\r\n  /* Riga 1: titolo */\r\n  .glue-cell-pre-title {\r\n    display: block;\r\n    grid-column: 1 / span 1;\r\n    grid-row: 1;\r\n  }\r\n\r\n  .glue-cell-title {\r\n    grid-column: 2 / span 10;\r\n    grid-row: 1;\r\n    width: auto;\r\n    max-width: none;\r\n  }\r\n\r\n  .glue-cell-post-title {\r\n    display: block;\r\n    grid-column: 12 / span 1;\r\n    grid-row: 1;\r\n  }\r\n\r\n  .glue-headline {\r\n    font-size: 3rem;\r\n    line-height: 1.1666;\r\n    max-width: none;\r\n  }\r\n\r\n  .glue-cell-pre-slider {\r\n    display: block;\r\n    grid-column: 1 / span 1;\r\n    grid-row: 2;\r\n  }\r\n\r\n  /* Riga 2: accordion (sinistra) */\r\n  .animated-text-list {\r\n    grid-column: 2 / span 5;\r\n    grid-row: 2;\r\n    flex-direction: column;\r\n    overflow: visible;\r\n    scroll-snap-type: none;\r\n    width: auto;\r\n    max-width: none;\r\n    margin-top: 0;\r\n  }\r\n\r\n  .glue-item-animated-wrapper {\r\n    flex-direction: column;\r\n    min-width: unset;\r\n  }\r\n\r\n  .item-animated {\r\n    flex: unset;\r\n    text-align: left;\r\n    padding: 0 0 0 32px;\r\n    scroll-snap-align: unset;\r\n  }\r\n\r\n  .item-animated:not(:first-child) {\r\n    margin-top: 32px !important;\r\n  }\r\n\r\n  .item-title {\r\n    font-size: var(--inactive-size);\r\n    color: #5f6368;\r\n    font-weight: 400;\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .item-animated.is-active .item-title {\r\n    font-size: var(--active-size);\r\n    color: #333;\r\n  }\r\n\r\n  .item-animated::before,\r\n  .progress-track {\r\n    display: block;\r\n  }\r\n\r\n  .accordion-content {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow: hidden;\r\n    transition:\r\n      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n      opacity 0.4s ease;\r\n  }\r\n\r\n  .item-animated.is-active .accordion-content {\r\n    max-height: 250px;\r\n    opacity: 1;\r\n  }\r\n\r\n  .accordion-inner {\r\n    color: #3c4043;\r\n  }\r\n\r\n  /* Riga 2: immagine (destra) */\r\n  .glue-slider-image-container {\r\n    display: flex;\r\n    grid-column: 8 / span 4;\r\n    grid-row: 2;\r\n    transform: translateX(-32px);\r\n    margin-top: 0;\r\n    margin-bottom: 0;\r\n    height: 100%;\r\n    width: auto;\r\n    max-width: none;\r\n  }\r\n\r\n  .image-wrapper {\r\n    min-width: 434px;\r\n  }\r\n\r\n  .glue-pagination {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n  .glue-grid {\r\n    column-gap: 64px;\r\n    height: 800px;\r\n  }\r\n\r\n  .glue-slider-image-container {\r\n    grid-column: 8 / span 5;\r\n    transform: translateX(-125px);\r\n  }\r\n\r\n  .glue-cell-title {\r\n    grid-column: 3 / span 8;\r\n  }\r\n\r\n  /* Reverse ≥ 1440px */\r\n  .glue-reverse .glue-slider-image-container {\r\n    grid-column: 1 / span 5;\r\n    transform: translateX(125px);\r\n  }\r\n\r\n  .glue-reverse .animated-text-list {\r\n    grid-column: 7 / span 5;\r\n  }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n  .glue-grid {\r\n    margin-inline: auto;\r\n    max-width: 1456px;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   REVERSE LAYOUT (desktop only)\r\n   Immagine a sinistra, accordion a destra\r\n   ========================================= */\r\n@media (min-width: 1024px) {\r\n  .glue-reverse .glue-slider-image-container {\r\n    grid-column: 2 / span 4;\r\n    transform: translateX(32px);\r\n  }\r\n\r\n  .glue-reverse .animated-text-list {\r\n    grid-column: 7 / span 5;\r\n  }\r\n}\r\n";
+export {
+  styles as default
+};

package/lib/index.qwik.cjs

@@ -11,6 +11,7 @@ const hero = require("./components/hero/hero.qwik.cjs");
 const onboardingsteps = require("./components/onboarding/onboardingsteps.qwik.cjs");
 const select = require("./components/select/select.qwik.cjs");
 const text_area = require("./components/text_area/text_area.qwik.cjs");
+const AnimatedTextSlider = require("./components/sliders/AnimatedTextSlider.qwik.cjs");
 const card = require("./components/card/card.qwik.cjs");
 const skeleton_suggestion = require("./components/skeletons/SkeletonSuggestion/skeleton_suggestion.qwik.cjs");
 exports.Logo = logo.Logo;
@@ -24,5 +25,6 @@ exports.Hero = hero.Hero;
 exports.OnboardingSteps = onboardingsteps.OnboardingSteps;
 exports.Select = select.Select;
 exports.TextArea = text_area.TextArea;
+exports.AnimatedTextSlider = AnimatedTextSlider.AnimatedTextSlider;
 exports.Card = card.Card;
 exports.SkeletonSuggestion = skeleton_suggestion.SkeletonSuggestion;

package/lib/index.qwik.mjs

@@ -9,9 +9,11 @@ import { Hero } from "./components/hero/hero.qwik.mjs";
 import { OnboardingSteps } from "./components/onboarding/onboardingsteps.qwik.mjs";
 import { Select } from "./components/select/select.qwik.mjs";
 import { TextArea } from "./components/text_area/text_area.qwik.mjs";
+import { AnimatedTextSlider } from "./components/sliders/AnimatedTextSlider.qwik.mjs";
 import { Card } from "./components/card/card.qwik.mjs";
 import { SkeletonSuggestion } from "./components/skeletons/SkeletonSuggestion/skeleton_suggestion.qwik.mjs";
 export {
+  AnimatedTextSlider,
   Button,
   Card,
   Counter,

package/lib-types/components/sliders/AnimatedTextSlider.d.ts

@@ -0,0 +1,24 @@
+interface ImageSources {
+    webp: string;
+    fallback: string;
+    src: string;
+}
+export interface SliderItem {
+    title: string;
+    description: string;
+    imageSources: ImageSources;
+}
+export interface VisualRegistrationProps {
+    /** Titolo principale della sezione */
+    headline: string;
+    /** Sottotitolo della sezione */
+    subtitle?: string;
+    /** Slide da mostrare */
+    items: SliderItem[];
+    /** Durata in ms di ogni slide (default: 8000) */
+    duration?: number;
+    /** Inverte il layout desktop: immagine a sinistra, testo a destra */
+    reverse?: boolean;
+}
+export declare const AnimatedTextSlider: import("@builder.io/qwik").Component<VisualRegistrationProps>;
+export {};

package/lib-types/index.d.ts

@@ -10,5 +10,6 @@ export { Hero } from './components/hero/hero';
 export { OnboardingSteps } from './components/onboarding/onboardingsteps';
 export { type SelectProps, Select } from './components/select/select';
 export { TextArea } from './components/text_area/text_area';
+export { AnimatedTextSlider } from './components/sliders/AnimatedTextSlider';
 export { Card } from './components/card/card';
 export { SkeletonSuggestion } from './components/skeletons/SkeletonSuggestion/skeleton_suggestion';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",