@klodd/ds 3.12.4 → 3.14.0

package/css/00-primitives.css

@@ -424,8 +424,6 @@
   --max-w-form:                 560px;
   --max-w-bottom-nav:           572px;
   --max-w-nav-desktop:          720px;
-  --max-w-install-chip:         580px;
-  --max-w-install-chip-desktop: 380px;
 
   --content-max-width: 640px;
 }
@@ -435,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);
@@ -442,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/css/10-semantic.css

@@ -226,8 +226,8 @@
   --shadow-card:  0 8px 16px color-mix(in oklch, var(--gray-12) 8%, transparent);
 
   /* Bakat-kompat: --shadow-float ar nu alias till --shadow-card.
-     Befintliga komponenter (chip.install-chip, overlay.dialog/sheet,
-     feedback.toast) fortsatter funka utan andring. Migration till
+     Befintliga komponenter (overlay.dialog/sheet, feedback.toast,
+     nav.bottom-nav) fortsatter funka utan andring. Migration till
      --shadow-card per komponent kan ske gradvis. */
   --shadow-float: var(--shadow-card);
 

package/css/components/chip.css

@@ -1,6 +1,6 @@
 /* ================================================================
    components/chip.css
-   Pills- och chips-familjen: fem fristående blocks som delar
+   Pills- och chips-familjen: fyra fristående blocks som delar
    form-språket (rounded-full, kompakt padding, inline-flex).
 
    Blocks:
@@ -8,7 +8,6 @@
      .chip-list     - sibling-wrapper för chips i rad (har __item/__delete/__add)
      .brand-pill    - projekt-namn-pill i topbar
      .month-pill    - navigations-pill för månadsbyte (Ekonom)
-     .install-chip  - PWA install-prompt som flyter ovan bottom-nav
 
    HTML-relationer:
      .chip-list innehåller .chip-list__item (egna BEM-element, ej .chip)
@@ -17,8 +16,8 @@
    Modifiers:
      .chip       --accent/-positive/-negative/-warning/-faint
 
-   .install-chip har egna BEM-element (__text/__install/__dismiss) plus
-   keyframe-animation install-chip-up (respekterar prefers-reduced-motion).
+   v3.13.0: .install-chip (PWA install-prompt) borttagen tillsammans
+   med tillhörande JS i pwa-register.js.
    ================================================================ */
 .chip {
   display: inline-flex;
@@ -206,112 +205,7 @@
 }
 
 
-/* ================================================================
-   ==== INSTALL-CHIP
-   PWA install-prompt som flyter ovan bottom-nav.
-   ================================================================ */
-.install-chip {
-  position: fixed;
-  bottom: calc(84px + var(--safe-bottom));
-  left: var(--space-12);
-  right: var(--space-12);
-  max-width: 480px;
-  margin: 0 auto;
-  background: var(--surface-raised);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-full);
-  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-18);
-  display: flex;
-  align-items: center;
-  gap: var(--space-10);
-  font-size: var(--fs-13);
-  color: var(--text-default);
-  z-index: var(--z-overlay, 60);
-  animation: install-chip-up 0.28s var(--ease-out);
-  box-shadow: var(--shadow-float);
-}
-
-.install-chip__text { flex: 1; min-width: 0; }
-
-.install-chip__install {
-  background: var(--accent-9);
-  color: var(--text-on-accent);
-  border: none;
-  padding: var(--space-8) var(--space-14);
-  border-radius: var(--radius-full);
-  font-size: var(--fs-12);
-  font-weight: var(--fw-medium);
-  font-family: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background var(--dur-fast) var(--ease-default);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .install-chip__install:hover { background: var(--accent-10); }
-}
-
-.install-chip__install:focus-visible {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}
-
-.install-chip__install:active {
-  background: var(--surface-active);
-  transform: scale(0.97);
-  transition: transform 80ms var(--ease-spring-snappy);
-}
-
-.install-chip__install:disabled,
-.install-chip__install[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.install-chip__dismiss {
-  background: transparent;
-  border: none;
-  color: var(--text-subtle);
-  font-size: var(--fs-18);
-  line-height: 1;
-  padding: var(--space-6) var(--space-10);
-  cursor: pointer;
-  min-width: 36px;
-  transition: color var(--dur-fast) var(--ease-default);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .install-chip__dismiss:hover { color: var(--text-default); }
-}
-
-.install-chip__dismiss:focus-visible {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}
-
-.install-chip__dismiss:active {
-  background: var(--surface-active);
-  transform: scale(0.97);
-  transition: transform 80ms var(--ease-spring-snappy);
-}
-
-.install-chip__dismiss:disabled,
-.install-chip__dismiss[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-@keyframes install-chip-up {
-  from { transform: translateY(calc(100% + 100px)); opacity: 0; }
-  to   { transform: translateY(0); opacity: 1; }
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .install-chip { animation: none; }
   .chip-list__delete:active,
-  .chip-list__add:active,
-  .install-chip__install:active,
-  .install-chip__dismiss:active { transform: none; }
+  .chip-list__add:active { transform: none; }
 }

package/js/pwa-register.js

@@ -1,17 +1,18 @@
 /*--------------------------------------------------------------
- @klodd/ds - PWA-registrering + install-prompts
+ @klodd/ds - PWA-registrering
 
  Auto-detekterar app-namn fran <html data-app="X">-attributet.
- Defaults: appName = capitalize(data-app), appKey = data-app, swPath = "/sw.js".
+ Defaults: appName = capitalize(data-app), swPath = "/sw.js".
  Funkar identiskt for Jubb och Ekonom utan konfiguration.
 
- Manuell override: KloddPWA.init({ appName, appKey, swPath }) innan load.
+ Manuell override: KloddPWA.init({ appName, swPath }) innan load.
 
  Funktioner:
  - isNetworkError() - iOS-saker nat-detektering (window.isNetworkError)
  - SW-registrering med updateViaCache: 'none'
- - Install-prompt (beforeinstallprompt for Chrome/Android)
- - iOS install-hint (Safari har ingen beforeinstallprompt)
+
+ Install-prompts (beforeinstallprompt + iOS-hint) borttagna 3.13.0.
+ PWA-installation sker numera enbart via browserns inbyggda meny.
 --------------------------------------------------------------*/
 (function (root, doc) {
   'use strict';
@@ -25,9 +26,7 @@
     const cap = dataApp.charAt(0).toUpperCase() + dataApp.slice(1);
     return {
       appName: userCfg.appName || cap,
-      appKey: userCfg.appKey || dataApp,
       swPath: userCfg.swPath || '/sw.js',
-      minVisits: userCfg.minVisits || 3,
     };
   }
 
@@ -63,91 +62,23 @@
   }
 
   /*------------------------------------------------------------
-   Install-prompt (Android / Chrome / Edge)
+   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.
    ------------------------------------------------------------*/
-  let deferredInstallPrompt = null;
-
-  function setupInstallPrompt(cfg) {
-    root.addEventListener('beforeinstallprompt', function (e) {
-      e.preventDefault();
-      deferredInstallPrompt = e;
-      maybeShowInstallChip(cfg);
-    });
-  }
-
-  function maybeShowInstallChip(cfg) {
-    if (sessionStorage.getItem(cfg.appKey + '_install_dismissed')) return;
-    if (root.matchMedia('(display-mode: standalone)').matches) return;
-    const visits = parseInt(localStorage.getItem(cfg.appKey + '_visits') || '0', 10) + 1;
-    localStorage.setItem(cfg.appKey + '_visits', String(visits));
-    if (visits < cfg.minVisits) return;
-    showInstallChip(cfg);
-  }
-
-  function showInstallChip(cfg) {
-    const id = cfg.appKey + '-install-chip';
-    if (doc.getElementById(id)) return;
-
-    const chip = doc.createElement('div');
-    chip.className = 'install-chip';
-    chip.id = id;
-    chip.setAttribute('role', 'dialog');
-    chip.setAttribute('aria-label', 'Installera ' + cfg.appName);
-    chip.innerHTML =
-      '<span>Installera ' + cfg.appName + ' på hemskärmen</span>' +
-      '<button type="button" data-install>Installera</button>' +
-      '<button type="button" data-dismiss aria-label="Stäng">×</button>';
-    doc.body.appendChild(chip);
-
-    chip.querySelector('[data-install]').addEventListener('click', async function () {
-      if (!deferredInstallPrompt) { chip.remove(); return; }
-      deferredInstallPrompt.prompt();
-      try { await deferredInstallPrompt.userChoice; } catch (e) {}
-      deferredInstallPrompt = null;
-      chip.remove();
-    });
-    chip.querySelector('[data-dismiss]').addEventListener('click', function () {
-      sessionStorage.setItem(cfg.appKey + '_install_dismissed', '1');
-      chip.remove();
-    });
-  }
-
-  /*------------------------------------------------------------
-   iOS install-hint
-   Safari har ingen beforeinstallprompt - manuell flow via "Dela" ->
-   "Lagg till pa hemskarmen". Visa diskret hint efter N besok.
-   ------------------------------------------------------------*/
-  function setupIOSHint(cfg) {
-    root.addEventListener('load', function () {
-      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !root.MSStream;
-      const inStandalone = root.matchMedia('(display-mode: standalone)').matches
-        || root.navigator.standalone;
-      if (!isIOS || inStandalone) return;
-      if (sessionStorage.getItem(cfg.appKey + '_ios_install_dismissed')) return;
-      const visits = parseInt(localStorage.getItem(cfg.appKey + '_visits') || '0', 10);
-      if (visits < cfg.minVisits) return;
-      showIOSInstallHint(cfg);
-    });
-  }
-
-  function showIOSInstallHint(cfg) {
-    const id = cfg.appKey + '-ios-install-hint';
-    if (doc.getElementById(id)) return;
-
-    const hint = doc.createElement('div');
-    hint.className = 'install-chip install-chip-ios';
-    hint.id = id;
-    hint.setAttribute('role', 'dialog');
-    hint.setAttribute('aria-label', 'Installera ' + cfg.appName + ' pa iOS');
-    hint.innerHTML =
-      '<span>Tryck <strong>Dela</strong> → <strong>Lägg till på hemskärmen</strong></span>' +
-      '<button type="button" data-dismiss aria-label="Stäng">×</button>';
-    doc.body.appendChild(hint);
-
-    hint.querySelector('[data-dismiss]').addEventListener('click', function () {
-      sessionStorage.setItem(cfg.appKey + '_ios_install_dismissed', '1');
-      hint.remove();
-    });
+  function syncViewport() {
+    if (!root.visualViewport) return;
+    doc.documentElement.style.setProperty(
+      '--viewport-height',
+      root.visualViewport.height + 'px'
+    );
   }
 
   /*------------------------------------------------------------
@@ -160,6 +91,9 @@
   root.KloddPWA.config = cfg;
 
   registerSW(cfg);
-  setupInstallPrompt(cfg);
-  setupIOSHint(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.12.4",
+  "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`)