@klodd/ds 3.14.0 → 3.14.2

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,28 @@
   }
 
   /*------------------------------------------------------------
-   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 appenda
+   ett fixed-positionerat probe-element och lasa dess
+   boundingClientRect tvingar WebKit att resolva env-varden i
+   layout-passet, vilket retroaktivt korrigerar pillen-positionen.
 
-   --viewport-height-tokenet ar tillagg for framtida konsumenter
-   som behover en JS-driven viewport-hojd. Defaulter till 100vh
-   i 00-primitives.css.
+   Probe + remove ar mer palitlig an att lasa computed style pa
+   .bottom-nav direkt - en frasch fixed-element pa varje event
+   tvingar layout regardless av cache-state.
+
+   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 probe = doc.createElement('div');
+    probe.style.cssText = 'position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;';
+    doc.body.appendChild(probe);
+    void probe.getBoundingClientRect();
+    probe.remove();
   }
 
   /*------------------------------------------------------------
@@ -92,8 +97,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.2",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {