@klodd/ds 3.13.0 → 3.14.0

package/css/00-primitives.css

@@ -433,6 +433,10 @@
    ==== 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).
    ================================================================ */
 :root {
   --safe-top:    env(safe-area-inset-top, 0px);
@@ -440,6 +444,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,26 @@
     });
   }
 
+  /*------------------------------------------------------------
+   Viewport-sync (iOS PWA cold-start fix)
+   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.
+
+   --viewport-height-tokenet ar tillagg for framtida konsumenter
+   som behover en JS-driven viewport-hojd. Defaulter till 100vh
+   i 00-primitives.css.
+   ------------------------------------------------------------*/
+  function syncViewport() {
+    if (!root.visualViewport) return;
+    doc.documentElement.style.setProperty(
+      '--viewport-height',
+      root.visualViewport.height + 'px'
+    );
+  }
+
   /*------------------------------------------------------------
    Public API. Anvand KloddPWA.init({...}) FORE script-laddning av
    denna fil (sa _cfg ar satt nar getCfg() koras), eller bara lat
@@ -71,4 +91,9 @@
   root.KloddPWA.config = cfg;
 
   registerSW(cfg);
+
+  if (root.visualViewport) {
+    root.visualViewport.addEventListener('resize', syncViewport);
+  }
+  syncViewport();
 })(typeof window !== 'undefined' ? window : globalThis, document);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "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`)