@klodd/ds 3.14.4 → 3.14.5

package/css/00-primitives.css

@@ -443,6 +443,7 @@
   --safe-right:  env(safe-area-inset-right, 0px);
 
   --viewport-height: 100vh;
+  --vv-offset: 0px;            /* JS-driven (pwa-register.js syncNavBottom): visual viewport-offset vs layout viewport */
 
   --touch-min: 44px;
 

package/css/components/nav.css

@@ -30,7 +30,7 @@
    ================================================================ */
 .bottom-nav {
   position: fixed;
-  bottom: calc(var(--safe-bottom) + var(--space-12));
+  bottom: calc(var(--safe-bottom) + var(--space-12) + var(--vv-offset));
   left: var(--space-16);
   right: var(--space-16);
   z-index: var(--z-nav);

package/js/pwa-register.js

@@ -62,22 +62,21 @@
   }
 
   /*------------------------------------------------------------
-   Cold-start scroll-guarantee (iOS PWA)
-   Om dokumentet inte ar scrollbart vid initial load triggar iOS
-   Safari aldrig en full viewport-stabilisering, vilket bl.a.
-   resulterar i felresolvad env(safe-area-inset-bottom). Fix: lagg
-   tillfaligt en padding-bottom som gor sidan scrollbar med 1px.
-   iOS stabiliserar sin viewport. Padding tas bort vid forsta
-   scroll-event sa layouten ar tillbaka till normal.
+   Visual viewport-sync for .bottom-nav (iOS PWA cold-start)
+   iOS Safari beraknar layout viewport (window.innerHeight) fel
+   vid cold start - skiljer sig fran visual viewport (faktiskt
+   synlig area). Skriver skillnaden till --vv-offset sa
+   .bottom-nav kan kompensera via bottom: calc(... + var(--vv-offset)).
+
+   Vid normal anvandning ar offset 0px. Vid iOS cold-start eller
+   on-screen-keyboard ar offset > 0 och pillen hoppar uppat dar
+   visual viewport faktiskt slutar.
    ------------------------------------------------------------*/
-  function ensureScrollable() {
-    if (doc.documentElement.scrollHeight <= root.innerHeight) {
-      doc.documentElement.style.paddingBottom = (root.innerHeight + 1) + 'px';
-      root.addEventListener('scroll', function cleanup() {
-        doc.documentElement.style.paddingBottom = '';
-        root.removeEventListener('scroll', cleanup);
-      }, { once: true });
-    }
+  function syncNavBottom() {
+    const vv = root.visualViewport;
+    if (!vv) return;
+    const offset = root.innerHeight - vv.height - vv.offsetTop;
+    doc.documentElement.style.setProperty('--vv-offset', offset + 'px');
   }
 
   /*------------------------------------------------------------
@@ -91,5 +90,10 @@
 
   registerSW(cfg);
 
-  doc.addEventListener('DOMContentLoaded', ensureScrollable);
+  if (root.visualViewport) {
+    root.visualViewport.addEventListener('resize', syncNavBottom);
+    root.visualViewport.addEventListener('scroll', syncNavBottom);
+  }
+  doc.addEventListener('DOMContentLoaded', syncNavBottom);
+  root.addEventListener('load', syncNavBottom);
 })(typeof window !== 'undefined' ? window : globalThis, document);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.14.4",
+  "version": "3.14.5",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {