@klodd/ds 3.14.0 → 3.14.1

package/css/00-primitives.css

@@ -433,10 +433,8 @@
    ==== PWA / SAFE AREA
    env(safe-area-inset-*) anvands for iOS-notch/home-indicator.
    Touch-min 44px ar Apples HIG-rekommendation.
-   --viewport-height defaultar till 100vh, overrideas av JS
-   (pwa-register.js syncViewport) via visualViewport.height -
-   fungerar som iOS-cold-start-fix (lasningen tvingar WebKit
-   att stabilisera viewport-geometri).
+   --viewport-height defaultar till 100vh - reserverat for framtida
+   JS-driven viewport-hojd-konsument (ofarlig om oanvand).
    ================================================================ */
 :root {
   --safe-top:    env(safe-area-inset-top, 0px);

package/js/pwa-register.js

@@ -62,23 +62,21 @@
   }
 
   /*------------------------------------------------------------
-   Viewport-sync (iOS PWA cold-start fix)
+   Safe-area cold-start-fix (iOS PWA + Safari)
    iOS Safari beraknar env(safe-area-inset-bottom) felaktigt vid
-   forsta render i PWA-standalone. Att tidigt lasa
-   visualViewport.height + skriva till en CSS-custom-property
-   tvingar WebKit att stabilisera sin viewport-geometri innan
-   layout-pass kor klart.
+   forsta render - .bottom-nav landar pa fel position. Att lasa
+   computed style pa .bottom-nav tvingar WebKit att resolva
+   env-varden i layout-passet, vilket retroaktivt korrigerar
+   pilen-positionen.
 
-   --viewport-height-tokenet ar tillagg for framtida konsumenter
-   som behover en JS-driven viewport-hojd. Defaulter till 100vh
-   i 00-primitives.css.
+   Trippel-event-binding tacker alla cold-start-cases:
+   - DOMContentLoaded: tidigt efter document parsing
+   - load: efter att alla resurser (font, splash, etc.) laddats
+   - pageshow: iOS bfcache-restore (back/forward, switch tabs)
    ------------------------------------------------------------*/
-  function syncViewport() {
-    if (!root.visualViewport) return;
-    doc.documentElement.style.setProperty(
-      '--viewport-height',
-      root.visualViewport.height + 'px'
-    );
+  function forceSafeAreaOnNav() {
+    const nav = doc.querySelector('.bottom-nav');
+    if (nav) void getComputedStyle(nav).bottom;
   }
 
   /*------------------------------------------------------------
@@ -92,8 +90,7 @@
 
   registerSW(cfg);
 
-  if (root.visualViewport) {
-    root.visualViewport.addEventListener('resize', syncViewport);
-  }
-  syncViewport();
+  doc.addEventListener('DOMContentLoaded', forceSafeAreaOnNav);
+  root.addEventListener('load', forceSafeAreaOnNav);
+  root.addEventListener('pageshow', forceSafeAreaOnNav);
 })(typeof window !== 'undefined' ? window : globalThis, document);

package/package.json

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