@greghowe79/the-lib 2.9.2 → 2.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/components/sliders/animated_text_slider.qwik.cjs +9 -1
  2. package/lib/components/sliders/animated_text_slider.qwik.mjs +9 -1
  3. package/lib/components/sliders/styles.css.qwik.cjs +1 -1
  4. package/lib/components/sliders/styles.css.qwik.mjs +1 -1
  5. package/lib-types/components/sliders/animated_text_slider.d.ts +3 -2
  6. package/lib-types/index.d.ts +1 -1
  7. package/package.json +1 -1
package/lib/components/sliders/animated_text_slider.qwik.cjs CHANGED
@@ -127,6 +127,12 @@ const AnimatedTextSlider = qwik.component$(({ headline, subtitle, items, duratio
127
127
  class: `slide-picture ${activeIndex.value === index ? "show" : ""}`,
128
128
  "data-crop": "animatedTextImage-1x1",
129
129
  children: [
130
+ /* @__PURE__ */ jsxRuntime.jsx("source", {
131
+ srcset: slide.imageSources.avif,
132
+ type: "image/avif",
133
+ width: "999",
134
+ height: "1000"
135
+ }),
130
136
  /* @__PURE__ */ jsxRuntime.jsx("source", {
131
137
  srcset: slide.imageSources.webp,
132
138
  type: "image/webp",
@@ -141,10 +147,12 @@ const AnimatedTextSlider = qwik.component$(({ headline, subtitle, items, duratio
141
147
  /* @__PURE__ */ jsxRuntime.jsx("img", {
142
148
  class: "Image slide-image-element",
143
149
  alt: slide.title,
144
- srcset: slide.imageSources.fallback,
145
150
  width: "999",
146
151
  height: "1000",
147
152
  loading: "lazy",
153
+ decoding: "async",
154
+ fetchPriority: index === 0 ? "high" : "low",
155
+ srcset: slide.imageSources.fallback,
148
156
  src: slide.imageSources.src
149
157
  })
150
158
  ]
package/lib/components/sliders/animated_text_slider.qwik.mjs CHANGED
@@ -125,6 +125,12 @@ const AnimatedTextSlider = component$(({ headline, subtitle, items, duration, re
125
125
  class: `slide-picture ${activeIndex.value === index ? "show" : ""}`,
126
126
  "data-crop": "animatedTextImage-1x1",
127
127
  children: [
128
+ /* @__PURE__ */ jsx("source", {
129
+ srcset: slide.imageSources.avif,
130
+ type: "image/avif",
131
+ width: "999",
132
+ height: "1000"
133
+ }),
128
134
  /* @__PURE__ */ jsx("source", {
129
135
  srcset: slide.imageSources.webp,
130
136
  type: "image/webp",
@@ -139,10 +145,12 @@ const AnimatedTextSlider = component$(({ headline, subtitle, items, duration, re
139
145
  /* @__PURE__ */ jsx("img", {
140
146
  class: "Image slide-image-element",
141
147
  alt: slide.title,
142
- srcset: slide.imageSources.fallback,
143
148
  width: "999",
144
149
  height: "1000",
145
150
  loading: "lazy",
151
+ decoding: "async",
152
+ fetchPriority: index === 0 ? "high" : "low",
153
+ srcset: slide.imageSources.fallback,
146
154
  src: slide.imageSources.src
147
155
  })
148
156
  ]
package/lib/components/sliders/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\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";
2
+ const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\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: 1.5px;\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";
3
3
  module.exports = styles;
package/lib/components/sliders/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\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";
1
+ const styles = "/* =========================================\r\n 1. BASE\r\n ========================================= */\r\n.glue-page {\r\n margin: 0 20px;\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: 1.5px;\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";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib-types/components/sliders/animated_text_slider.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  interface ImageSources {
2
+ avif: string;
2
3
  webp: string;
3
4
  fallback: string;
4
5
  src: string;
@@ -8,7 +9,7 @@ export interface SliderItem {
8
9
  description: string;
9
10
  imageSources: ImageSources;
10
11
  }
11
- export interface VisualRegistrationProps {
12
+ export interface AnimatedTextSliderProps {
12
13
  /** Titolo principale della sezione */
13
14
  headline: string;
14
15
  /** Sottotitolo della sezione */
@@ -20,5 +21,5 @@ export interface VisualRegistrationProps {
20
21
  /** Inverte il layout desktop: immagine a sinistra, testo a destra */
21
22
  reverse?: boolean;
22
23
  }
23
- export declare const AnimatedTextSlider: import("@builder.io/qwik").Component<VisualRegistrationProps>;
24
+ export declare const AnimatedTextSlider: import("@builder.io/qwik").Component<AnimatedTextSliderProps>;
24
25
  export {};
package/lib-types/index.d.ts CHANGED
@@ -10,6 +10,6 @@ export { Hero } from './components/hero/hero';
10
10
  export { OnboardingSteps } from './components/onboarding/onboardingsteps';
11
11
  export { type SelectProps, Select } from './components/select/select';
12
12
  export { TextArea } from './components/text_area/text_area';
13
- export { AnimatedTextSlider } from './components/sliders/animated_text_slider';
13
+ export { type SliderItem, AnimatedTextSlider } from './components/sliders/animated_text_slider';
14
14
  export { Card } from './components/card/card';
15
15
  export { SkeletonSuggestion } from './components/skeletons/SkeletonSuggestion/skeleton_suggestion';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.9.2",
3
+ "version": "2.9.4",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",