@klodd/ds 5.4.2 → 5.5.0

package/references/04-locked-decisions/0020-domain-to-package-lift.md

@@ -1,7 +1,7 @@
 # 0020 - Domain-to-package lift: alla Ekonom-specifika block lyfts
 
 ## Status
-Locked. Minor version-bump (4.4.0) - additive paket-utvidgning.
+Superseded by ADR 0024 (2026-05-20). Var ursprungligen Locked (minor version-bump 4.4.0, additiv paket-utvidgning).
 
 ## Context
 
@@ -196,7 +196,7 @@ Bagge appars `design.html` utokas med 14 nya sektioner:
 **Bra:**
 - Calle's princip uppfylld: "lyft eller drop". Paketet ar nu fullt
   designsystem - alla komponenter Ekonom anvander finns i paketet.
-- Future-appar kan anvanda alla 17 utan att fork:a Ekonom-domain.
+- Alla 17 komponenter ligger i paketet, ingen behover fork:a Ekonom-domain.
 - /design visar 100% av apparnas faktiska CSS-yta (efter utvidgning).
 - BEM-disciplin uppratthallen: alla nya block foljer block + element +
   modifier-struktur. Inga 3-niva-nesting (`__elem__sub`).

package/references/04-locked-decisions/0023-progress-list-utility.md

@@ -15,7 +15,7 @@ Tidigare bodde dessa som `.cat-bar-list` + `.cat-bar-row` i Ekonoms
 separata). Lyft till paketet för att:
 
 1. Eliminera Ekonom-domain-CSS som inte är domain-specifikt
-2. Ge framtida appar samma list-pattern utan kopiering
+2. Göra list-mönstret tillgängligt i paketet utan kopiering
 3. Tydliggöra att klassen wrappar `.progress` (inte är en alternativ
    bar-stil)
 

package/references/04-locked-decisions/0024-tightened-component-lift-doctrine.md

@@ -0,0 +1,135 @@
+# 0024 - Skärpt komponent-lyft-doktrin (supersedes 0020)
+
+## Status
+Locked (2026-05-20). Supersedes ADR 0020.
+
+## Context
+
+ADR 0020 (2026-05-14) lyfte 17 Ekonom-domän-block till paketet på
+principen "lyft eller drop, ingen mellanversion". 8 hamnade som egna
+filer i `css/components/`.
+
+Audit fas 6 + fas 11 (2026-05-20) verifierade: alla 8 hade exakt EN
+konsument (Ekonom). Jubb använde noll i produktion. Det var
+relokering, inte generalisering - Ekonoms domän-CSS flyttades in i
+det delade paketet och kallades "delat" trots en enda konsument.
+
+Rotfelet: ADR 0020 lyfte på kriteriet "kan delas" (komponenten är
+generisk nog att en annan app SKULLE kunna använda den) i stället
+för "delas" (en andra app använder den faktiskt). "Kan delas" är ett
+subjektivt omdöme som nästan vad som helst passerar.
+
+Dessutom introducerade lyftet en state-regression: `matched-row` och
+`expandable-row__header` tappade `:active`-press-feedback som
+originalen (`.sub-row`, `.cat-row__header`) hade via `base.css`
+press-feedback-selektorlista (fas 2d/7a). Ingen checklist fångade det.
+
+## Decision
+
+ADR 0024 supersedes ADR 0020:s lyft-kriterium. Tre regler:
+
+1. **Minst två dokumenterade konsumerande appar krävs innan lyft.**
+   @klodd/ds har exakt två konsumenter - Jubb och Ekonom (scope
+   fixerat, beslut #4, 2026-05-20). "Minst två konsumenter" betyder
+   därför i praktiken: BÅDA apparna använder komponenten, med en
+   namngiven verifierad plats (fil:rad) i var. Det betyder INTE
+   "vänta på en framtida tredje app" - det finns ingen tredje app och
+   ingen planeras. En komponent som bara en av de två apparna
+   använder hör hemma i den appens domän-CSS, inte i paketet. Ett
+   omdöp till generiskt namn skapar ingen andra konsument. Att
+   tillverka en konsument efteråt - få den andra appen att adoptera
+   komponenten enbart för att rättfärdiga lyftet - är YAGNI baklänges
+   och förbjudet.
+
+2. **State-täckning-checklist obligatorisk vid lyft.** Före lyft:
+   räkna upp original-komponentens interaktiva states (`:hover`,
+   `:active`, `:focus-visible`, `:disabled`). Efter lyft: verifiera
+   att paket-versionen reproducerar varenda en. Inga state-
+   regressioner. Press-feedback som låg implicit i app-`base.css`-
+   selektorlistor måste flyttas explicit till paket-komponenten.
+
+3. **Komponent-lyft-ADR-mallen ska innehålla kontrollpunkterna**
+   strukturerat (se Mall nedan), ifyllda, innan ADR:n kan låsas.
+
+## Mall för framtida komponent-lyft-ADR
+
+### Konsument-verifiering (regel 1)
+- Konsument 1: [app] [fil:rad]
+- Konsument 2: [app] [fil:rad]
+- (Bägge apparna - Jubb och Ekonom - krävs. Bara en: komponenten
+  stannar i den appens domän-CSS.)
+
+### State-täckning (regel 2)
+| State          | Original | Paket-version | Regression? |
+|----------------|----------|---------------|-------------|
+| :hover         |          |               |             |
+| :active        |          |               |             |
+| :focus-visible |          |               |             |
+| :disabled      |          |               |             |
+
+## Backfill - ADR 0020-lyften omprövade (beslut #3, 2026-05-20)
+
+Alla 8 single-consumer-komponenter från ADR 0020 flyttas tillbaka
+till Ekonom. Ingen behålls i paketet. Regel 1 tillämpas strikt på
+samtliga.
+
+Tillbaka till Ekonom:
+- Domän-compounds: `expandable-row`, `item-stack`, `matched-row`.
+  Kodar Ekonoms avstämnings-vokabulär; ett generiskt namn dolde det.
+- Tidigare klassade "paket-primitiv": `icon-circle`, `status-icon`,
+  `review-banner`. Generiska till formen, men 1 konsument.
+- Tidigare klassade "paket-utility": `kvp-arrow`, `kvp-target`,
+  `tag-inline`. För tunna för komponenter, men ändå 1 konsument.
+
+Implementations-spec: `audits/sprint-2-checklist.md` Del B. Paketets
+`css/components/` krymper 47 till 39 filer.
+
+När en andra app konkret behöver någon av dem: lyft enligt regel
+1 + 2 + 3. Verifierad konsument 1 + verifierad konsument 2 = lyft.
+Inte tidigare.
+
+## Why no grandfathering
+
+Ett tidigare utkast föreslog att behålla `icon-circle`/`status-icon`/
+`review-banner` i paketet med motiveringen "verifierat generiska,
+flyttkostnaden överstiger bärkostnaden". Det förkastades.
+
+Det är samma resonemang som ADR 0020 byggde på. ADR 0020 lyfte på
+"komponenten är generisk nog att kunna delas" - och auditen (fas 12
+slutsats #4, YAGNI) visade att just det resonemanget fyllde paketet
+med single-consumer-kod. Ett undantag inskrivet i den nya doktrinen
+dag ett återöppnar exakt den lucka doktrinen finns för att stänga.
+"Verifierat generisk" är inget objektivt kriterium - det är samma
+subjektiva omdöme som "kan delas", omformulerat.
+
+Regeln måste vara mekanisk för att hålla: två verifierade
+konsumenter, inga omdömen, inga undantag. En liten generisk primitiv
+som bara en app använder kostar nästan inget att låta bo i appens
+CSS tills den andra konsumenten finns. Den kostar betydligt mer att
+bära i paketet som prejudikat för nästa "den här kan ju delas"-lyft.
+
+## Konsekvenser
+
+Bra:
+- Paketet slutar samla single-consumer-domän-CSS. "Delad komponent"
+  betyder bevisat delad. `css/components/` krymper 47 till 39 filer.
+- State-regressioner som `:active`-tappet fångas mekaniskt av
+  checklistan.
+- Doktrinen har inga undantag - den kan inte urholkas av omdömen.
+
+Trade-off:
+- Ett genuint generiskt mönster som bara en app behöver idag måste
+  vänta i appens CSS tills den andra appen behöver det. Avsiktligt -
+  vänta-kostnaden är låg, junk-drawer-kostnaden är hög.
+
+ADR 0020:s anda ("lyft eller drop, ingen mellanversion") kvarstår,
+men "lyft" omdefinieras: lyft = bägge apparna är verifierade
+konsumenter; 1 konsument = drop (stanna i appen). Mellanversionen
+ADR 0020 i praktiken skapade (1-konsument-kod i paketet) är nu
+explicit förbjuden, utan undantag.
+
+## References
+- ADR 0020 (superseded av denna)
+- ADR 0013 (visual coherence / press-feedback-doktrin)
+- Fas 6 (component-coverage), fas 11b, fas 12 slutsats #4 (YAGNI)
+- Beslut #3 och #4 (2026-05-20)

package/references/04-locked-decisions/{0015-turbo-nav-script-init.md → 0025-turbo-nav-script-init.md}

@@ -1,10 +1,12 @@
-# 0009 - Per-page-JS-init under turbo-nav
+# 0025 - Per-page-JS-init under turbo-nav
 
 ## Status
 
 Locked. Upptäckt v192 (2026-05-19) under Chrome MCP-diagnos av
 brief-progress-flödet i Jubb.
 
+*Omnumrerad 2026-05-20: filnamnet sa 0015 (kollision med ADR 0015 panel-title-tag-doctrine) och H1 sa felaktigt 0009. Bägge korrigerade till 0025.*
+
 ## Context
 
 `turbo-nav.js` (paketet) implementerar same-document-navigation

package/references/04-locked-decisions/{0016-async-progress-fetch-fn.md → 0026-async-progress-fetch-fn.md}

@@ -1,9 +1,11 @@
-# 0016 - AsyncProgress fetchFn-option
+# 0026 - AsyncProgress fetchFn-option
 
 ## Status
 
 Locked (2026-05-19).
 
+*Omnumrerad 2026-05-20: filnamnet sa 0016 (kollision med ADR 0016 mina-sidor-doctrine), korrigerad till 0026.*
+
 ## Context
 
 `KloddDS.AsyncProgress` (introducerad 5.3.0) använder intern `fetch()`

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

@@ -58,7 +58,7 @@ domanen). Generaliserat namn `.list-row` finns redan i paketets
 `.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
+- Paketets `.list-row` blir tillganglig for Jubb
 **Cons:**
 - Driften mellan apparna fortsatter (Ekonom anvander `.tx-*`, Jubb
   hypotetiskt skulle anvanda `.list-row`)

package/references/05-open-decisions/0008-legacy-token-migration-CLOSED.md

@@ -18,7 +18,7 @@ Originaltexten bevarad nedan for historik.
 ---
 
 ## Original status (innan stangning)
-Pending. Trigger: innan tredje app borjar anvanda `@klodd/ds`.
+Pending. Trigger: nar paketet behover mogna bort sin legacy-skuld.
 
 ## Context
 `10-semantic.css` har en LEGACY ALIASES-sektion (rad 412-506) som
@@ -52,7 +52,7 @@ kostnad.
   appar.
 
 ## Decision
-Gor en fullstandig **lock-sprint** innan tredje app laggs till:
+Gor en fullstandig **lock-sprint** for att mogna paketet:
 
 1. Migrera ALLA call-sites till nya semantic token-namn
    (`--accent` -> `--accent-9` eller `--accent-text`, `--bg-base`
@@ -67,7 +67,7 @@ Gor en fullstandig **lock-sprint** innan tredje app laggs till:
 ## Consequences
 - **+** Slut pa dubbla mentala modeller. En standard.
 - **+** Spec stammer med implementationen.
-- **+** Tredje app:s onboarding gar mot ett moget system.
+- **+** Paketet gar mot ett moget system.
 - **+** `npx @klodd/ds verify` (3.4.0+) detekterar drift mekaniskt.
 - **-** Stor sprint - kraver dedikerad bandbredd (uppskattning: 2-3
   arbetsdagar plus visuell QA per app).
@@ -75,9 +75,9 @@ Gor en fullstandig **lock-sprint** innan tredje app laggs till:
   styleguide-jamforelse fore/efter pa bagge appar.
 
 ## Pending decision criteria
-- Tidpunkt: omedelbart innan tredje app (Margevo eller annan)
-  borjar anvanda paketet. Att vanta langre forharder skulden;
-  att hasta forskuggar appar som redan ar i prod.
+- Tidpunkt: nar bandbredd finns for att mogna paketet. Att vanta
+  langre forharder skulden; att hasta forskuggar appar som redan
+  ar i prod.
 - Vem kor sprinten: Calle ensam eller med assistent CC?
 - Om CC: ska den ha access till bagge app-repos under sprinten?
 

package/references/05-open-decisions/0014-ekonom-colored-row-migration-CLOSED.md

@@ -8,8 +8,7 @@ Option B: minimal cleanup.
 
 Ekonom uses .cat-list-row without border-left as a deliberate visual
 choice. border-left on categorized rows is unwanted in current apps.
-.colored-row remains in the package for future apps that may want
-the pattern.
+.colored-row remains in the package as an available pattern.
 
 Dead --row-accent bindings removed from ekonom-domain.css.
 

package/references/05-open-decisions/0017-async-progress-pipeline-gaps.md

@@ -129,7 +129,7 @@ produktion (Jubb v202+) - gaps är arkitektur-städ, inte funktionalitet.
   gaps
 - Jubb commit `d532e7e` - brief-progress migration (ett-shot-flöde som
   matchar AsyncProgress's default-design)
-- ADR 0016-async-progress-fetch-fn (`04-locked-decisions/`) - tidigare
+- ADR 0026-async-progress-fetch-fn (`04-locked-decisions/`) - tidigare
   AsyncProgress-utvidgning för demo/test-injection via fetchFn
 - `~/dev/klodd-ds/js/async-progress.js` - paket-implementation
 - `~/dev/Jubb/app/static/js/pipeline-progress.js` - wrapper med

package/references/05-open-decisions/0018-build-ds-prune.md

@@ -0,0 +1,35 @@
+# 0018 - build:ds prune-gap
+
+## Status
+
+Pending.
+
+## Context
+
+build:ds (`npx @klodd/ds sync`) kopierar paketets filer till
+`app/static/css/ds/` och `app/static/js/ds/` men tar inte bort filer
+som raderats ur paketet. Upptäckt vid 5.4.2-cleanup: `hbar.css` +
+`split-bar.css` låg kvar i båda appar efter build:ds och krävde
+manuell borttagning.
+
+## Decision needed
+
+Lägg till `--prune`-flagga i sync-kommandot som tar bort filer i
+målmappen som inte längre finns i paketet.
+
+## Considered options
+
+### A. Implementera --prune i sync-skriptet
+Rensar automatiskt vid varje build:ds.
+
+### B. Dokumentera manuellt städ-steg i SKILL.md
+"efter paket-publish: verifiera att raderade komponenter tas bort ur
+app build-output".
+
+### C. Behåll nuvarande beteende
+Risk för stale filer vid varje komponent-radering.
+
+## Pending decision criteria
+
+Aktiveras nästa gång en komponent raderas ur paketet. Option B är
+interim-lösning tills A implementeras.

package/references/DESIGN-LANGUAGE.md

@@ -1,6 +1,6 @@
 # Klodd Design Language
 
-Konkreta regler för **visuell koherens** över Klodd-ekosystemet. Token-
+Konkreta regler för **visuell koherens** över @klodd/ds (Jubb och Ekonom). Token-
 arkitekturen (`01-tokens.md`) och komponent-API (`02-components.md`)
 specificerar **vad** som finns; denna fil specificerar **hur** komponenter
 ska användas tillsammans för homogen design-uttryck.

package/css/components/expandable-row.css

@@ -1,176 +0,0 @@
-/* ================================================================
-   components/expandable-row.css
-   Klickbar collapsible-summary-rad. Header visar label + total-amount
-   + chevron. Body visas nar expanderad (via JS data-expanded + CSS
-   :has-style eller class-toggling).
-
-   Anvands for kategori-rollups (Mat 1234 kr expanderar till listing
-   av transaktioner), sektion-totaler, drill-down-aggregat.
-
-   Lyft fran Ekonom v4.4.0 (var .cat-row + .cat-list-row, ADR 0020).
-
-   Blocks:
-     .expandable-row  - block med header + collapsible body
-     .expandable-list - <ul>-wrapper for flera expandable-rows
-     .expandable-row__item - BEM-element: nested item inom expanderad
-                              body (anvands utan att vara child av
-                              .expandable-row i CSS, lever via JS-
-                              expansion)
-
-   Element:
-     .expandable-row__header    - klickbar header-rad
-     .expandable-row__label     - vansterstalld text
-     .expandable-row__amount    - hoger-stalld tabular-amount
-     .expandable-row__chev      - chevron-svg, roterar 180deg vid expanded
-     .expandable-row__total     - footer-rad med summa nar body expanderad
-
-   Item-element:
-     .expandable-row__item-list   - <ul>-wrapper for items inom body
-     .expandable-row__item-body   - container for item-rad
-     .expandable-row__item-desc   - description-text (ellipsis-truncerad)
-     .expandable-row__item-date   - micro-date-text
-     .expandable-row__item-amount - tabular-amount
-
-   Item-modifiers:
-     .expandable-row__item--excluded   - strikethrough + muted
-     .expandable-row__item--pending    - subtle-color amount
-     .expandable-row__item--clickable  - hover/focus-feedback
-     .expandable-row__item--credit     - positive-fargad amount
-   ================================================================ */
-
-.expandable-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.expandable-row {
-  border-top: var(--border-hairline-subtle);
-}
-
-.expandable-row:first-child {
-  border-top: 0;
-}
-
-.expandable-row__header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-10);
-  padding: var(--space-10) 0;
-  cursor: pointer;
-  font-size: var(--fs-14);
-  color: var(--text-default);
-}
-
-.expandable-row__header:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: -2px;
-  border-radius: var(--radius-4);
-}
-
-.expandable-row[data-expanded] .expandable-row__chev {
-  transform: rotate(180deg);
-}
-
-.expandable-row__label  { flex: 1; min-width: 0; }
-.expandable-row__amount { font-variant-numeric: tabular-nums; color: var(--text-default); }
-
-.expandable-row__chev {
-  color: var(--text-muted);
-  transition: var(--tr-transform-medium);
-  flex-shrink: 0;
-}
-
-.expandable-row__total {
-  display: flex;
-  gap: var(--space-10);
-  padding: var(--space-12) 0 var(--space-4);
-  font-weight: var(--fw-medium);
-  border-top: var(--border-hairline-default);
-}
-
-.expandable-row__total .expandable-row__amount { font-weight: var(--fw-medium); }
-
-
-/* ================================================================
-   ==== ITEMS (inom expanderad body)
-   ================================================================ */
-
-.expandable-row__item-list {
-  list-style: none;
-  padding: var(--space-4) 0 var(--space-12) var(--space-12);
-  margin: 0;
-  border-left: var(--bw-medium) solid var(--border-subtle);
-}
-
-.expandable-row__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-10);
-  padding: var(--space-6) 0;
-  font-size: var(--fs-13);
-}
-
-.expandable-row__item-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.expandable-row__item-desc {
-  color: var(--text-subtle);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.expandable-row__item-date {
-  font-size: var(--fs-11);
-  color: var(--text-muted);
-}
-
-.expandable-row__item-amount {
-  color: var(--text-subtle);
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-
-
-/* ================================================================
-   ==== ITEM MODIFIERS
-   ================================================================ */
-
-.expandable-row__item--clickable {
-  cursor: pointer;
-  transition: var(--tr-bg-fast);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .expandable-row__item--clickable:hover { background: var(--surface-subtle); }
-}
-
-.expandable-row__item--clickable:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: -2px;
-  border-radius: var(--radius-4);
-}
-
-.expandable-row__item--excluded .expandable-row__item-desc,
-.expandable-row__item--excluded .expandable-row__item-amount {
-  color: var(--text-muted);
-}
-
-.expandable-row__item--excluded .expandable-row__item-amount {
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
-
-.expandable-row__item--pending .expandable-row__item-amount {
-  color: var(--text-subtle);
-}
-
-.expandable-row__item--credit .expandable-row__item-amount {
-  color: var(--positive);
-}

package/css/components/icon-circle.css

@@ -1,46 +0,0 @@
-/* ================================================================
-   components/icon-circle.css
-   Rund icon-container med tonad bakgrund. Anvands for status-
-   indikatorer i list-rader (bank-koppling kompletterad, level-up
-   uppnatt, notis-dot etc).
-
-   Storlek 28x28 default - tatare an .avatar (36x36) for in-line
-   placement bredvid text-rader.
-
-   Lyft fran Ekonom v4.4.0 (var .bank-row-icon, ADR 0020).
-
-   Blocks:
-     .icon-circle  - 28x28 round icon-container
-
-   Modifiers:
-     .icon-circle--positive  - gron tonad bg + gron icon-color (check etc)
-     .icon-circle--warning   - warning-tonad bg + warning-color
-     .icon-circle--negative  - danger-tonad bg + danger-color
-   ================================================================ */
-.icon-circle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--space-28);
-  height: var(--space-28);
-  margin-right: var(--space-12);
-  border-radius: 50%;
-  flex-shrink: 0;
-  background: var(--surface-default);
-  color: var(--text-subtle);
-}
-
-.icon-circle--positive {
-  background: var(--positive-dim);
-  color: var(--positive);
-}
-
-.icon-circle--warning {
-  background: var(--warning-dim);
-  color: var(--warning);
-}
-
-.icon-circle--negative {
-  background: var(--negative-dim, var(--bg-danger));
-  color: var(--negative, var(--accent-danger));
-}

package/css/components/item-stack.css

@@ -1,43 +0,0 @@
-/* ================================================================
-   components/item-stack.css
-   Grupp av identiska items som collapsible-staplade en presentation.
-   Header visar "X st" + summa, body expanderar till N individuella rader.
-
-   Typisk anvandning: identiska transaktioner (samma description, samma
-   merchant) som grupperas under en wrapper med expand-toggle - sa user
-   ser inte "Netflix 139 kr" sex ganger utan en stack "Netflix (6 st)"
-   som kan expanderas.
-
-   Lyft fran Ekonom v4.4.0 (var .cat-tx-stack, ADR 0020).
-
-   Blocks:
-     .item-stack  - block med collapsible header + body
-
-   Element:
-     .item-stack__icon    - file-stack-ikon till vanster (accent nar
-                            expanded, muted default)
-     .item-stack__header  - klickbar header-rad ("Netflix (6 st)" + summa)
-     .item-stack__body    - <ul> med individuella items
-   ================================================================ */
-.item-stack {
-  list-style: none;
-}
-
-.item-stack__icon {
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.item-stack__header {
-  cursor: pointer;
-}
-
-.item-stack[data-expanded] .item-stack__icon {
-  color: var(--accent-9);
-}
-
-.item-stack__body {
-  list-style: none;
-  margin: 0;
-  padding: 0 0 0 var(--space-22);
-}

package/css/components/kvp-arrow.css

@@ -1,22 +0,0 @@
-/* ================================================================
-   components/kvp-arrow.css
-   Key-value-pair-arrow + target. Visualiserar mapping fran ett
-   keyword/key till en kategori/target. Typisk anvandning: rule-
-   editors dar man visar "ICA -> Mat" eller "STANDARD -> Premium".
-
-   Lyft fran Ekonom v4.4.0 (var .rule-arrow + .rule-cat, ADR 0020).
-
-   Blocks:
-     .kvp-arrow   - disabled-fargad arrow-text ("->")
-     .kvp-target  - accent-fargad target-text (vad keyword:et mappar till)
-   ================================================================ */
-.kvp-arrow {
-  color: var(--text-disabled);
-  margin: 0 var(--space-4);
-  font-weight: var(--fw-regular);
-}
-
-.kvp-target {
-  color: var(--accent-9);
-  font-weight: var(--fw-medium);
-}

package/css/components/matched-row.css

@@ -1,51 +0,0 @@
-/* ================================================================
-   components/matched-row.css
-   Rad-pattern for items som har match/pending-status. Klickbar rad
-   med status-icon till vanster. State-modifiers styr visual feedback.
-
-   Typisk anvandning: lista av forvantade items dar varje rad far
-   visual indicator om den matchats mot en faktisk handelse
-   (subscription-placeholders matchade mot bank-tx, kalender-events
-   matchade mot kalkyl etc).
-
-   Lyft fran Ekonom v4.4.0 (var .sub-row, ADR 0020). Lever ofta inom
-   .expandable-row__item men kan vara standalone.
-
-   Blocks:
-     .matched-row  - klickbar rad med match-status
-
-   Element:
-     .matched-row__status-icon  - 18px width-slot for SVG-icon till vanster
-
-   Modifiers:
-     .matched-row--matched  - positive-state (gron icon, default-text)
-     .matched-row--pending  - awaiting-state (gra icon, italic, 72% opacity)
-   ================================================================ */
-.matched-row {
-  cursor: pointer;
-  transition: var(--tr-bg-fast);
-  padding-left: var(--space-4);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .matched-row:hover { background: var(--surface-subtle); }
-}
-
-.matched-row:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: -2px;
-  border-radius: var(--radius-4);
-}
-
-.matched-row__status-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.matched-row--matched .matched-row__status-icon { color: var(--positive); }
-.matched-row--pending                            { opacity: 0.72; }
-.matched-row--pending .matched-row__status-icon { color: var(--text-muted); }