@klodd/ds 5.13.0 → 5.14.0

package/SKILL.md

@@ -49,6 +49,20 @@ dessa två.
   samma yta som default-sektioner men distinkt mot page-bakgrunden
   (color-1).
 
+## Responsiv layout: container queries
+
+`.main-content` är en namngiven query-container (`container-type:
+inline-size; container-name: layout`, satt i `base/layout.css`).
+Komponenter kan därmed adaptera efter content-bredden istället för
+viewporten via `@container layout (...)`.
+
+Första användningen: `.stat-grid` går från 2 till 4 kolumner vid
+`@container layout (min-width: 700px)` (`components/stat.css`).
+Beteendet blir per-app eftersom varje apps `.main-content`
+max-width-override avgör vad queryn ser: Jubb (bred desktop-main,
+`--max-w-desktop`) får 4 kolumner, Ekonom (600px main) står kvar
+på 2. Lägg nya komponent-adaptioner under samma `layout`-container.
+
 ## Besluts-records
 - `references/04-locked-decisions/` — låsta beslut. Förklara, ändra inte.
 - `references/05-open-decisions/` — öppna punkter. Presentera alternativen.

package/css/00-primitives.css

@@ -418,14 +418,9 @@
   --bp-medium:   1024px;  /* mellanbredd → desktop */
   --bp-expanded: 1440px;  /* desktop → wide */
 
-  --max-w-mobile:               600px;
   --max-w-tablet:               680px;
   --max-w-desktop:              1280px;
-  --max-w-form:                 560px;
-  --max-w-bottom-nav:           572px;
-  --max-w-nav-desktop:          720px;
 
-  --content-max-width: 640px;
   --content-max-narrow:  480px;  /* .main-content--narrow */
   --content-max-default: 600px;  /* .main-content (default) */
   --content-max-wide:    800px;  /* .main-content--wide */

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/icon.css

@@ -1,13 +1,13 @@
 /* ================================================================
    components/icon.css
    .icon - generisk ikon-wrapper med fem size-modifiers.
-   Anvands for bade Lucide-ikoner (via <i data-lucide="X" class="icon icon--md">)
-   och custom inline-SVG (<svg class="icon icon--md">).
+   Anvands for bade sprite-ikoner (via <svg class="icon"><use
+   href="...#icon-X">) och custom inline-SVG (<svg class="icon icon--md">).
 
    color: currentColor sa parent-elementet styr fargen via color-property.
 
    Custom SVG-monster (.icon-custom svg) ger standardiserade
-   stroke-attribut for handritade ikoner som Lucide saknar.
+   stroke-attribut for handritade ikoner som spriten saknar.
    ================================================================ */
 
 
@@ -23,8 +23,8 @@
   vertical-align: middle;
 }
 
-/* Lucide ersatter <i data-lucide="X"> med <svg>. Tvinga svg att fylla
-   wrappern sa size-modifiers fungerar konsekvent. */
+/* Tvinga svg-barnet (sprite-<use> eller inline) att fylla wrappern
+   sa size-modifiers fungerar konsekvent. */
 .icon > svg {
   width: 100%;
   height: 100%;
@@ -44,12 +44,12 @@
 
 /* ================================================================
    ==== CUSTOM SVG-MONSTER
-   App-specifika ikoner som Lucide saknar. Anvand som wrapper:
+   App-specifika ikoner som spriten saknar. Anvand som wrapper:
      <span class="icon icon--md icon-custom">
        <svg viewBox="0 0 24 24">...</svg>
      </span>
-   stroke-width 1.5 matchar Lucide-default. linecap/linejoin round
-   ger samma mjuka look.
+   stroke-width 1.5 + linecap/linejoin round for mjuka, konsekventa
+   konturer.
    ================================================================ */
 .icon-custom svg {
   fill: none;

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.0",
+  "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.

package/references/05-open-decisions/0025-content-max-token-konsolidering-CLOSED.md

@@ -0,0 +1,44 @@
+# 0025 - content-max token-konsolidering
+
+## Status
+
+Closed 2026-05-22 (@klodd/ds 5.13.1).
+
+## Beslut
+
+Konsument-ytan kartlades i båda app-repona (CSS + templates). Av tio
+page-width-tokens var fem orphans utan en enda användning - de
+raderades ur 00-primitives.css:
+
+- `--max-w-mobile` (600px)
+- `--max-w-form` (560px)
+- `--max-w-bottom-nav` (572px)
+- `--max-w-nav-desktop` (720px)
+- `--content-max-width` (640px, avvikande namn)
+
+Fem tokens behölls i sina befintliga familjer:
+
+- `--content-max-narrow/-default/-wide` (480/600/800px) - paketet,
+  `.main-content`-varianterna i base/layout.css.
+- `--max-w-tablet/-desktop` (680/1280px) - Jubb app-override i
+  jubb.css.
+
+Ingen omdöpning. De två kvarvarande familjerna ligger i olika lager
+med olika roll (paket-default vs app-override) och blandas inte - att
+tvinga in dem i en familj hade dolt distinktionen. Patch-version: de
+raderade tokensen hade noll konsumenter, ingen breaking change.
+
+## Context
+
+Tre överlappande page-width-tokenfamiljer fanns i paketet efter
+width/height-arbetet (5.8.0):
+
+1. `--content-max-*` (`-narrow` 480px, `-default` 600px, `-wide`
+   800px) - definierade i 00-primitives.css, konsumeras av
+   base/layout.css (`.main-content`-varianterna).
+2. `--content-max-width: 640px` - orphan i 00-primitives.css, noll
+   användning i paketet eller apparna.
+3. `--max-w-*` (sex tokens: `-mobile` 600, `-tablet` 680, `-desktop`
+   1280, `-form` 560, `-bottom-nav` 572, `-nav-desktop` 720) i
+   00-primitives.css. `--max-w-mobile: 600px` överlappade exakt
+   `--content-max-default: 600px`.

package/references/05-open-decisions/0026-klodd-split-view-yagni-CLOSED.md

@@ -0,0 +1,33 @@
+# 0026 - klodd-split-view: bordlagd (YAGNI)
+
+## Status
+
+Closed 2026-05-22. Bordlagd, ingen implementation.
+
+## Context
+
+En split-view-komponent (lista + detalj sida-vid-sida på desktop) har
+funnits som backlog-idé. Konsument-ytan kartlades 2026-05-22:
+
+- Ekonom har ingen lista med separat detaljsida. Detalj-interaktioner
+  är sheets/modaler och inline-collapsibles - inget split-view-format.
+  Den smala 600px `.main-content` motverkar dessutom mönstret.
+- Jubb har en genuin master-detalj: `/jobb` (lista) + `/jobb/{id}`
+  (detalj, job_detail.html). En hypotetisk framtida split-view-
+  kandidat på desktop.
+
+## Beslut
+
+Bygg inte klodd-split-view. Per ADR 0024 kräver en paketkomponent två
+verifierade konsumerande appar; split-view har noll i dag och som mest
+en hypotetisk (Jubb /jobb). Att tillverka en andra konsument enbart
+för att rättfärdiga komponenten är uttryckligen förbjudet i ADR 0024.
+
+Om Jubb senare gör `/jobb` -> `/jobb/{id}` till en desktop-master-
+detalj byggs det som Jubb domän-CSS, inte paket. Det graduerar till
+paketet bara om Ekonom också får ett split-view-format - vilket dess
+arkitektur (sheet-baserad detalj, smal main) inte pekar mot.
+
+## References
+
+- ADR 0024 (skärpt komponent-lyft-doktrin)

package/references/05-open-decisions/0025-content-max-token-konsolidering.md

@@ -1,43 +0,0 @@
-# 0025 - content-max token-konsolidering
-
-## Status
-
-Pending.
-
-## Context
-
-Tre överlappande page-width-tokenfamiljer finns i paketet efter
-width/height-arbetet (5.8.0):
-
-1. `--content-max-*` (`-narrow` 480px, `-default` 600px, `-wide`
-   800px) - definierade i 00-primitives.css, konsumeras av
-   base/layout.css (`.main-content`-varianterna).
-2. `--content-max-width: 640px` - orphan i 00-primitives.css, noll
-   användning i paketet eller apparna.
-3. `--max-w-*` (sex tokens: `-mobile` 600, `-tablet` 680, `-desktop`
-   1280, `-form` 560, `-bottom-nav` 572, `-nav-desktop` 720) i
-   00-primitives.css. `--max-w-mobile: 600px` överlappar exakt
-   `--content-max-default: 600px`.
-
-## Decision needed
-
-Konsolidera till en page-width-tokenfamilj: behåll sannolikt
-`--content-max-*`, radera orphan `--content-max-width`, mappa eller
-radera `--max-w-*`-familjen.
-
-## Considered options
-
-### A. Konsolidera nu
-Risk: `--max-w-*` och `--content-max-width` har okänd konsument-yta.
-Apparnas domain-CSS och templates greppades inte. Att radera eller
-mappa dem kan ge visuell drift på okänt antal vyer.
-
-### B. Skjut till separat sprint (vald interim)
-Lämna alla tre familjer orörda i 5.8.0. Konsolidera när
-konsument-ytan kartlagts.
-
-## Pending decision criteria
-
-Kräver en survey av `--max-w-*`- och `--content-max-width`-användning
-i båda app-repona (CSS + templates) innan konsolidering. Tas i egen
-sprint.