@klodd/ds 5.13.1 → 5.14.0

package/css/10-semantic.css

@@ -240,9 +240,11 @@
   /* Spinner-backdrop bakom upload-spinner-overlay. */
   --backdrop-spinner: color-mix(in srgb, var(--surface-page) 88%, transparent);
 
-  /* Glass-bg for backdrop-blur navigationer (bottom-nav, top-nav). */
-  --glass-bg:          color-mix(in oklch, var(--surface-overlay) 85%, transparent);
-  --glass-bg-fallback: color-mix(in oklch, var(--surface-overlay) 96%, transparent);
+  /* Glass-tokens: semi-transparenta ytor för backdrop-blur-navigation.
+     Konsumeras av .bottom-nav. Kalibrerade mot Blue-1 (Jubb) och Plum-1 (Ekonom).
+     --glass-bg-fallback används av @supports-grenen (browsers utan backdrop-filter). */
+  --glass-bg:          color-mix(in oklch, var(--surface-raised) 65%, transparent);
+  --glass-bg-fallback: color-mix(in oklch, var(--surface-raised) 96%, transparent);
 
   /* Grafpalett - for diagram och visualiseringar.
      Fem distinkta farger med god kontrast mot dark-bakgrund.

package/css/apps/ekonom.css

@@ -56,3 +56,10 @@
   --accent-a10: var(--plum-a10);
   --accent-a12: var(--plum-a12);
 }
+
+/* Glass-kalibrering per app - override av 10-semantic.css default (65%).
+   Plum-1 (#181118) är något ljusare än Blue-1 (#0d1520) - kan kräva
+   högre opacitet (67-70%) efter visuell verifiering i Ekonom. */
+[data-app="ekonom"] {
+  --glass-bg: color-mix(in oklch, var(--surface-raised) 65%, transparent);
+}

package/css/apps/jubb.css

@@ -45,3 +45,9 @@
   /* Text - varm vit med latt bla ton (paritet med Ekonoms #F4F2FA Plum-vit) */
   --text-default:    #EEF4FF;
 }
+
+/* Glass-kalibrering per app - override av 10-semantic.css default (65%).
+   Justeras visuellt mot Blue-1-bakgrund vid build:ds-driftsättning. */
+[data-app="jubb"] {
+  --glass-bg: color-mix(in oklch, var(--surface-raised) 65%, transparent);
+}

package/css/components/nav.css

@@ -44,13 +44,29 @@
   padding-inline: var(--space-8);
   margin: 0;
   max-width: none;
-  background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-full);
   /* Sprint 3a 2026-05-12: shadow→none per dark-mode-doktrin. */
   box-shadow: none;
 }
 
+@supports (backdrop-filter: blur(1px)) {
+  .bottom-nav {
+    /* Safari iOS: position:fixed + backdrop-filter skapar ny stacking context.
+       z-index: var(--z-nav) bibehålls korrekt men rubber-band-scroll behöver
+       verifieras på fysisk enhet. */
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  .bottom-nav {
+    background: var(--glass-bg-fallback);
+  }
+}
+
 .bottom-nav__item {
   flex: 1;
   min-width: 0;
@@ -135,6 +151,7 @@
     border-right: 1px solid var(--border-subtle);
     border-bottom: none;
     box-shadow: none;
+    background: var(--surface-raised); /* Glass är bar-mode only — rail/drawer är sidebars, inte floating pills. */
   }
 
   .bottom-nav__item {
@@ -186,6 +203,7 @@
     border-right: 1px solid var(--border-subtle);
     border-bottom: none;
     box-shadow: none;
+    background: var(--surface-raised); /* Glass är bar-mode only — rail/drawer är sidebars, inte floating pills. */
   }
 
   .bottom-nav__item {

package/package.json

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

package/references/04-locked-decisions/0027-glass-effect-bottom-nav.md

@@ -0,0 +1,39 @@
+# 0027 - Glaseffekt på bottom-nav
+
+## Status
+Locked.
+
+## Context
+bottom-nav är en position:fixed pill som flytande ovanpå scroll-innehåll.
+iOS-native glaseffekt (UIBlurEffect) är etablerat designspråk för just
+detta mönster. Klodd DS dark-mode-doktrin säger "ljushet-hierarki > shadow" —
+glaseffekt via luminans-baserad blur + tint följer doktrinen.
+
+--glass-bg och --glass-bg-fallback definierades i 10-semantic.css utan konsumenter.
+Detta ADR aktiverar dem.
+
+## Decision
+.bottom-nav använder backdrop-filter: blur(16px) + --glass-bg (72% solid av
+--surface-raised) via @supports-grening.
+
+@supports not-grenen faller tillbaka till --glass-bg-fallback (96% solid) —
+visuellt nästintill identiskt med tidigare solida yta.
+
+Surface-tokens förblir solida. Glaseffekt är en per-komponent opt-in,
+inte en global token-mutation.
+
+## Consequences
+- + iOS-native visuell metafor för flytande navigation
+- + @supports garanterar att browsers utan stöd ser 96% solid fallback
+- + --glass-bg är app-agnostisk — korrekt tint följer automatiskt vid
+  Blue → Plum app-byte via surface-raised-kedjan
+- − Safari iOS: position:fixed + backdrop-filter skapar stacking context,
+  rubber-band-scroll måste verifieras på fysisk enhet
+- − Kontinuerlig GPU-compositing vid scroll (~5-15% extra GPU-tid på
+  äldre iPhoner). Accepterat givet bottoms navs lilla yta (2-3% av viewport)
+
+## Kalibreringsstatus
+65% är kalibrerat startvärde mot test-HTML med Blue-1-bakgrund (Jubb).
+Per-app-override i apps/jubb.css och apps/ekonom.css tillåter
+oberoende finjustering utan paketreleaser. Ekonom otestad mot
+Plum-1 - verifiera vid Ekonom-driftsättning.