@klodd/ds 3.13.0 → 3.14.1

package/css/00-primitives.css

@@ -433,6 +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 - reserverat for framtida
+   JS-driven viewport-hojd-konsument (ofarlig om oanvand).
    ================================================================ */
 :root {
   --safe-top:    env(safe-area-inset-top, 0px);
@@ -440,6 +442,8 @@
   --safe-left:   env(safe-area-inset-left, 0px);
   --safe-right:  env(safe-area-inset-right, 0px);
 
+  --viewport-height: 100vh;
+
   --touch-min: 44px;
 
   /* Bottom-nav-tokens lever i 10-semantic.css som calc-baserade

package/js/pwa-register.js

@@ -61,6 +61,24 @@
     });
   }
 
+  /*------------------------------------------------------------
+   Safe-area cold-start-fix (iOS PWA + Safari)
+   iOS Safari beraknar env(safe-area-inset-bottom) felaktigt vid
+   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.
+
+   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 forceSafeAreaOnNav() {
+    const nav = doc.querySelector('.bottom-nav');
+    if (nav) void getComputedStyle(nav).bottom;
+  }
+
   /*------------------------------------------------------------
    Public API. Anvand KloddPWA.init({...}) FORE script-laddning av
    denna fil (sa _cfg ar satt nar getCfg() koras), eller bara lat
@@ -71,4 +89,8 @@
   root.KloddPWA.config = cfg;
 
   registerSW(cfg);
+
+  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.13.0",
+  "version": "3.14.1",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/02-components.md

@@ -191,8 +191,8 @@ För varje entry gäller:
 - **INTE:** Vanlig `<h1>` (anvand `.heading-1`)
 
 ### chip (`chip.css`)
-- **Blocks:** `.chip`, `.chip-list` (sibling-wrapper for chips i rad), `.brand-pill`, `.month-pill`, `.install-chip` (PWA install-prompt)
-- **Element:** `.chip-list__item`, `.chip-list__text`, `.chip-list__form`, `.chip-list__delete`, `.chip-list__add`, `.install-chip__text`, `.install-chip__install`, `.install-chip__dismiss`
+- **Blocks:** `.chip`, `.chip-list` (sibling-wrapper for chips i rad), `.brand-pill`, `.month-pill`
+- **Element:** `.chip-list__item`, `.chip-list__text`, `.chip-list__form`, `.chip-list__delete`, `.chip-list__add`
 - **Modifiers:** `.chip--accent/-positive/-negative/-warning/-faint`
 - **Anvand:** Kort-format pills med dot-prefix (status, kategori, count)
 - **INTE:** Form-inputs (anvand `.input`)