spoko-design-system 1.34.21 → 1.34.23
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
|
@@ -72,7 +72,10 @@ const total = images.length;
|
|
|
72
72
|
{
|
|
73
73
|
hasImages ? (
|
|
74
74
|
<>
|
|
75
|
-
<div
|
|
75
|
+
<div
|
|
76
|
+
class="pg-main relative overflow-hidden bg-neutral-lightest"
|
|
77
|
+
style={`aspect-ratio: ${aspectRatio}`}
|
|
78
|
+
>
|
|
76
79
|
<div
|
|
77
80
|
class="pg-slider flex overflow-x-auto overflow-y-hidden w-full h-full"
|
|
78
81
|
data-gallery-slider
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
.pg-dialog-slider {
|
|
13
13
|
scroll-snap-type: x mandatory;
|
|
14
14
|
scroll-behavior: smooth;
|
|
15
|
-
-webkit-overflow-scrolling: touch;
|
|
16
15
|
scrollbar-width: none;
|
|
17
16
|
overflow-x: auto;
|
|
18
17
|
overflow-y: hidden;
|
|
@@ -30,12 +29,15 @@
|
|
|
30
29
|
|
|
31
30
|
.pg-slide {
|
|
32
31
|
scroll-snap-align: start;
|
|
32
|
+
scroll-snap-stop: always;
|
|
33
33
|
flex: 0 0 auto;
|
|
34
|
-
width
|
|
35
|
-
|
|
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
|
-
|
|
39
41
|
/* ── Arrow + counter hover reveal ── */
|
|
40
42
|
|
|
41
43
|
.pg-arrow,
|
|
@@ -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() {
|