spoko-design-system 1.34.21 → 1.34.22

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "1.34.21",
3
+ "version": "1.34.22",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "main": "./index.ts",
@@ -31,8 +31,11 @@
31
31
  .pg-slide {
32
32
  scroll-snap-align: start;
33
33
  flex: 0 0 auto;
34
- width: 100%;
35
- min-width: 100%;
34
+ /* Use viewport-relative width matching the scroll container
35
+ to avoid subpixel rounding issues with percentage widths.
36
+ JS sets --pg-slide-width on init for pixel-perfect slides. */
37
+ width: var(--pg-slide-width, 100%);
38
+ min-width: var(--pg-slide-width, 100%);
36
39
  }
37
40
 
38
41
 
@@ -72,6 +72,18 @@ export function initProductGallery(root: HTMLElement) {
72
72
  updateArrows(prevBtn, nextBtn, index, totalSlides);
73
73
  });
74
74
 
75
+ // Fix subpixel slide width: percentage-based widths can produce fractional
76
+ // pixels (e.g. 780.5px) causing 0.5px bleed of next slide.
77
+ // Set pixel-perfect width via CSS variable from clientWidth (integer).
78
+ function setSlideWidth() {
79
+ const w = slider.clientWidth;
80
+ if (w > 0) {
81
+ slider.style.setProperty('--pg-slide-width', `${w}px`);
82
+ }
83
+ }
84
+ setSlideWidth();
85
+ window.addEventListener('resize', setSlideWidth);
86
+
75
87
  // Explicit initial state sync — IntersectionObserver fires async and may miss
76
88
  // the first slide if layout isn't ready or scroll position was restored by browser
77
89
  function syncInitialState() {