@klodd/ds 4.5.1 → 5.0.0

package/css/components/progress.css

@@ -1,27 +1,55 @@
 /* ================================================================
    components/progress.css
-   Linjär progress-indikator. Status-modifiers for fargning.
+   THE bar-komponent (v5.0.0, ADR 0022). Linjär progress-indikator
+   med status-modifiers + token-binding för app-specifika kategori-färger.
+
+   Konsoliderad i v5.0.0 efter Calle's beslut: "Kor en version som har
+   en style. Eventuellt kan vi bygga pa den och gora varianter av den.
+   Men alla andra kan bytas mot den, eller tas bort och bara visa
+   siffra eller inget alls." Tidigare 6 bar-komponenter (hbar, split-
+   bar, column-bar, dual-bar, colored-bar, progress) raderade utom
+   progress. Apparna migrerade till denna OR till sifferdisplay
+   (kv-list / inline-text).
 
    Blocks:
-     .progress  - track (wrapper)
+     .progress  - track (wrapper, fyll-bar background)
 
    Element:
      .progress__bar  - fyllning (alltid DOM-child av .progress)
 
-   Modifiers:
-     .progress__bar  --success/-warning/-danger
+   Modifiers (status-färg på __bar):
+     .progress__bar--success
+     .progress__bar--warning
+     .progress__bar--danger
+
+   Storlek-modifiers på .progress (track-thickness):
+     .progress--thin     - 4px (mindre, för tighta layout-kontexter)
+     (default)           - 6px (standard)
+     .progress--thick    - 12px (större, för fokuserade visualiseringar)
+
+   Token-binding för app-specifika kategori-färger:
+     <div class="progress">
+       <div class="progress__bar cat-mat" data-bar-width="73%"></div>
+     </div>
+   .cat-mat sätter --bar-accent (definierad i app-domain-CSS).
+   .progress__bar prefererar --bar-accent över default --bar-fill-color.
+
+   Multi-instance composition (var split-bar):
+   För segment/staplad användning, lägg flera .progress side-by-side
+   inom flex-container ELLER använd inline siffror i kv-list.
+
+   Vertikal användning (var column-bar):
+   För historik-jämförelse, använd kv-list med tabular-nums för
+   numerisk presentation. Ingen vertikal-modifier - data är tydligare
+   som siffror för historik (Calle 2026-05-14).
 
    Bredd via CSP-safe pattern (bar-styles.js applicerar style.width
-   fran data-bar-width vid runtime):
+   från data-bar-width vid runtime):
      <div class="progress">
        <div class="progress__bar progress__bar--warning"
             data-bar-width="73%"></div>
      </div>
 
-   Sprint 4 (3.8.0): .progress-bar omdopt till BEM-element .progress__bar
-   per kvalitetsbar regel 1 (BEM-konvention). 0 produktions-templates
-   paverkades - .progress-bar fanns bara i design-showcase.
-
    Respekterar prefers-reduced-motion (transition tas bort).
    ================================================================ */
 .progress {
@@ -35,16 +63,21 @@
   overflow: hidden;
 }
 
+.progress--thin  { height: var(--space-4); }
+.progress--thick { height: 12px; }
+
 .progress__bar {
   height: 100%;
-  background: var(--bar-fill-color);
+  /* v5.0.0 (ADR 0022): --bar-accent-binding for app-domain-kategorier.
+     Default --bar-fill-color (=--accent-9) om bindning saknas. App-
+     domain CSS satter --bar-accent via wrapper-klass (.cat-mat etc). */
+  background: var(--bar-accent, var(--bar-fill-color));
   border-radius: var(--bar-fill-radius);
-  transition: width var(--dur-base) var(--ease-out);
+  transition: var(--bar-fill-transition);
 }
 
 /* Progress-specifika status-modifiers behaller --bg-X (solid status-bg-
-   tema istallet for --positive/--warning/--negative som ar text-color-
-   varianter). Medvetet annorlunda fran hbar/split-bar/dual-bar. */
+   tema). Override:ar --bar-accent-binding nar applicerad. */
 .progress__bar--success { background: var(--bg-success); }
 .progress__bar--warning { background: var(--bg-warning); }
 .progress__bar--danger  { background: var(--bg-danger); }

package/css/index.css

@@ -47,8 +47,10 @@
 @import './components/form.css';
 @import './components/setting-row.css';
 @import './components/collapsible.css';
-@import './components/hbar.css';
-@import './components/split-bar.css';
+/* hbar.css + split-bar.css RADERADE v5.0.0 (ADR 0022) - .progress
+   med composition-pattern (label utanfor + .progress) ersatter hbar.
+   split-bar ersatt av kv-list (siffror) eller flera .progress
+   side-by-side. */
 @import './components/hero.css';
 @import './components/chip.css';
 @import './components/avatar.css';
@@ -64,7 +66,8 @@
 
 /* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
 @import './components/colored-row.css';
-@import './components/colored-bar.css';
+/* colored-bar.css RADERAD v5.0.0 (ADR 0022) - .progress aterkonsolidering
+   ovanfor inkorporerar --bar-accent-binding. */
 
 /* v3.5.1 - sheet-content (sprint-65 form-monster, generiska BEM-namn) */
 @import './components/sheet-content.css';
@@ -82,5 +85,7 @@
 @import './components/icon-circle.css';
 @import './components/expandable-row.css';
 @import './components/item-stack.css';
-@import './components/column-bar.css';
-@import './components/dual-bar.css';
+/* column-bar.css + dual-bar.css RADERADE v5.0.0 (ADR 0022) -
+   amorterings-historik visas som kv-list (siffror) istallet for
+   vertikala staplar; equity-split visas som tva .progress med
+   label-row ovan istallet for dual-bar. */

package/package.json

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

package/references/04-locked-decisions/0022-progress-the-bar-component.md

@@ -0,0 +1,147 @@
+# 0022 - Progress = THE bar-komponent (radikal konsolidering)
+
+## Status
+Locked. MAJOR version-bump (5.0.0) - breaking change.
+
+## Context
+
+Audit 2026-05-14 (sen kvall, fas 4) inventerade 6 bar-komponenter:
+progress, hbar, split-bar, column-bar, dual-bar, colored-bar. Alla
+loste samma grundproblem (fyll-bar med procent) men med olika
+template-strukturer for olika label-positioner och data-modeller.
+
+ADR 0021 (v4.5.0) konsoliderade tokens. Men 6 komponent-namespaces
+kvarstod. Calle's reaktion 2026-05-14: "Jag tycker att manga bars
+ar riktigt markliga om jag ska vara arlig. Kor en version som har
+en style och kan vara 14 progress kanner jag. Eventuellt kan vi bygga
+pa den och gora varianter av den. Men alla andra kan bytas mot den,
+eller tas bort och bara visa siffra eller inget alls."
+
+Klar riktning: konsolidera radikalt. Behall .progress, eliminera
+de andra 5.
+
+## Decision
+
+**.progress ar THE bar-komponent.** Alla andra raderas. Templates
+migreras till .progress + composition-pattern eller siffror i kv-list.
+
+### Komponent-stat efter
+
+**Behalls:**
+- `.progress` + `.progress__bar` (track + fill)
+- Status-modifiers: `.progress__bar--success/--warning/--danger`
+- **Nya storlek-modifiers:** `.progress--thin` (4px), default (6px),
+  `.progress--thick` (12px)
+- **Ny token-binding:** `.progress__bar` lasr `--bar-accent` for
+  app-domain-kategori-farger (pattern fran ADR 0020)
+
+**Raderas:**
+- `.hbar` + element + modifiers
+- `.split-bar` + element + modifiers
+- `.column-bar` + `.column-bar-list` + element
+- `.dual-bar` + element + modifiers
+- `.colored-bar` + storlek/vertical-modifiers
+
+### Migration-mapping per anvandning
+
+| Tidigare | Ny implementation | Anvand i |
+|---|---|---|
+| `.hbar` (kategori-utfall med label-rad) | `<div class="cat-bar-row">label + amount</div>` + `.progress` (composition) | kategorier.html, privat.html |
+| `.split-bar` (multi-segment) | `<ul class="kv-list">` med siffror per segment | bolan.html (cost-segments), installningar/var_bostad.html (equity vs debt) |
+| `.split-bar` (2-andelar) | `.progress` med 1 fill (visar primary-andel) | installningar/vart_hushall.html (split-pct) |
+| `.column-bar` (vertikal historik) | `<ul class="kv-list">` med siffror per period | bolan.html (amorterings-historik) |
+| `.dual-bar` (2 vardes med pct) | 2x `.progress` med label-row ovan vardera (composition) | bolan.html (amort vs apprec) |
+| `.colored-bar` (standalone) | `.progress` med .cat-X-binding | aldrig anvant i prod |
+
+Generaliserat composition-pattern for label-context:
+
+```html
+<!-- ny "rich progress"-pattern (ersatter hbar) -->
+<div>
+  <div class="cat-bar-row">
+    <span>{label}</span>
+    <span class="text-num ml-auto">{amount}</span>
+  </div>
+  <div class="progress">
+    <div class="progress__bar cat-mat" data-bar-width="{pct}%"></div>
+  </div>
+</div>
+```
+
+`.cat-bar-row` ar Ekonom-domain-utility i `ds/ekonom.css` (flex-row
+med gap + align-items center). Andra appar definierar egen
+label-row-pattern.
+
+### Numerisk presentation som default
+
+Per Calle: "kan tas bort och bara visa siffra eller inget alls" -
+visualisera siffror inte alltid bar. `.kv-list` (key-value-list)
+ar default for tabular data. Bar BARA nar visuell jamforelse ger
+mervarde (single-fill-progress, kategori-stack).
+
+## Konsekvenser
+
+**Bra:**
+- 6 -> 1 bar-komponent. Mental modell ar enkel: "vill du ha en bar?
+  anvand .progress".
+- Nya komponenter (--thin/--thick/--bar-accent) ger flexibilitet
+  utan ny namespace.
+- Templates blir tydligare (composition-pattern syns explicit).
+- Paket-CSS minskar med ~200 rader (5 filer raderade).
+
+**Trade-offs:**
+- BREAKING MAJOR-bump 5.0.0. Alla appar maste migrera templates
+  parallellt med paket-bump.
+- Multi-segment split-bar forsvinner som visuell pattern - bolan-
+  cost-segments visas nu som siffror (kv-list). Acceptabelt per
+  Calle's "siffror eller inget".
+- Vertikal column-bar forsvinner som visuell pattern - amorterings-
+  historik visas nu som siffror (kv-list). Acceptabelt.
+- dual-bar's "meta vid sidan"-layout forsvinner. Equity-split visas
+  nu som tva separata progress med label-row ovan. Tar mer vertikal
+  yta men ar tydligare.
+
+## Migration genomford 2026-05-14
+
+**Klodd-ds v4.5.1 -> v5.0.0:**
+- `progress.css` utokad: storlek-modifiers (--thin/--thick) +
+  `--bar-accent`-binding pa `__bar`
+- 5 komponentfiler RADERADE: `hbar.css`, `split-bar.css`,
+  `column-bar.css`, `dual-bar.css`, `colored-bar.css`
+- `index.css` uppdaterad
+
+**Ekonom-templates migrerade (5 filer):**
+- kategorier.html: hbar-loop -> cat-bar-row + progress
+- privat.html: hbar-loop -> cat-bar-row + progress
+- bolan.html: dual-bar -> 2x progress + label-row; split-bar -> kv-list;
+  column-bar (history) -> kv-list
+- installningar/vart_hushall.html: split-bar -> progress (single fill)
+- installningar/var_bostad.html: split-bar -> progress (--success)
+
+**Ekonoms ds/ekonom.css:**
+- `.cat-bar-list > .hbar` rule -> `> li`
+- `.cat-bar-row` block tillagt (label-row composition-utility)
+
+**Ekonoms /design:**
+- Sektioner 22 (colored-bar), 25 (hbar), 32 (split-bar), 46 (column-bar),
+  47 (dual-bar) RADERADE inklusive nav-rader
+- Sektion 14 (Progress) UTOKAD med --thin/--thick/--bar-accent +
+  composition-pattern-demo
+- Sektioner 55 + 57 (Local-wrappers, Cat-bindings) uppdaterade att
+  visa progress istallet for hbar
+
+**Jubbs /design:**
+- Samma 5 sektioner + nav-rader RADERADE (Jubb anvande inte de 5
+  i prod-templates - bara /design-styleguide)
+
+## References
+
+- ADR 0017 (padding-skala-extended)
+- ADR 0018 (outline-offset-list-rows)
+- ADR 0019 (hero-amount-bem-canonical)
+- ADR 0020 (domain-to-package-lift) - tidigare lift av Ekonom-domain
+- ADR 0021 (bar-shared-tokens) - Steg 1 token-konsolidering
+- Calle's beslut 2026-05-14 (sen kvall): "Kor en version som har en
+  style. Eventuellt kan vi bygga pa den och gora varianter av den.
+  Men alla andra kan bytas mot den, eller tas bort och bara visa
+  siffra eller inget alls."

package/css/components/colored-bar.css

@@ -1,46 +0,0 @@
-/* ================================================================
-   components/colored-bar.css
-   Generic horisontell stapel med accentfarg.
-
-   Anvand for: budget-staplar, kategori-staplar, progress med
-   semantisk farg
-   Inte for: generisk progress utan kategori (anvand progress.css)
-
-   Mont: app satter --bar-accent pa elementet eller via en
-   wrapper-klass i app-domain-CSS:
-
-     .my-category { --bar-accent: var(--my-token); }
-
-     <div class="hbar__track">
-       <div class="colored-bar my-category"></div>
-     </div>
-
-   Kombineras med .hbar__track for container-struktur. Paketet vet
-   ingenting om kategorier - appen agar datan + bindningen.
-   Se references/02-components.md "Kategori-monstret".
-   ================================================================ */
-.colored-bar {
-  /* v4.5.0 (ADR 0021): konsumerar shared --bar-fill-color istallet for
-     direkt --accent-9. --bar-accent-binding bevaras for app-domain-tokens. */
-  background: var(--bar-accent, var(--bar-fill-color));
-  height: 100%;
-  border-radius: var(--bar-fill-radius);
-  transition: width var(--dur-base) var(--ease-out);
-}
-
-/* Storlekar */
-.colored-bar--sm { height: var(--space-6); }
-.colored-bar--md { height: var(--space-8); }
-.colored-bar--lg { height: var(--space-12); }
-
-/* Vertikal variant - used i charts/dashboards */
-.colored-bar--vertical {
-  width: 100%;
-  height: var(--bar-accent-height, 100%);
-  border-radius: var(--radius-full);
-  transition: height var(--dur-base) var(--ease-out);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .colored-bar { transition: none; }
-}

package/css/components/column-bar.css

@@ -1,78 +0,0 @@
-/* ================================================================
-   components/column-bar.css
-   Vertikal historik-stapel - en per period (manad, vecka). Visar
-   tabular-value over baren + label under. Hojd baseras pa fill-
-   percent (data-bar-height).
-
-   Komplement till .hbar (horisontell). .hbar lampar single-bar med
-   label+value-rad bredvid; .column-bar staplar manader-kolumner i
-   en rad sa user kan jamfora over tid.
-
-   Lyft fran Ekonom v4.4.0 (var .amort-bar, ADR 0020).
-
-   Blocks:
-     .column-bar-list  - flex-wrapper for flera column-bars (height 160px)
-     .column-bar       - en kolumn (flex: 1)
-
-   Element:
-     .column-bar__value  - tabular-amount over baren
-     .column-bar__track  - track-container (full kolumn-height)
-     .column-bar__fill   - faktisk faded fill (positive-color default)
-     .column-bar__label  - micro-label under baren
-   ================================================================ */
-.column-bar-list {
-  display: flex;
-  gap: var(--space-10);
-  align-items: flex-end;
-  height: 160px;
-  padding: var(--space-16) 0 0;
-}
-
-.column-bar {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-6);
-  height: 100%;
-  justify-content: flex-end;
-}
-
-.column-bar__value {
-  font-size: var(--fs-11);
-  font-weight: var(--fw-medium);
-  color: var(--text-subtle);
-  font-variant-numeric: tabular-nums;
-}
-
-.column-bar__track {
-  /* v4.5.0 (ADR 0021): per-komponent override av --bar-track-color
-     (sunken vs default-active) och --bar-track-radius (4px vs full) -
-     vertikal stapel skulle bli oval med radius-full. */
-  --bar-track-color: var(--surface-sunken);
-  --bar-track-radius: var(--radius-4);
-  width: 100%;
-  flex: 1;
-  background: var(--bar-track-color);
-  border-radius: var(--bar-track-radius);
-  overflow: hidden;
-  display: flex;
-  align-items: flex-end;
-  min-height: 0;
-}
-
-.column-bar__fill {
-  width: 100%;
-  background: var(--bar-fill-color-positive);
-  border-radius: var(--radius-4);
-  transition: var(--tr-height-slower);
-}
-
-.column-bar__label {
-  font-size: var(--fs-11);
-  color: var(--text-muted);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .column-bar__fill { transition: none; }
-}

package/css/components/dual-bar.css

@@ -1,64 +0,0 @@
-/* ================================================================
-   components/dual-bar.css
-   Horisontell stapel med tva separata fills - en for varje delvarde
-   (t.ex. amortering vs varde-okning). Skiljer sig fran .split-bar
-   som ar ETT span med segment; .dual-bar har separata rows fr varje
-   varde med egen meta-text.
-
-   Typisk anvandning: bolane-formogenhet (amorterat belopp vs
-   marknadsvarde-uppskattning), portfolio-fordelning, sparmal-progress.
-
-   Lyft fran Ekonom v4.4.0 (var .equity-bar-row + .equity-amort/
-   .equity-apprec, ADR 0020).
-
-   Blocks:
-     .dual-bar  - rad med track + fill + meta-text
-
-   Element:
-     .dual-bar__track  - track-container (height 12px)
-     .dual-bar__fill   - faktisk fill (positive default)
-     .dual-bar__meta   - hoger-stalld meta-text
-
-   Modifiers:
-     .dual-bar__fill--amort   - positive-color (amortering)
-     .dual-bar__fill--apprec  - accent-color (uppskattning)
-   ================================================================ */
-.dual-bar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-12);
-  margin-bottom: var(--space-10);
-}
-
-.dual-bar__track {
-  /* v4.5.0 (ADR 0021): per-komponent override av --bar-track-color
-     (sunken vs default-active). */
-  --bar-track-color: var(--surface-sunken);
-  flex: 1;
-  height: 12px;
-  background: var(--bar-track-color);
-  border-radius: var(--bar-track-radius);
-  overflow: hidden;
-}
-
-.dual-bar__fill {
-  height: 100%;
-  border-radius: var(--bar-fill-radius);
-  background: var(--bar-fill-color-positive);
-  transition: var(--tr-width-slower);
-}
-
-.dual-bar__fill--amort  { background: var(--bar-fill-color-positive); }
-.dual-bar__fill--apprec { background: var(--bar-fill-color); }
-
-.dual-bar__meta {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  min-width: 5.5rem;
-  line-height: var(--lh-relaxed);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dual-bar__fill { transition: none; }
-}

package/css/components/hbar.css

@@ -1,69 +0,0 @@
-/* ================================================================
-   components/hbar.css
-   Horisontell bar - generic single-bar med label + value + track + fill.
-   Anvands for kategori-utfall, score-distribution, kostnadsfordelningar.
-
-   .hbar ar bas. .hbar__track ar fyllbar bakgrund. .hbar__fill ar
-   det procent-fyllda overlayet. .hbar__label och .hbar__value ar
-   text-element under/over baren.
-
-   Bredd pa .hbar__fill satts via data-bar-width + bar-styles.js
-   (CSP-safe). Manuell override-class kan ocksa anvandas (.hbar__fill-50).
-   ================================================================ */
-.hbar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-  margin-bottom: var(--space-12);
-}
-
-.hbar__item {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--space-10);
-}
-
-.hbar__label {
-  font-size: var(--fs-13);
-  color: var(--text-subtle);
-  flex: 1;
-  min-width: 0;
-}
-
-.hbar__value {
-  font-size: var(--fs-13);
-  font-weight: var(--fw-medium);
-  color: var(--text-default);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.hbar__track {
-  width: 100%;
-  height: var(--space-6);
-  background: var(--bar-track-color);
-  border-radius: var(--bar-track-radius);
-  overflow: hidden;
-}
-
-.hbar__fill {
-  height: 100%;
-  /* v4.4.0 (ADR 0020): --bar-accent-binding for app-domain-kategorier.
-     Default --bar-fill-color (=--accent-9) om bindning saknas. App-domain
-     CSS satter --bar-accent via wrapper-klass: <div class="hbar__fill cat-mat">.
-     v4.5.0 (ADR 0021): konsumerar shared --bar-fill-color istallet for
-     direkt --accent-9. */
-  background: var(--bar-accent, var(--bar-fill-color));
-  border-radius: var(--bar-fill-radius);
-  transition: var(--bar-fill-transition);
-}
-
-.hbar__fill--positive { background: var(--bar-fill-color-positive); }
-.hbar__fill--warning  { background: var(--bar-fill-color-warning); }
-.hbar__fill--negative { background: var(--bar-fill-color-negative); }
-
-@media (prefers-reduced-motion: reduce) {
-  .hbar__fill { transition: none; }
-}

package/css/components/split-bar.css

@@ -1,55 +0,0 @@
-/* ================================================================
-   components/split-bar.css
-   Visuell proportionsbar dar tva eller flera segment delar baren.
-   Anvands for cost-split (vem betalar), debt-vs-equity, time-allocation.
-
-   Modell: .split-bar har N stycken .split-bar__segment som tillsammans
-   fyller 100%. Brett valbart segment satts genom data-bar-width-pattern
-   eller manuella width-classes.
-   ================================================================ */
-.split-bar {
-  display: flex;
-  height: 8px;
-  border-radius: var(--bar-track-radius);
-  overflow: hidden;
-  background: var(--bar-track-color);
-  margin: var(--space-8) 0 var(--space-12);
-}
-
-.split-bar__segment {
-  height: 100%;
-  transition: var(--bar-fill-transition);
-}
-
-/* v4.5.0 (ADR 0021): segments konsumerar shared --bar-fill-color-X.
-   --secondary anvander --text-disabled (gray-out-look, inte stadard-color). */
-.split-bar__segment--primary    { background: var(--bar-fill-color); }
-.split-bar__segment--secondary  { background: var(--text-disabled); flex: 1; }
-.split-bar__segment--positive   { background: var(--bar-fill-color-positive); }
-.split-bar__segment--negative   { background: var(--bar-fill-color-negative); }
-.split-bar__segment--warning    { background: var(--bar-fill-color-warning); }
-
-.split-bar__label {
-  font-size: var(--fs-13);
-  color: var(--text-subtle);
-  margin: 0 0 var(--space-6);
-  line-height: var(--lh-snug);
-}
-
-.split-bar__label strong {
-  color: var(--text-default);
-  font-weight: var(--fw-medium);
-}
-
-.split-bar__labels {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-10);
-  margin-top: var(--space-6);
-  font-size: var(--fs-12);
-  color: var(--text-subtle);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .split-bar__segment { transition: none; }
-}