@klodd/ds 3.3.1 → 3.4.1

package/references/04-locked-decisions/0001-three-layer-token-architecture.md

@@ -0,0 +1,41 @@
+# 0001 - Tre-lagers token-arkitektur
+
+## Status
+Locked. Daterat 2026-04-26 (sprint 26 i Ekonom + sprint 1 i klodd-ds).
+
+## Context
+Designsystem har tva ytterligheter: ingen token-arkitektur (varje
+komponent har egna farg-/spacing-konstanter, omoljligt att underhalla)
+eller djupt-nestade token-hierarkier (5+ lager primitive→semantic→domain
+→component→variant, omoljligt att resonera om). Vi behover en
+arkitektur som:
+
+- Tilllater app-byte utan komponent-omskrivning
+- Skiljer "implementation detail" (fargvarden) fran "design intention"
+  (vad fargen betyder)
+- Har klart, regelbundet ansvar per lager
+
+## Decision
+Tre lager med strikt inkapsling:
+
+```
+00-primitives.css   raa varden (Radix OKLCH-ramper, exakta pixelvarden)
+10-semantic.css     komponenter laser hardefran
+apps/<app>.css      per-app accent + surface-overrides
+```
+
+Komponenter refererar **bara** semantic tokens. App/-filerna ar enda
+platsen som mappar primitives till semantic.
+
+## Consequences
+- + Ny app introduceras via 5-15 rader CSS, inte komponent-fork
+- + Bytte fargramp eller fargmodell (Radix → annan) andrar bara primitives
+- + Komponentkod ar lasbar utan att forsta hur app-byte fungerar
+- − Tva lagers indirektion gor debugging marginellt langsammare. CSS
+  DevTools visar resolved-varden anda
+- − Ny developer maste lara sig konventionen: "ALDRIG --gray-N i
+  komponent". Dokumenterat i `03-quality-bar.md`.
+
+## Implementation
+Se `01-tokens.md` for detaljerad token-referens.
+Se `03-quality-bar.md` regel #7 for app-overrides-konventionen.

package/references/04-locked-decisions/0002-bem-naming.md

@@ -0,0 +1,37 @@
+# 0002 - BEM-namngivning genomgaende
+
+## Status
+Locked. v3.0.0 cementerade detta - alla nya komponenter foljer BEM.
+
+## Context
+Komponentbibliotek har tre vanliga namngivningskonventioner:
+
+1. **Flat hyphen**: `.btn-primary`, `.card-elevated` (Bootstrap-stil)
+2. **BEM**: `.btn--primary`, `.card--elevated` (block-element-modifier)
+3. **Atomic/utility**: `.text-blue-500`, `.p-4` (Tailwind-stil)
+
+Vi behover en konvention som:
+- Halls konsekvent over 33+ komponenter
+- Halls lasbar utan dokumentation (ny developer/CC-session ska
+  forsta struktur fran namnet)
+- Forhindrar specificity-overraskningar
+
+## Decision
+**BEM genomgaende**: `.block`, `.block__element`, `.block--modifier`,
+`.block__element--modifier`. Alla 33+ komponenter foljer detta.
+
+## Consequences
+- + Specificity-balans: alla klasser ar 0,1,0 (ingen cascade-overraskning)
+- + Etablerad branschstandard - manga developer-erfarenheter
+- + LLM-vanligt: en CC-session forstaт `.btn--primary` som modifier
+  utan att lasa CSS:en
+- + Forhindrar "magic specificity" via descendant-selektorer
+  (`.card .btn` ar 0,2,0 - omojligt att override)
+- − Mer text att skriva an `.btn-primary` (extra `--`)
+- − Migration kraver template-omskrivning i app-repona (122
+  references for tx-row, ~50 for triage-* etc.)
+
+## Migration
+v3.0.0 introducerade BEM for nya komponenter. Befintliga app-repon
+har gradvis migration via per-template-uppdatering. Open punkter i
+`05-open-decisions/0001-tx-row-to-list-row-migration.md`.

package/references/04-locked-decisions/0003-radix-colors-oklch.md

@@ -0,0 +1,39 @@
+# 0003 - Radix Colors via OKLCH
+
+## Status
+Locked.
+
+## Context
+Designsystem behover en farg-ramp som:
+- Ar perceptuellt jamn (varje steg upplevs som lika storre forandring)
+- Har dokumenterad rollkarta (steg N betyder X)
+- Klarar WCAG-kontrast utan handkalibrering
+- Ar tillganglig via valetablerade tooling/bibliotek
+
+Tva alternativ:
+1. Hand-kalibrerade OKLCH-varden (tar tid, riskerar subtila
+   kontrast-buggar)
+2. Officiella Radix Colors (pre-kalibrerade)
+
+## Decision
+Anvand **officiella Radix Colors dark-skalor** rakt av:
+- Mauve (neutral - se ADR 0006)
+- Blue Dark (Jubb accent)
+- Plum Dark (Ekonom accent)
+- Violet Dark (forberedd for framtida app)
+- Green/Amber/Red Dark (status)
+
+Plus alpha-skalor (Mauve/Blue/Plum) for transparency-tints.
+
+Alpha-blending sker via `color-mix(in oklch, ...)` for ad-hoc-niver -
+INTE via hardkodad rgba.
+
+## Consequences
+- + Pre-kalibrerade WCAG-varden (steg 11 mot 1-2 = 4.5:1 garanterat)
+- + Dokumenterad rollkarta (3 = vila, 4 = hover, 5 = active osv.)
+- + OKLCH ger perceptuellt korrekt color-mix-blending
+- + Modern browser-stod (Chrome 111+, Safari 16.4+, Firefox 113+) kravs
+  redan av Radix
+- − Vi har inte fysisk kontroll over vardena - om Radix andrar dem maste
+  vi reagera
+- − Mauve passar inte for framtida grön/orange-accent-app (se ADR 0006)

package/references/04-locked-decisions/0004-pixel-numeric-spacing.md

@@ -0,0 +1,31 @@
+# 0004 - Pixel-numerisk spacing/typografi/radius
+
+## Status
+Locked.
+
+## Context
+Spacing-token-konventioner i designsystem:
+1. **Ordinala namn**: `--space-md`, `--space-lg` (Tailwind/Material-stil)
+2. **Fibonacci/multiplier**: `--space-1` (4px), `--space-2` (8px), etc.
+3. **Pixel-numerisk**: `--space-12` = 12px, `--fs-14` = 14px
+
+Ordinal-namn gor det svart att veta exakt vad `--space-md` ger - kraver
+mappning eller dokumentation. Multiplier-namn gor det svart att veta
+om `--space-3` ar 12px eller 16px. Pixel-numerisk eliminerar gissning.
+
+## Decision
+**Pixel-numeriska tokens**: `--space-N` dar N = exakt antal pixlar.
+
+Tillgangliga steg: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 32,
+40, 48, 56, 64, 80.
+
+Samma konvention for `--fs-N` (font-size) och `--radius-N` (radius).
+
+## Consequences
+- + LLM-vanligt: `--space-12 = 12px` ar trivialt att resonera om
+- + Designerns Figma-varde matchar token-namnet 1:1 utan mappning
+- + Forhindrar ordinal-explosion (md/lg/xl/2xl/3xl-stelhet)
+- + Att lagga till nya steg ar OK om det behovs - bara ett nytt token-namn
+- − Branschstandard ar ordinala namn (Tailwind, Material, Bootstrap).
+  Designer som kommer fran de ekosystemen far anpassa sig
+- − Lite mer text an `--space-md` (men trivialt)

package/references/04-locked-decisions/0005-data-app-theming.md

@@ -0,0 +1,42 @@
+# 0005 - Data-attribut-baserad theming
+
+## Status
+Locked.
+
+## Context
+Multi-app theming kan loseas pa flera satt:
+1. **CSS-in-JS** (varje app importerar olika theme-objekt)
+2. **Build-time-substitution** (separat build per app)
+3. **CSS-variables med data-attribut** (en build, runtime-byte)
+
+Vi behover en losning som:
+- Inte kraver build-time-tools (Klodd-apparna ar Python/FastAPI, inte Node)
+- Tilllater preview av flera teman pa samma sida (designsystem-styleguide)
+- Inte kraver komponentkod-ekvivalenter per app
+
+## Decision
+**`data-app="<app>"` pa `<html>`**. CSS-variables i `apps/<app>.css`
+overrides default-tokens via `[data-app="..."]`-selector.
+
+```html
+<html data-app="jubb">  <!-- Blue accent + Mauve neutral -->
+<html data-app="ekonom"> <!-- Plum accent + Plum surface + varma vit text -->
+```
+
+Komponenter laser bara `--accent-*` (och andra semantic tokens) - inte
+appen.
+
+## Consequences
+- + Strikt komponentaterbruk: en ANDRing i komponentens CSS landar
+  omedelbart i alla appar
+- + App-byte ar single-attribute-flip - same-document SPA-byte mellan
+  apps (om relevant) blir trivialt
+- + Designsystem-styleguide kan visa flera teman pa samma sida
+  (`<section data-app="jubb">` + `<section data-app="ekonom">`)
+- + Inga Sass-mixins eller PostCSS-plugins - ren CSS
+- − Apparna maste dela komponentbibliotek. Om Ekonom och Jubb behover
+  fundamentalt olika `.btn`-styling skulle vi behova splittra. Inte
+  planerat
+- − Specificity: `[data-app="jubb"] { --accent-9: ... }` har 0,1,1
+  vilket ar mer specifikt an `:root { --accent-9: ... }`. Cascade
+  fungerar dock korrekt sa inget problem i praktiken

package/references/04-locked-decisions/0006-mauve-neutral.md

@@ -0,0 +1,40 @@
+# 0006 - Mauve som neutral (inte ren gray)
+
+## Status
+Locked.
+
+## Context
+Neutral-skalan i designsystem ar viktigaste valet - det styr hur
+ALLT app-text och bakgrund ser ut. Tre vanliga val:
+
+1. **Ren gray/slate** (kall, "tech")
+2. **Mauve / olive** (lila-tonad, varmare)
+3. **Stone / sand** (varma jordtoner)
+
+Vi behover en neutral som:
+- Kompletterar bade Blue (Jubb) och Plum (Ekonom) accents
+- Inte klingar med nagon av accenterna
+- Ar Radix-officiell (per ADR 0003)
+
+## Decision
+**Mauve** som neutral. `--gray-1` till `--gray-12` mappas till Radix
+Mauve Dark, INTE ren gray eller slate.
+
+## Consequences
+- + Radix officiella rekommendation som komplement till Blue och Plum -
+  redan testat i kombinationer
+- + Subtle lila-tonad ger varmare bottenton som matchar bagge
+  app-accenterna
+- + Konsistent visuellt sprak over apparna - bagge har samma neutral
+- − Mauve passar INTE for en framtida gron- eller orange-accent-app.
+  Inte planerat - om det blir aktuellt valjer vi neutral utifran den
+  appens accent vid den punkten (kanske separat data-app + neutral-
+  override)
+- − Vissa anvandare kan kanna sig ovana med varmare neutral - branschen
+  ar dominerad av kallare gray/slate
+
+## Notering
+Variabeln heter `--gray-N` (inte `--mauve-N`) eftersom det ar den
+funktionella rollen, inte fargen. Implementationen sker via Mauve-
+varden men namnet ar "gray" sa komponenter inte vet vilken neutral
+de anvander.

package/references/04-locked-decisions/0007-font-weight-400-500.md

@@ -0,0 +1,46 @@
+# 0007 - Font-weight 400/500 - inga 600+
+
+## Status
+Locked. Ett dokumenterat undantag for display-siffror (hero-roll).
+
+## Context
+Font-weight skapar visuell hierarki men for manga niver ger
+inkonsekvens:
+- 400 (regular)
+- 500 (medium)
+- 600 (semibold)
+- 700 (bold)
+- 800 (extrabold)
+
+Med 5 niver tappar designern overblick - en designer valjer 600 nagon
+gang, en annan 700, snart finns alla varianter och inget moverar
+hierarkin.
+
+## Decision
+**Bara `--fw-regular` (400) och `--fw-medium` (500)** i designsystem.
+
+Undantag: `.hero-amount` (display-siffror i hero-roll) har explicit
+`font-weight: 600`. Dokumenterat i `components/hero-roll.css` med
+kommentar.
+
+## Consequences
+- + Tva-steg ger tillrackligt med visual hierarchy: medium ar emphasis,
+  regular ar default
+- + Forhindrar inkonsistens (alla designers/utvecklare valjer fran samma
+  set)
+- + Mindre WOFF2-payload (faerre weights att hamta fran SF Pro fallback
+  / system-fonts)
+- − Bold-text-effekt ar narvarande pa display-skala. Vid framtida feature-
+  arbete dar bold-text behovs (banners-hero?), maste motiveras +
+  dokumenteras
+
+## Undantaget i detalj
+`.hero-amount[data-animate-roll]` ar 80px display-siffror som ska
+visualiseras med tyngd. UI-text pa 14-22px har inte samma behov.
+Undantaget ar harkodat i `components/hero-roll.css` och dokumenterat
+i `01-tokens.md` (Typografi-sektionen).
+
+## Future
+Om en framtida `.banner--hero` eller `.heading-display` behover bold,
+flytta undantaget till en explicit modifier-token (`--fw-display: 600`)
+istallet for inline-styling.

package/references/04-locked-decisions/0008-npm-package-distribution.md

@@ -0,0 +1,40 @@
+# 0008 - npm-distribution som CSS-only (+ JS)
+
+## Status
+Locked.
+
+## Context
+Designsystem kan distribueras flera vagar:
+1. **Git-submodule** (clone som dependency)
+2. **Bundled JS-package** (importeras via npm + bygg-tid-bundle)
+3. **CSS-only npm-package** (importeras via npm + kopieras direkt)
+
+Klodd-apparna ar Python/FastAPI - inte Node/Webpack. Railway deployar
+utan Node-runtime. Vi behover en losning som:
+- Inte kraver Node-build i prod
+- Inte kraver bygg-tid-tools eller Sass/PostCSS
+- Halls reproducibel via versions-lasning
+
+## Decision
+**Distribution som rena CSS-filer + ren JS-filer via @klodd/ds pa npm.**
+
+App-repona installerar via `npm install @klodd/ds@<version>`, sedan
+ett build-script (`npm run build:ds`) som kopierar filer rakt av till
+`app/static/css/` och `app/static/js/ds/`. Inga Sass-kompileringar,
+inga PostCSS-plugins, inga JS-build-bundles.
+
+App-repona committar de kopierade filerna sa Railway deployar utan
+Node runtime. node_modules/ ar gitignored.
+
+## Consequences
+- + Bygg-tid noll i Railway-deploys
+- + Versioner laekta via package.json (`^3.0.3`)
+- + Reproducibel deploy utan node_modules pa Railway-side
+- + Inga komplexa build-konfigurationer
+- − Vi kan inte anvanda Sass-mixins eller PostCSS-plugins. Allt maste
+  fungera med ren CSS + `@media`/`@import`/`@layer`/`@supports`
+- − Versions-uppgradering ar tva-stegs (npm install + build:ds + commit
+  + push). Lite mer tropisk an automatic JS-bundling
+- − CSS-filerna lever bade i klodd-ds-repo OCH i app-repona (commited
+  efter build:ds). Drift i app-repots committed-fil mot paketets
+  publicerade version maste hanteras

package/references/05-open-decisions/0001-tx-row-to-list-row-migration-CLOSED.md

@@ -0,0 +1,80 @@
+# 0001 - .tx-row → .list-row migration i Ekonom
+
+## Status
+**Closed 2026-05-08** via Option B (big-bang migration). Ekonom-commit
+[c4f0f79](https://github.com/drawn124578/ekonom/commit/c4f0f79). 9 templates +
+4 CSS-filer migrerade i en sprint. 94 byten totalt (briefens 122-siffra
+inkluderade .cat-tx-* som är separat komponent och ej omfattades).
+
+Paketets faktiska BEM-namn vann över briefens varianter:
+- .tx-desc -> .list-row__desc (briefen sade __title)
+- .tx-amount -> .list-row__amount (briefen sade __value)
+- .tx-list -> .list (briefen sade .list-row-group)
+
+components/list-row.css aktiverad i bundles/ekonom.css. Gamla TX-ROW-
+blocket i components.css raderat (rad 683-762). Pytest 636/636.
+
+## Context
+Ekonom har 122 references till `.tx-row` / `.tx-icon` / `.tx-body` /
+`.tx-desc` / `.tx-amount` / `.tx-date` / `.tx-meta` / `.tx-list` over
+8 templates:
+
+- `app/templates/avstamning.html`
+- `app/templates/kategorier.html`
+- `app/templates/privat.html`
+- `app/templates/bolan.html`
+- `app/templates/review_queue.html`
+- `app/templates/upload_preview.html`
+- `app/templates/avi_preview.html`
+- `app/templates/partials/_pending_icon.html`
+
+Klassnamnen `.tx-*` ar transaction-domanlika (transaction = bokforing-
+domanen). Generaliserat namn `.list-row` finns redan i paketets
+`components/list-row.css` med BEM-konvention.
+
+## Considered options
+
+### Option A: Per-template migration over flera sprintar
+**Pros:**
+- Lag risk for visuell regression
+- Kan testas per vy
+- Platta migrations-dependencies
+**Cons:**
+- Drar ut over tid
+- Kraver att gamla `.tx-*` aliases halls levande i `ds/components.css`
+  parallellt med nya `.list-row__*` definitioner
+
+### Option B: Big-bang migration i en sprint
+**Pros:**
+- Snabbt klart
+- Inga aliases att underhalla
+**Cons:**
+- 122 byten + matching JS-references (kategori-flytt, exclude-toggle)
+  + selektor-andringar i `ds/components.css` + `ds/ekonom.css` ar
+  hog risk
+- Visuell regression svar att fanga utan visuell QA per vy
+
+### Option C: Behall `.tx-row` som Ekonom-specifik klass + lagga till
+`.list-row` som paritets-namn (paketets klass aktiverad globalt)
+**Pros:**
+- Inga template-andringar i Ekonom
+- Paketets `.list-row` blir tillganglig for Jubb och framtida apps
+**Cons:**
+- Driften mellan apparna fortsatter (Ekonom anvander `.tx-*`, Jubb
+  hypotetiskt skulle anvanda `.list-row`)
+- Duplicering i `ds/components.css` (existing `.tx-*` block) +
+  paketet (`.list-row*` block) - bagge styler list-rader
+
+## Pending decision criteria
+- Sprint-prioritering: ar paritets-renstad varderad nog att kosta
+  template-arbete?
+- Risk-tolerans: kan vi ha en sprint dedikerad till migration utan
+  feature-arbete?
+- Long-term-direction: ska Ekonom adoptera paketets BEM-namn helt
+  eller behalla sin Ekonom-specifika namnkonvention?
+
+## Notes
+- Paketets `.list-row` (BEM) finns redan i v3.0.0+ - inga ytterligare
+  paket-andringar behovs
+- Migration kan testas pa en template forst (avstamning.html) som
+  pilot-test

package/references/05-open-decisions/0002-parallel-classnames-cleanup-CLOSED.md

@@ -0,0 +1,75 @@
+# 0002 - Parallella klassnamn pa profile-edit i Ekonom
+
+## Status
+**Closed 2026-05-08** via Option C (acceptera paketets defaults). Ekonom-
+commit [21e4cfe](https://github.com/drawn124578/ekonom/commit/21e4cfe).
+Flat-klasser .profile-name-* borttagna fran jag.html. ekonom.css rad
+832-884 (hela .profile-name-* blocket) raderat. components.css selektor
+.profile-panel-centered .profile-name-row -> .inline-edit (behaller
+centrering-styling, byter selektor). Pytest 636/636.
+
+## Context
+Ekonoms `app/templates/jag.html` har for tillfallet bade BEM (paketets
+`.inline-edit`) och flat (Ekonom-egen `.profile-name-edit`) klassnamn
+parallellt:
+
+```html
+<p class="heading inline-edit profile-name-row">
+  <span class="inline-edit__text profile-name-label" ...>...</span>
+  <button class="inline-edit__btn profile-name-edit" ...>...</button>
+</p>
+<form class="inline-edit__form profile-name-form" ...>
+  <input class="inline-edit__input profile-name-input" ...>
+</form>
+```
+
+Den parallella konstruktionen ar en migrations-bro - befintlig CSS i
+`ds/ekonom.css` styler de gamla flat-klasserna, medan paketets
+`inline-edit.css` styler de nya BEM-klasserna. Att radera de gamla
+flat-klasserna nu skulle bryta visuell rendering eftersom Ekonoms
+ds/ekonom.css har specifik styling for `.profile-name-edit` /
+`.profile-name-input` etc. (med Ekonom-specifika margins, fonts,
+focus-states) som inte exakt matchar paketets default.
+
+## Considered options
+
+### Option A: Stada upp i samma sprint som tx-row-migrationen (#0001)
+**Pros:**
+- Naturlig paritetsstad - bagge migrationer berorer `ds/ekonom.css`
+- Minimerar antal touch-events pa filen
+**Cons:**
+- Beror sprint-prioriteringen for #0001
+
+### Option B: Utoka paketets `.inline-edit__btn` med modifiers som matchar
+Ekonoms befintliga (t.ex. `.inline-edit__btn--small` for 28x28-cirkel)
+**Pros:**
+- Bevarar Ekonoms exakta visuella beteende utan klass-byte
+- Kan goras i isolation utan template-andringar
+**Cons:**
+- Bumpa paketets minor-version
+- Lagger till "Ekonom-specifik" modifier i ett paket som ska vara
+  app-agnostiskt
+- Inte sakert att modifierna ar generella nog att rattfardiga
+  paket-niva
+
+### Option C: Acceptera de visuella defaulterna fran paketets
+`.inline-edit` och radera Ekonom-specific styling i `ds/ekonom.css`
+**Pros:**
+- Stadar upp helt
+- Standardiserar pa paketets default
+**Cons:**
+- Kan ge mindre visuell regression om Ekonoms current styling
+  skiljer sig fran paketets default
+- Kraver visuell verifiering pa /jag-vyn
+
+## Pending decision criteria
+- Visuell paritets-test mellan paketets `.inline-edit__btn` default
+  och Ekonoms current `.profile-name-edit` styling
+- Om matchar: kor Option C
+- Om skiljer betydligt: vag mot Option B
+
+## Notes
+- Paketets `inline-edit.css` har `.inline-edit__form[hidden]` regel
+  (v3.0.1) plus globalt `[hidden] { display: none !important }`
+  i `base/pwa.css` (v3.0.2) sa hidden-attributet alltid respekteras
+  oavsett kvar-staende styling

package/references/05-open-decisions/0003-js-duplicates-migration-CLOSED.md

@@ -0,0 +1,79 @@
+# 0003 - JS-dublering: bar-styles + hero-roll i bagge appar
+
+## Status
+**Closed 2026-05-08 (Ekonom)** via Option A (migration via base.html-
+uppdatering). Ekonom-commit [afebbec](https://github.com/drawn124578/ekonom/commit/afebbec).
+
+base.html: <script src="/static/js/{bar-styles,hero-roll}.js"> bytt till
+/static/js/ds/-versioner. SW PRECACHE_URLS uppdaterad. App-egen kopior
+raderade (app/static/js/bar-styles.js + app/static/js/hero-roll.js).
+Pytest 636/636.
+
+Jubb status: kvarvarande oppen - kan stangas i samma monster nar Jubb
+faktiskt anvander dem (icke-blockande for narvarande).
+
+## Context
+Bade Jubb och Ekonom har for tillfallet `bar-styles.js` och
+`hero-roll.js` BADE som app-egen JS i `app/static/js/` OCH som paketets
+versioner i `app/static/js/ds/`:
+
+```
+Jubb:
+  app/static/js/bar-styles.js          (lokal, laddad via base.html)
+  app/static/js/ds/bar-styles.js       (paketet, ej laddad)
+  app/static/js/hero-roll.js           (lokal, laddad)
+  app/static/js/ds/hero-roll.js        (paketet, ej laddad)
+
+Ekonom:
+  app/static/js/bar-styles.js          (lokal, laddad)
+  app/static/js/ds/bar-styles.js       (paketet, ej laddad)
+  ... osv
+```
+
+App-egen versionen ar vad `base.html` refererar idag. Paketets versioner
+i `js/ds/` ar "redo att aktivera" via `KloddDS.init()` men ej kopplade
+annu.
+
+## Considered options
+
+### Option A: Migration via base.html-uppdatering till `js/ds/`-paths
+**Pros:**
+- Single source of truth (paketets version vinner)
+- Forhindrar drift mellan app-egen och paket-version
+- Aktiverar v3.0.0+ forbattringar i app-egen kod (t.ex. om paketets
+  hero-roll.js far bug-fix gar den till bagge apparna automatiskt)
+**Cons:**
+- SW VERSION-bump kravs (cache-bust)
+- Visuell verifiering per app
+
+### Option B: Behall app-egen versions och radera paketets js/ds/-kopior
+fran build:ds
+**Pros:**
+- Inga template-andringar
+- Snabbare path
+**Cons:**
+- Driften kan fortsatta - om paketets hero-roll forbattras far apparna
+  inte automatisk uppgradering
+- Bryter mot scope-beslutet "alla komponenter och delad JS in i paketet"
+  (briefen 2026-05-07)
+
+### Option C: Explicit migrate JS per app i samma sprint som adoptering
+av nya features
+**Pros:**
+- Migration sker nar det finns ett konkret behov
+- Lag isolerad risk
+**Cons:**
+- Drar ut over tid
+
+## Pending decision criteria
+- Stabilitets-prioritet: ar app-egen versionerna stabila nog att risken
+  att switcha till paketets ar varderad?
+- Future-feature-pull: kommer paketets versioner att fa nya features
+  som apparna vill ha?
+
+## Notes
+- Paketets `js/ds/index.js` har `KloddDS.init({...})`-aggregator som
+  laddar enskilda moduler. Adoption av aggregatorn ar separat fran
+  enskild-fils-migration
+- Pwa-register.js migrerades till paketets version i v3.0.3 (Jubb).
+  Ekonoms egen pwa-register.js fortsatter anvandas

package/references/05-open-decisions/0004-halsomentorn-legacy-css.md

@@ -0,0 +1,51 @@
+# 0004 - Halsomentorn legacy-CSS i Ekonom
+
+## Status
+Pending. Lag prioritet.
+
+## Context
+Ekonoms `app/static/css/ds/halsomentorn.css` ar 1783 rader CSS som
+levt fran tiden Ekonom delade designsystem med Halsomentorn-projektet
+(sprint 56, 2026-05-01). Halsomentorn-projektet ar inte aktivt langre
+i Klodd-eko - det ar foraldrat WordPress-baserat halsa-projekt.
+
+Filen importeras INTE av Ekonom (`ds/bundles/ekonom.css` listar inte
+den). Den laddas bara om `/design`-route explicit pekar dit (via
+per-template `<link>`).
+
+## Considered options
+
+### Option A: Radera `ds/halsomentorn.css` helt
+**Pros:**
+- Stadar upp 1783 rader dod CSS
+- Reducerar mental ovederhead nar man laser ds/-mappen
+- Halsomentorn-projektet ar arkiverat
+**Cons:**
+- Forlustar referens till sprint-56-designsystem-extraction-arbetet
+- Om Halsomentorn skulle vakna upp igen behovs CSS:en aterskapas
+  (osannolikt)
+
+### Option B: Flytta filen till `docs/archive/`
+**Pros:**
+- Bevarar historik utan att den lever i ds/-mappen
+- Lag risk
+**Cons:**
+- Lite bookkeeping (filen flyttas, manga importer maste verifieras)
+
+### Option C: Behall i ds/-mappen, dokumentera tydligare
+**Pros:**
+- Inga andringar
+**Cons:**
+- Mental overhead kvarstar
+
+## Pending decision criteria
+- Halsomentorn-status: ar projektet definitivt arkiverat eller
+  kan det vakna upp?
+- Cleanup-prioritet: ar 1783 rader dod CSS vard att stada bort?
+
+## Notes
+- Filen ligger BARA i Ekonoms repo, inte i klodd-ds-paketet eller Jubb
+- Paritets-audit-status: Ekonom har den, Jubb saknar den (dokumenterad
+  asymmetri i klodd-ds AUDIT.md)
+- Lag prioritet - inte ett produktionsproblem, bara ett snyggherings-
+  arbete

package/references/05-open-decisions/0005-cat-class-location-CLOSED.md

@@ -0,0 +1,37 @@
+# 0005 - .tx-icon.cat-X location (CLOSED)
+
+## Status
+**Closed** 2026-05-07. Resolverad i Ekonom-commit `1e14c07`.
+
+## Context
+Calles paritetsaudit identifierade misstanke om att kategori-fargade
+ikon-regler (`.tx-icon.cat-mat`, `.tx-icon.cat-noje` osv) lag i den
+delade `ds/components.css` istallet for Ekonom-domain-fil.
+
+Vid undersokning visade det sig att:
+- `.tx-icon.cat-X`-reglerna (8 stycken) lag faktiskt i `ds/ekonom.css`,
+  inte `components.css` - sa inget paritets-brott vs delade systemet
+- Token-application var dock SEPARERAD fran token-definition: tokens
+  i `ekonom-domain.css`, application i `ekonom.css`
+
+## Decision
+Flytta `.tx-icon.cat-X`-reglerna fran `ds/ekonom.css` till
+`ds/ekonom-domain.css` sa token-definition och token-application lever
+pa samma plats.
+
+Andra `.cat-*`-relaterade regler (`.cat-tx-*`, `.cat-bar-*`, `.cat-list`,
+`.cat-row*`) **flyttades INTE** - de ar komponent-niva-styling som
+rakar anvanda --cat-*-tokens. De fortsatter leva i `ds/ekonom.css`
+som kategori-collapsible-list-stuktur.
+
+## Consequences
+- + Single source of truth for kategori-fargning (tokens + application
+  pa samma plats)
+- + Tydligare separation: `ekonom-domain.css` = kategori-data, `ekonom.css`
+  = kategori-relaterade komponentstrukturer
+- + Inga visuella regressioner (samma CSS-output, bara annan plats)
+
+## Verifiering
+- Pytest 636 passed (oforandrat)
+- Visuell kontroll pa /avstamning, /kategorier (kategori-fargade
+  tx-icons rendrar identiskt)