@klodd/ds 5.13.0 → 5.13.1

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/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/package.json

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

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.