spoko-design-system 1.34.6 → 1.34.7

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.34.7](https://github.com/polo-blue/sds/compare/v1.34.6...v1.34.7) (2026-03-17)
+
+### Bug Fixes
+
+* **ProductGallery:** clear transform-origin on zoom out and dialog close ([833fc60](https://github.com/polo-blue/sds/commit/833fc60fd23517427ebd41bf91915519a5fb73d6))
+* **ProductGallery:** prevent dialog overflow after View Transitions ([f794d17](https://github.com/polo-blue/sds/commit/f794d173ffe30a703d0f91dbdb76faa9e8b68c23))
+* **ProductGallery:** remove static transform-origin, use explicit max constraints on zoom img ([33658f3](https://github.com/polo-blue/sds/commit/33658f3430975864931a94c36e8befabe6382bf7))
+
 ## [1.34.6](https://github.com/polo-blue/sds/compare/v1.34.5...v1.34.6) (2026-03-17)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.34.6",
+  "version": "1.34.7",
   "type": "module",
   "private": false,
   "main": "./index.ts",

package/src/components/Product/ProductGallery.astro

@@ -243,7 +243,7 @@ const total = images.length;
           </div>
 
           <div
-            class="pg-dialog-slider flex flex-1 min-h-0 overflow-x-auto overflow-y-hidden"
+            class="pg-dialog-slider flex flex-1 min-h-0 overflow-hidden"
             data-dialog-slider
             tabindex="0"
             role="group"

package/src/components/Product/product-gallery.css

@@ -14,6 +14,8 @@
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .pg-slider::-webkit-scrollbar,
@@ -81,7 +83,7 @@
 }
 
 .pg-dialog[open] {
-  @apply flex flex-col;
+  @apply flex flex-col overflow-hidden;
 }
 
 /* ── Zoom (transform-origin based, GPU-accelerated) ── */
@@ -97,9 +99,10 @@
 }
 
 .pg-zoom-img {
-  @apply max-w-full max-h-full object-contain select-none;
+  @apply object-contain select-none;
+  max-width: 100%;
+  max-height: 100%;
   -webkit-user-drag: none;
-  transform-origin: 0 0;
   transition: transform 0.3s ease;
   will-change: transform;
 }

package/src/components/Product/product-gallery.ts

@@ -517,7 +517,8 @@ function initZoom(container: HTMLElement) {
   function zoomOut() {
     isZoomed = false;
     container.classList.remove('is-zoomed');
-    img.style.transform = 'scale(1)';
+    img.style.transform = '';
+    img.style.transformOrigin = '';
     container.removeEventListener('mousemove', onMouseMove);
   }
 
@@ -608,7 +609,10 @@ function initZoom(container: HTMLElement) {
 
 function resetZoom(container: HTMLElement) {
   const img = container.querySelector<HTMLImageElement>('[data-zoom-img]');
-  if (img) img.style.transform = '';
+  if (img) {
+    img.style.transform = '';
+    img.style.transformOrigin = '';
+  }
   container.classList.remove('is-zoomed');
   // Clean up mousemove listener if zoom was active
   zoomCleanups.get(container)?.();