@klodd/ds 3.8.0 → 3.9.1

package/SKILL.md

@@ -7,7 +7,7 @@ description: Design memory for the @klodd/ds shared design system across all Klo
 
 ## Vad detta är
 Gemensamt designsystem på npm (`@klodd/ds@3.x`). Tre-lagers tokens,
-34+ komponenter (sheet-content tillagd v3.5.1), konsumeras av Jubb
+37+ komponenter (sheet-content tillagd v3.5.1), konsumeras av Jubb
 och Ekonom. Fler appar planerade.
 Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
 
@@ -108,38 +108,4 @@ En källa, alla projekt ser samma skill automatiskt. Ändringar i
 `~/dev/klodd-ds/SKILL.md`, `POLICY.md` eller `references/` syns
 omedelbart i nästa CC-session - ingen synk-fas behövs.
 
-Updated: 2026-05-09 (matchar @klodd/ds 3.5.4 - sprint C fas 1+2: ny
-sheet-content.css-komponent (24 BEM-klasser för Sprint-65-pattern),
-foreman-typografi-utokning (.text-caption/-tiny/-num/-num--display/-positive/-warning),
-btn-modifiers (--block, --add), .heading (17px medium tight), och utokningar
-i panel/setting-row/chip.
-v3.5.2 rattade .panel--attention__pill (felaktig BEM) till .panel__pill +
-context-styling via .panel--attention .panel__pill.
-v3.5.3 lagger till .heading-utan-N (17px) for dialog-titlar och sheet-rubriker.
-v3.5.4 (Sprint D-3) introducerar --fs-16 token (16px) for iOS-anti-zoom
-pa inputs och applicerar pa inline-edit__input. Token ar dokumenterad
-som BARA for input-element - vanlig text anvander fortfarande 15 eller 17.
-v3.5.5 (Sprint E) konsoliderar :focus-visible over 7 komponenter (chip,
-list-row, tab-bar, nav, swipe-stack, inline-edit) - 11 nya selectorer
-fick outline 2px solid var(--border-focus) med outline-offset 2px. Plus
-.tab outline-offset normaliserad 1px->2px. input.css och .inline-edit__input
-ar dokumenterade undantag som behaller :focus (text-input-konvention).
-v3.5.6 (Sprint F) konsoliderar BEM over 5 komponenter (card, dropdown,
-hero-roll, overlay, nav) - 23 flat-hyphen element-klasser konverterade
-till .block__element-syntax. Inkluderar JS-koordinering pa hero-roll,
-sheet-drag, turbo-nav, nav-optimistic dar querySelector/classList
-adresserar de bytta klasserna. .bottom-nav-item.active konverterad till
-BEM-modifier .bottom-nav__item--active. tooltip-wrapper bevarad som
-compound block per references/03-quality-bar.md regel 1.
-v3.5.7 (Sprint G) uppdaterar hub-card.css med Ekonoms tightare design
-(padding 14/16, border-radius 14, hub-list gap 10, active scale 0.985)
-nar Ekonoms LEGACY-version raderades. Sprint G hanterade aven domain-CSS
-BEM-migration i app-repos (icke-paket-fil) - 4 tier: A=dead-code-radering
-(14 klasser), B=paket-dubblett-radering (.hub-card + .hub-list ur Ekonoms
-LEGACY), C=BEM-byten (9 block-grupper: amort-bar, cat-tx-stack, cat-row,
-cat-list-row state-modifiers, sub-row state-modifiers, job-card, hero-amount-card,
-source-bar, score-bar), D=compound-block-undantag (cat-bar/equity-bar/
-budget-bar/hbar/cat-tx). Plus base.css Sprint F-miss fixad (bottom-nav-item,
-sheet-handle som descendant-selektorer i touch-cleanup + press-feedback).
-Jubb fick paritet med Ekonom: bundles/jubb.css + jubb-domain.css scaffold.
-Sprint C fas 2 template-migration pagaar.)
+Updated: 2026-05-10 (matchar @klodd/ds 3.9.0)

package/css/components/auth.css

@@ -26,3 +26,10 @@
   margin: 0 0 var(--space-24);
   font-size: var(--fs-13);
 }
+
+.auth-container--narrow {
+  min-height: auto;
+  max-width: 480px;
+  margin-left: auto;
+  margin-right: auto;
+}

package/css/components/button.css

@@ -7,6 +7,7 @@
    - --primary   solid accent
    - --secondary surface med border
    - --ghost     transparent text
+   - --positive  transparent + positive-border (Ekonom-lyft Sprint 5)
    - --danger    solid danger
 
    Standardstorlekar:
@@ -117,6 +118,17 @@
   }
 }
 
+/* --positive: transparent + positive-border. Bekraftande action
+   (t.ex. "Gemensam"-flagga i review_queue). Lyft fran Ekonom v3.9.0. */
+.btn--positive {
+  background: transparent;
+  color: var(--positive);
+  border-color: var(--positive-border);
+}
+@media (hover: hover) and (pointer: fine) {
+  .btn--positive:hover { background: var(--positive-dim); }
+}
+
 /* --danger: solid danger. Destruktiv action. */
 .btn--danger {
   background: var(--bg-danger);

package/css/components/kv-list.css

@@ -0,0 +1,84 @@
+/* ================================================================
+   components/kv-list.css
+   Key-value list - generiskt monster for metadata-rader med
+   label till vanster och varde till hoger. Anvands for metric-
+   breakdowns, statistik-paneler, settings-summaries.
+
+   Blocks:
+     .kv-list           - <ul>-wrapper, nollstaller list-styling
+
+   Element:
+     .kv-list__item     - en rad (justify-content: space-between)
+     .kv-budget-header  - rubrik-rad for budget-expandering
+                          (compound-block per regel 11)
+     .kv-budget-body    - expanderat innehall (compound-block)
+
+   Modifiers (pa .kv-list__item):
+     --strong   - primary text + medium weight
+     --sub      - secondary text + smaller font
+     --divider  - horisontell separator-rad
+     --budget   - block-display for burndown-rad med expanderbar header
+
+   Lyft fran Ekonoms ekonom.css LEGACY-sektion i v3.9.0 (Sprint 5,
+   MADR 0009). Generaliserade BEM-namn ersatter Ekonoms ursprungliga
+   .kv-strong/.kv-sub/.kv-divider/.kv-budget-row klasser.
+   ================================================================ */
+.kv-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.kv-list__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--space-8) 0;
+  font-size: var(--fs-13);
+  color: var(--text-subtle);
+}
+
+.kv-list__item--strong {
+  color: var(--text-default);
+  font-weight: var(--fw-medium);
+}
+
+.kv-list__item--sub {
+  font-size: var(--fs-11);
+  color: var(--text-subtle);
+}
+
+.kv-list__item--divider {
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0;
+  margin: var(--space-4) 0;
+}
+
+.kv-list__item--budget {
+  display: block;
+  padding: 0;
+}
+
+.kv-budget-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--space-8) 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.kv-budget-body {
+  padding: var(--space-4) 0 var(--space-8) 0;
+}
+
+.kv-budget-body .kv-list__item--sub {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: var(--fs-11);
+  color: var(--text-subtle);
+  padding: var(--space-4) 0;
+}

package/css/components/nav.css

@@ -9,7 +9,7 @@
 
    HTML-relationer:
      .bottom-nav > .bottom-nav__item (BEM-element)
-     .topbar > .topbar__back/__title/__action (BEM-element)
+     .topbar > .topbar__back/__title/__action/__logo (BEM-element)
 
    Modifiers/States:
      .bottom-nav__item--active  - aktiv pod (Sprint F BEM-konvertering)
@@ -176,6 +176,13 @@
   outline-offset: 2px;
 }
 
+.topbar__logo {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-snug);
+  color: var(--text-default);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .bottom-nav__item:active { transform: none; }
 }

package/css/components/offline.css

@@ -0,0 +1,53 @@
+/* ================================================================
+   components/offline.css
+   Offline-page layout - visas av service worker vid natverksfel.
+   Generiskt PWA-monster for alla appar med offline-support.
+
+   Blocks (compound, alla anvands tillsammans):
+     .offline-wrap   - centrerad full-page container (min-height 70vh)
+     .offline-icon   - stor ikon-display (64x64, surface-raised)
+     .offline-title  - primar rubrik (fs-22, medium)
+     .offline-text   - beskrivande text (max-width 320px)
+
+   Lyft fran Ekonoms ekonom.css LEGACY-sektion i v3.9.0 (Sprint 5,
+   MADR 0009). Compound-block-monster per regel 11 - alla 4 blocks
+   anvands tillsammans pa offline.html.
+   ================================================================ */
+.offline-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  text-align: center;
+  padding: var(--space-32) var(--space-20);
+  gap: var(--space-16);
+}
+
+.offline-icon {
+  width: 64px;
+  height: 64px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-20);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-subtle);
+  margin-bottom: var(--space-8);
+}
+
+.offline-title {
+  font-size: var(--fs-22);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tight);
+  color: var(--text-default);
+}
+
+.offline-text {
+  font-size: var(--fs-14);
+  color: var(--text-subtle);
+  max-width: 320px;
+  line-height: var(--lh-base);
+  margin-bottom: var(--space-8);
+}

package/css/index.css

@@ -65,3 +65,7 @@
 
 /* v3.5.1 - sheet-content (sprint-65 form-monster, generiska BEM-namn) */
 @import './components/sheet-content.css';
+
+/* v3.9.0 - lyft fran Ekonoms LEGACY-sektion (Sprint 5 MADR 0009) */
+@import './components/kv-list.css';
+@import './components/offline.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.8.0",
+  "version": "3.9.1",
   "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.3 (2026-05-09): tillagg .heading (17px medium tight) i base/typography.css for dialog-titlar och sheet-rubriker. Tackar luckan mellan .heading-2 (18px) och .heading-3 (15px) - matchar Ekonoms gamla .heading-class.",
   "main": "css/index.css",
   "bin": {

package/references/02-components.md

@@ -1,6 +1,6 @@
 # Komponentkatalog
 
-35 komponent-filer i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
+37 komponent-filer i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
 inga primitives. BEM-konvention (block__element--modifier).
 
 ## Klassificeringsformat
@@ -19,7 +19,7 @@ För varje entry gäller:
 
 ### button (`button.css`)
 - **Blocks:** `.btn`
-- **Modifiers:** `.btn--primary/-secondary/-ghost/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--block/-add`, `.btn--loading`
+- **Modifiers:** `.btn--primary/-secondary/-ghost/-positive/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--block/-add`, `.btn--loading`
 - **Anvand:** alla aktioner med tap-target >=44px
 - **INTE:** Cirkel-link i topbar (anvand `.btn--icon.btn--circle`)
 - **Tokens:** `--surface-default/-hover/-active`, `--text-default/-on-accent`, `--border-default/-focus`, `--accent-9/-10`, `--bg-danger`, `--touch-min`
@@ -48,8 +48,8 @@ För varje entry gäller:
 - **Tokens:** `--surface-raised/-overlay/-hover`, `--border-subtle/-default/-focus`
 
 ### nav (`nav.css`)
-- **Blocks:** `.bottom-nav`, `.topbar`, `.tab-bar`, `.tab` (child av tab-bar)
-- **Element:** `.bottom-nav__item`, `.topbar__back`, `.topbar__title`, `.topbar__action`
+- **Blocks:** `.bottom-nav`, `.topbar`
+- **Element:** `.bottom-nav__item`, `.topbar__back`, `.topbar__title`, `.topbar__action`, `.topbar__logo`
 - **Modifiers:** `.bottom-nav__item--active` (Sprint F BEM-konvertering)
 - **States:** `.tab.active`
 - **Anvand:** Mobile bottom-nav (fixed), in-flow topbar, segmented tabs
@@ -162,12 +162,11 @@ För varje entry gäller:
 - **INTE:** Klickbart kort med rich content (anvand `.hub-card`)
 
 ### collapsible (`collapsible.css`)
-- **Blocks:** `.collapsible-card`
+- **Blocks:** `.collapsible`
 - **Element:** `.collapsible__header`, `.collapsible__header-text`, `.collapsible__chev`, `.collapsible__body`
-- **States:** `[data-expanded]` pa `.collapsible-card`
+- **States:** `[data-expanded]` pa `.collapsible`
 - **Anvand:** Panel som expanderar pa klick. JS togglar `data-expanded`
 - **INTE:** Modal-content (anvand `.dialog` eller `.sheet`)
-- **Special:** BEM-stam-mismatch - block heter `.collapsible-card` men element heter `.collapsible__X` (utan `-card`-suffix). Oppen punkt for rename, se sprint-rapport 2026-05-09.
 
 ### hbar (`hbar.css`)
 - **Blocks:** `.hbar`
@@ -221,6 +220,7 @@ För varje entry gäller:
 ### auth (`auth.css`)
 - **Blocks:** `.auth-container`
 - **Element:** `.auth-container__title`, `.auth-container__subtitle`
+- **Modifiers:** `.auth-container--narrow` (max-width 480px, ej full-page-centrerad - for onboarding-vyer)
 - **Anvand:** Centrerad layout for inloggning + onboarding
 - **INTE:** Settings-vyer
 
@@ -271,6 +271,20 @@ För varje entry gäller:
 - **Tokens:** `--bar-accent` (sattes av app-bindning), `--accent-9` (default)
 - **Pattern:** Se "Kategori-monstret" nedan
 
+### kv-list (`kv-list.css`) - v3.9.0
+- **Blocks:** `.kv-list` (`<ul>`-wrapper)
+- **Element:** `.kv-list__item`, `.kv-budget-header` (compound, klickbar header), `.kv-budget-body` (compound, expanderat innehall)
+- **Modifiers:** `.kv-list__item--strong/-sub/-divider/-budget`
+- **Anvand:** Key-value list for metric-breakdowns, statistik-paneler, settings-summaries
+- **INTE:** List av actions (anvand `.list-row` eller `.setting-row`)
+- **Special:** `.kv-budget-header` + `.kv-budget-body` ar compound-blocks per regel 11 - lyftade fran Ekonoms LEGACY utan rename for att bibehalla template-kompabilitet.
+
+### offline (`offline.css`) - v3.9.0
+- **Blocks (compound):** `.offline-wrap`, `.offline-icon`, `.offline-title`, `.offline-text`
+- **Anvand:** Offline-page layout som SW visar vid natverksfel
+- **INTE:** Inline empty-state i listor (anvand `.empty-state` fran feedback.css)
+- **Special:** Alla 4 blocks anvands tillsammans i offline.html. Compound-block-monster per regel 11.
+
 ### sheet-content (`sheet-content.css`) - v3.5.1
 - **Blocks:** `.sheet` (kompletterar `.sheet` fran `overlay.css` med innehall-typografi och form-monster)
 - **Element:** `.sheet__title`, `.sheet__description`, `.sheet__form`, `.sheet__field`, `.sheet__field-label`, `.sheet__hint`, `.sheet__items`, `.sheet__item`, `.sheet__actions`, `.sheet__toggle`, `.sheet__subform`, `.sheet__save`, `.sheet__delete`, `.sheet__handle`, `.sheet__body`, `.sheet__divider` (kompletterande element)
@@ -339,4 +353,4 @@ Jubb, Ekonom, framtida appar foljer samma monster med sina egna tokens.
 - **`var(--gray-9)` i komponent-CSS.** Komponenter laser bara semantic.
 - **Egen .button-style.** Anvand `.btn` med modifier istallet.
 - **`font-weight: 700`.** Anvand `--fw-medium` (500). Display-siffror ar dokumenterat undantag.
-- **Anta att alla komponent-filer har ett root-block.** 17 av 35 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.
+- **Anta att alla komponent-filer har ett root-block.** 17 av 37 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.

package/references/03-quality-bar.md

@@ -212,7 +212,7 @@ Varje interaktiv komponent SKA ha:
 
 ## 11. En fil kan innehalla flera root-blocks
 
-I 17 av 35 komponent-filer i paketet definieras flera root-blocks i
+I 17 av 37 komponent-filer i paketet definieras flera root-blocks i
 samma fil (`form.css`, `nav.css`, `chip.css`, `swipe-stack.css`,
 `feedback.css`, `hub-card.css` m.fl.). Det ar en medveten konvention,
 inte ett undantag eller teknisk skuld.

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

@@ -9,8 +9,10 @@ base.html: <script src="/static/js/{bar-styles,hero-roll}.js"> bytt till
 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).
+**Jubb status (verifierat 2026-05-10):** Jubb har 0 app-egen kopior i
+`app/static/js/`-roten. Bara paket-syncade versioner i `app/static/js/ds/`
+finns (`bar-styles.js`, `hero-roll.js`). Hela MADR 0003 ar nu LOST -
+ingen drift kvar i nagon app.
 
 ## Context
 Bade Jubb och Ekonom har for tillfallet `bar-styles.js` och

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

@@ -1,8 +1,7 @@
 # 0004 - Halsomentorn legacy-CSS i Ekonom
 
 ## Status
-Closed - Halsomentorn arkiverat. `ds/halsomentorn.css` behalls i Ekonom
-tills Halsomentorn-projektet eventuellt ateruptas. Ingen action kravs.
+Closed. halsomentorn.css raderad ur Ekonom i Sprint D-1 (2026-05-09). Projektet är arkiverat.
 
 ## Context
 Ekonoms `app/static/css/ds/halsomentorn.css` ar 1783 rader CSS som

package/references/05-open-decisions/{0009-ekonom-css-legacy-cleanup.md → 0009-ekonom-css-legacy-cleanup-CLOSED.md}

@@ -1,7 +1,13 @@
 # 0009 - ekonom.css LEGACY-sektion cleanup
 
 ## Status
-Pending, medel prioritet.
+Closed 2026-05-10 i Sprint 5 via @klodd/ds 3.9.0. Fem klasser/family lyfta
+till paketet (`.topbar__logo` i nav.css, ny `kv-list.css` med BEM-element,
+ny `offline.css` med compound-blocks, `.auth-container--narrow`-modifier
+i auth.css, `.btn--positive`-variant i button.css). Fyra klasser stannar
+i Ekonoms `ekonom.css` LEGACY-sektion: `.btn-copy/.btn-bank`,
+`.bank-row-icon`, `.profile-panel-centered`, `.rule-arrow/.rule-cat` -
+alla Ekonom-specifika utan generisk paket-anvandning.
 
 ## Context
 

package/references/05-open-decisions/{0007-banner-body-migration.md → 0010-banner-body-migration-CLOSED.md}

@@ -1,7 +1,7 @@
-# 0007 - .banner-body migration i sync_result.html
+# 0010 - .banner-body migration i sync_result.html
 
 ## Status
-Pending, låg prioritet.
+Closed 2026-05-10 via mekanisk substitution. Ekonom-commit [5d5b273](https://github.com/drawn124578/ekonom/commit/5d5b273).
 
 ## Context
 

package/references/05-open-decisions/{0008-hbar-migration-ekonom.md → 0011-hbar-migration-ekonom-CLOSED.md}

@@ -1,7 +1,7 @@
-# 0008 - .hbar-* dash → BEM-migration i Ekonom
+# 0011 - .hbar-* dash → BEM-migration i Ekonom
 
 ## Status
-Pending, låg prioritet.
+Closed 2026-05-10 via mekanisk substitution + radering av dash-form-definitioner i ekonom.css CHARTS-sektion (37 rader). Ekonom-commit [5d5b273](https://github.com/drawn124578/ekonom/commit/5d5b273).
 
 ## Context
 

package/references/05-open-decisions/0012-maskable-icons.md

@@ -0,0 +1,19 @@
+# 0012 - Maskable PWA-ikoner
+
+## Status
+Pending.
+
+## Context
+Jubb och Ekonom har PWA-ikoner men saknar maskable-varianter med
+safe-zone-padding. Utan maskable-ikoner riskerar ikonen att klippas
+på Android-enheter med adaptiva ikoner.
+
+SVG-källfiler är klara. Bakgrundsfärg ska vara steg 3 av respektive
+apps accent-ramp (--accent-3: Blue-3 för Jubb, Plum-3 för Ekonom).
+
+## Återstår
+- PNG-export med safe-zone-padding (72px ikon i 108px canvas)
+- purpose="maskable" i web manifest för båda appar
+
+## Beroenden
+Kräver designer-export. Inte en CC-uppgift förrän PNG-filer levereras.

package/references/05-open-decisions/0013-jubb-kv-list-migration.md

@@ -0,0 +1,84 @@
+# 0013 - Jubb kv-list template-migration
+
+## Status
+Pending.
+
+## Context
+Sprint 5 (3.9.0, MADR 0009) lyfte kv-list till @klodd/ds som BEM-
+komponent (.kv-list, .kv-list__item, .kv-list__item--strong/-sub/
+-divider/-budget). Ekonom-templates migrerades samtidigt.
+
+Jubb fick inte motsvarande migration. Jubbs jubb.css behåller en
+flat-namnskonvention (.kv-row, .kv-key, .kv-value) som 5 templates
+beror på via 10 separata `<ul class="kv-list">`-instanser med ~40
+individuella .kv-row/.kv-key/.kv-value-träffar:
+- runs.html (2 listor)
+- job_detail.html (1 lista)
+- dashboard.html (1 lista)
+- insights.html (4 listor)
+- jobs_list.html (2 listor)
+
+## API-mismatch
+
+Templates använder:
+
+```html
+<ul class="kv-list">
+  <li class="kv-row">
+    <span class="kv-key">label</span>
+    <span class="kv-value">value</span>
+  </li>
+</ul>
+```
+
+Paketets API (kv-list.css 3.9.0):
+
+```html
+<ul class="kv-list">
+  <li class="kv-list__item">
+    label
+    value
+  </li>
+</ul>
+```
+
+Paketets .kv-list__item har display: flex + justify-content:
+space-between direkt på li-en. Två children placeras på vänster
+och höger utan wrapper-spans. Jubbs nuvarande .kv-value bidrar
+med color: var(--text-default), font-variant-numeric: tabular-nums
+och inline-flex med gap som behöver återskapas i ny layout (möjliga
+vägar: ny .kv-list__item--num-modifier i paketet, eller behåll en
+lättviktig .kv-value-utility i Jubb).
+
+## Återstår
+
+- HTML-migration i 5 templates: `<li class="kv-row">` blir
+  `<li class="kv-list__item">`
+- Bedömning per template: droppa .kv-key/.kv-value-spans, eller
+  behåll dem för tabular-nums/color
+- Visuell verifiering per vy efter migration (runs, job_detail,
+  dashboard, insights, jobs_list)
+- Tester: kontrollera om pytest-asserts refererar kv-row/-key/-value
+- Slutsteg: radera Jubbs lokala .kv-list, .kv-list li, .kv-row,
+  .kv-key, .kv-value ur jubb.css
+
+## Beroenden
+
+- Visuell verifiering per vy via Chrome MCP eller dev-server
+- Tester kan kräva uppdatering om kv-* selectors finns i pytest-asserts
+
+## Avvisade alternativ
+
+Option C (lyft .kv-row/.kv-key/.kv-value till paketet som alias för
+flat-konvention): avvisad per ADR 0009 (no-flat-components-css).
+Sprint 5 MADR 0009 etablerade att Ekonoms ursprungliga flat-namn
+ersätts med generaliserade BEM-namn (.kv-list__item) i paketet. Att
+åter-introducera flat-namn skulle åter-öppna ADR 0009 utan ny
+arkitektonisk motivering.
+
+## Sprint 6-leverabel
+
+Sprint 6 fas 4 raderar dead kv-delar (.kv-list li.kv-strong/-sub/
+-divider/-budget-row, .kv-budget-header, .kv-budget-body - 0
+template-träffar) men behåller .kv-list, .kv-list li, .kv-row,
+.kv-key, .kv-value tills denna MADR genomförs.