@klodd/ds 4.3.0 → 4.5.0

package/css/10-semantic.css

@@ -438,3 +438,29 @@
   --surface-medium: color-mix(in oklch, white 8%, transparent);
   --surface-strong: color-mix(in oklch, white 12%, transparent);
 }
+
+
+/* ================================================================
+   ==== BAR-FAMILJEN (v4.5.0, ADR 0021)
+   Shared tokens som alla bar-komponenter (progress, hbar, split-bar,
+   colored-bar, column-bar, dual-bar) lasr istallet for att duplicera
+   bg-/radius-/color-varden. Andra en token, andras overallt.
+
+   Komponenter som har medvetet annorlunda track-bg (column-bar,
+   dual-bar = sunken; progress = raised) override:ar --bar-track-color
+   pa block-roten. Steg 1 (no visual change). Steg 2 senare: harmonisera
+   till EN default om Calle vill.
+
+   Komponenter med specifika fill-tjocklekar (4/6/8/12px / vertical-flex)
+   behaller dessa lokalt - tjocklek ar designval per komponent-typ.
+   ================================================================ */
+:root {
+  --bar-track-color:           var(--surface-active);
+  --bar-track-radius:          var(--radius-full);
+  --bar-fill-radius:           var(--radius-full);
+  --bar-fill-color:            var(--accent-9);
+  --bar-fill-color-positive:   var(--positive);
+  --bar-fill-color-warning:    var(--warning);
+  --bar-fill-color-negative:   var(--negative);
+  --bar-fill-transition:       width var(--dur-medium) var(--ease-spring-snappy);
+}

package/css/components/colored-bar.css

@@ -20,9 +20,11 @@
    Se references/02-components.md "Kategori-monstret".
    ================================================================ */
 .colored-bar {
-  background: var(--bar-accent, var(--accent-9));
+  /* 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(--radius-full);
+  border-radius: var(--bar-fill-radius);
   transition: width var(--dur-base) var(--ease-out);
 }
 

package/css/components/column-bar.css

@@ -0,0 +1,78 @@
+/* ================================================================
+   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

@@ -0,0 +1,64 @@
+/* ================================================================
+   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/expandable-row.css

@@ -0,0 +1,176 @@
+/* ================================================================
+   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/hbar.css

@@ -43,21 +43,26 @@
 .hbar__track {
   width: 100%;
   height: var(--space-6);
-  background: var(--surface-active);
-  border-radius: var(--radius-full);
+  background: var(--bar-track-color);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
 }
 
 .hbar__fill {
   height: 100%;
-  background: var(--accent-9);
-  border-radius: var(--radius-full);
-  transition: width var(--dur-medium) var(--ease-spring-snappy);
+  /* 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(--positive); }
-.hbar__fill--warning  { background: var(--warning); }
-.hbar__fill--negative { background: var(--negative); }
+.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/icon-circle.css

@@ -0,0 +1,46 @@
+/* ================================================================
+   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/input.css

@@ -121,6 +121,32 @@
 }
 
 
+/* ================================================================
+   ==== COMPACT-VARIANT (v4.4.0 lyft fran Ekonom, ADR 0020)
+   Mini-input for inline-rader (upload-preview, avi-edit, snabb-edit
+   inom listrader). Mindre min-height, tightare padding, fs-16 (anti
+   iOS auto-zoom kvar - bara 17 -> 16). Max-width default 160 sa de
+   inte tar overheight i compact-rader. Apparna overrider max-width
+   per kontext om relevant.
+
+   Sufficient for inline-numeriska eller short text-inputs.
+   Wrap-up-pattern: <input class="input input--compact" inputmode="decimal">
+   ================================================================ */
+.input--compact,
+.select.input--compact {
+  min-height: auto;
+  width: auto;
+  max-width: 160px;
+  padding: var(--space-6) var(--space-10);
+  font-size: var(--fs-16);
+}
+
+.select.input--compact {
+  padding-right: var(--space-28);
+  background-position: right var(--space-10) center;
+}
+
+
 /* ================================================================
    ==== INPUT-GROUP (label + input + error)
    Wrapper for ett komplett input-falt med metadata.

package/css/components/item-stack.css

@@ -0,0 +1,43 @@
+/* ================================================================
+   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

@@ -0,0 +1,22 @@
+/* ================================================================
+   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

@@ -0,0 +1,51 @@
+/* ================================================================
+   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); }

package/css/components/progress.css

@@ -25,20 +25,26 @@
    Respekterar prefers-reduced-motion (transition tas bort).
    ================================================================ */
 .progress {
+  /* v4.5.0 (ADR 0021): per-komponent override av --bar-track-color
+     for att behalla raised-bg (var-skillnad mot active default). */
+  --bar-track-color: var(--surface-raised);
   width: 100%;
   height: var(--space-6);
-  background: var(--surface-raised);
-  border-radius: var(--radius-full);
+  background: var(--bar-track-color);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
 }
 
 .progress__bar {
   height: 100%;
-  background: var(--accent-9);
-  border-radius: var(--radius-full);
+  background: var(--bar-fill-color);
+  border-radius: var(--bar-fill-radius);
   transition: width var(--dur-base) var(--ease-out);
 }
 
+/* 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. */
 .progress__bar--success { background: var(--bg-success); }
 .progress__bar--warning { background: var(--bg-warning); }
 .progress__bar--danger  { background: var(--bg-danger); }

package/css/components/review-banner.css

@@ -0,0 +1,70 @@
+/* ================================================================
+   components/review-banner.css
+   Generic warning-CTA-banner: titel + meta + chevron i pill-form.
+   Anvands for "X att granska/atgarda"-rader som lankar till en
+   review-vy. Warning-toned bakgrund.
+
+   Lyft fran Ekonom v4.4.0 (ADR 0020). Konsumeras av alla appar som
+   har en granskning/atgards-flow.
+
+   Blocks:
+     .review-banner  - klickbar warning-CTA-banner
+
+   Element:
+     .review-banner__title  - rubrik-text (fs-14 medium)
+     .review-banner__meta   - underrubrik (fs-12 subtle)
+     .review-banner__chev   - chevron-svg, hoger-stalld
+
+   HTML:
+     <a href="/granskning" class="review-banner">
+       <div>
+         <p class="review-banner__title">X att granska</p>
+         <p class="review-banner__meta">Mojliga utgifter</p>
+       </div>
+       <svg class="review-banner__chev"...></svg>
+     </a>
+   ================================================================ */
+.review-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  background: var(--warning-dim);
+  border: var(--bw-hairline) solid var(--warning-border);
+  border-radius: var(--radius-14);
+  padding: var(--space-14) var(--space-16);
+  margin-bottom: var(--space-14);
+  color: var(--text-default);
+  text-decoration: none;
+  transition: var(--tr-bg-base);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .review-banner:hover {
+    text-decoration: none;
+    background: var(--warning-hover, var(--warning-dim));
+  }
+}
+
+.review-banner:focus-visible {
+  outline: 2px solid var(--accent-9);
+  outline-offset: 2px;
+}
+
+.review-banner__title {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.review-banner__meta {
+  font-size: var(--fs-12);
+  color: var(--text-subtle);
+  margin: var(--space-2) 0 0;
+}
+
+.review-banner__chev {
+  opacity: 0.7;
+  flex-shrink: 0;
+}

package/css/components/split-bar.css

@@ -10,22 +10,24 @@
 .split-bar {
   display: flex;
   height: 8px;
-  border-radius: var(--radius-full);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
-  background: var(--surface-active);
+  background: var(--bar-track-color);
   margin: var(--space-8) 0 var(--space-12);
 }
 
 .split-bar__segment {
   height: 100%;
-  transition: width var(--dur-medium) var(--ease-spring-snappy);
+  transition: var(--bar-fill-transition);
 }
 
-.split-bar__segment--primary    { background: var(--accent-9); }
+/* 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(--positive); }
-.split-bar__segment--negative   { background: var(--negative); }
-.split-bar__segment--warning    { background: var(--warning); }
+.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);

package/css/components/status-icon.css

@@ -0,0 +1,32 @@
+/* ================================================================
+   components/status-icon.css
+   Inline status-icon i text-flow (clock, alert, check). Tightare
+   pa baseline + flex-shrink:0 sa den inte staucher i smala containers.
+
+   Anvands typiskt efter en description-text for att signalera tillstand:
+   pending, stale, success, warning.
+
+   Lyft fran Ekonom v4.4.0 (var .tx-pending-icon, ADR 0020).
+
+   Blocks:
+     .status-icon  - inline-flex SVG-wrapper for status-indicator
+
+   Modifiers:
+     .status-icon--pending  - default muted-color (clock-icon)
+     .status-icon--stale    - warning-color (clock som blivit gammal)
+     .status-icon--success  - positive-color (check)
+     .status-icon--warning  - warning-color (alert)
+   ================================================================ */
+.status-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--space-6);
+  color: var(--text-muted);
+  vertical-align: -2px;
+  flex-shrink: 0;
+}
+
+.status-icon--pending { color: var(--text-muted); }
+.status-icon--stale   { color: var(--warning); }
+.status-icon--success { color: var(--positive); }
+.status-icon--warning { color: var(--warning); }

package/css/components/tag-inline.css

@@ -0,0 +1,21 @@
+/* ================================================================
+   components/tag-inline.css
+   Diskret inline-tag som markerar metadata in-line med brodtext.
+   Mindre an .chip - har ingen pill-bakgrund. Bara avvikande font-
+   storlek + muted color + slight tracking.
+
+   Anvands typiskt for inline-status (estimat, beta, deprecated) som
+   ska synas men inte dominera surrounding text.
+
+   Lyft fran Ekonom v4.4.0 (var .estimat-tag, ADR 0020).
+
+   Blocks:
+     .tag-inline  - inline-tag i muted text-stil
+   ================================================================ */
+.tag-inline {
+  font-style: normal;
+  font-size: var(--fs-11);
+  color: var(--text-muted);
+  font-weight: var(--fw-regular);
+  letter-spacing: var(--ls-tracker, 0.02em);
+}

package/css/index.css

@@ -72,3 +72,15 @@
 /* v3.9.0 - lyft fran Ekonoms LEGACY-sektion (Sprint 5 MADR 0009) */
 @import './components/kv-list.css';
 @import './components/offline.css';
+
+/* v4.4.0 - lyft fran Ekonom-domain (ADR 0020 - domain-to-package) */
+@import './components/review-banner.css';
+@import './components/matched-row.css';
+@import './components/status-icon.css';
+@import './components/tag-inline.css';
+@import './components/kvp-arrow.css';
+@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';

package/package.json

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

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

@@ -0,0 +1,233 @@
+# 0020 - Domain-to-package lift: alla Ekonom-specifika block lyfts
+
+## Status
+Locked. Minor version-bump (4.4.0) - additive paket-utvidgning.
+
+## Context
+
+Audit 2026-05-14 (sen kvall) jamforde Ekonoms /design-styleguide mot
+faktisk template-anvandning. Avslojade att 17 Ekonom-domain-block
+(i `ds/ekonom.css` och `ds/ekonom-domain.css`) inte fanns representerade
+i /design och inte i paketet:
+
+- `.review-banner` + element
+- `.cat-row` + element + `.cat-list-row` + modifiers + `.cat-tx-stack` + element
+- `.sub-row` + modifiers + `.sub-status-icon`
+- `.amort-bar` + element
+- `.tx-pending-icon` + `--stale`
+- `.cat-bar-*` (Tier D, 7 klasser)
+- `.equity-bar-*` + amort/apprec (Tier D, 6 klasser)
+- `.budget-bar-*` (Tier D, 5 klasser)
+- `.cost-bar` + `-seg`
+- `.cat-tx-*` (Tier D, 6 klasser)
+- `.estimat-tag`
+- `.btn-copy` + `.btn-bank`
+- `.bank-row-icon`
+- `.rule-arrow` + `.rule-cat`
+- `.compact-select` + `.compact-amount-input`
+
+Plus 4 paket-komponenter (`.profile-panel` v3.21.0, `.kv-list` v3.9.0,
+`.pill-nav` v3.16.0, `.offline-*` v3.9.0) saknades i /design - finns i
+paketet men ej dokumenterat i styleguiden.
+
+Per Calle 2026-05-14 (sen kvall): "Jag vill inkludera dessa 17 i
+designsystemet och darmed pa designsidan. De ska antingen vara en del
+av det globala designsystemet, eller sa ska det inte finnas. Det
+globala designsystemet ska vara strukturerat och fylld av element som
+kan anvandas av andra appar. Aven om de idag enbart anvands specifikt
+for Ekonom for en specifik sak."
+
+Princip: **lyft eller drop, ingen mellanversion**.
+
+## Decision
+
+Alla 17 lyfts. Tre strategier per element baserat pa Calle's
+beslutspunkter:
+
+### A. Lyft som-ar eller med smarrre rename (8 element)
+
+| Ekonom-namn | Paket-namn | Rationale |
+|---|---|---|
+| `.review-banner` + element | `.review-banner` + element | Generic warning-CTA-banner. Behaller namn - andra appar kan ha review-flow. |
+| `.sub-row` + `.sub-status-icon` | `.matched-row` + `__status-icon` | Generic-namn for "matchad/pending"-rad. Tidigare subscription-specifikt (sub-) - nya namnet ar app-agnostiskt. |
+| `.tx-pending-icon` + `--stale` | `.status-icon` + `--pending/--stale/--success/--warning` | Generic inline status-icon. Modifiers tacker fler scenarier. |
+| `.estimat-tag` | `.tag-inline` | Generic inline-metadata-tag. |
+| `.rule-arrow` + `.rule-cat` | `.kvp-arrow` + `.kvp-target` | Key-value-pair-mapping (generic for rule-editors). |
+| `.bank-row-icon` | `.icon-circle` + `--positive/--warning/--negative` | Generic 28x28 round-icon med tonad bg. Modifiers for status-fargning. |
+
+### C. Rename + lyft for komplexare strukturer (4 element-familjer)
+
+| Ekonom-namn | Paket-namn | Rationale |
+|---|---|---|
+| `.cat-row` + element | `.expandable-row` + element | Generic collapsible summary-rad. Per Calle 2026-05-14. |
+| `.cat-list-row` + `.cat-tx-*` | `.expandable-row__item` + `__item-list/-body/-desc/-date/-amount` + modifiers `--excluded/--pending/--clickable/--credit` | BEM-element av expandable-row. Sammanslag tva tidigare block. |
+| `.cat-tx-stack` + element | `.item-stack` + `__icon/__header/__body` | Generic grupp av identiska items. |
+| `.amort-bar` + element | `.column-bar` + `__value/__track/__fill/__label` + `.column-bar-list` | Vertikal historik-stapel. Komplement till `.hbar` (horisontell). |
+| `.equity-bar-*` + amort/apprec | `.dual-bar` + `__track/__fill/__meta` + `__fill--amort/--apprec` | Generic dual-fill horisontell stapel. |
+
+### B. Migrera till befintliga paket-patterns (5 element-familjer)
+
+| Ekonom-namn | Paket-pattern | Rationale |
+|---|---|---|
+| `.cat-bar-*` (Tier D) | `.hbar` + `--bar-accent`-binding | Hbar har samma struktur (item/track/fill/label/value). Utokad i v4.4.0 med `--bar-accent`-token-stod sa kategori-bindings i `ekonom-domain.css` (`.cat-mat`, `.cat-noje` etc) kan styra fill-color. |
+| `.budget-bar-*` (Tier D) | `.progress` + `--bar--warning/--danger` | Paketets progress har redan dessa modifiers. |
+| `.cost-bar` + `-seg` | `.split-bar` + `__segment` | Paketets split-bar har segmenterad struktur. |
+| `.btn-copy`, `.btn-bank` | `.btn--icon.btn--circle` | Paketets btn har 44x44 round-modifier. Specifik color (copy=svartvit, bank=accent) blir via app-tema via `--accent-9`. Per Calle: "ska inte ha specialfarger, de ska fargas utifran appens tema". |
+| `.compact-select`, `.compact-amount-input` | `.input.input--compact` (ny modifier) | Lyfta som modifier av paketets input. Max-width default 160, padding 6/10, fs-16. Apparna overrider max-width per kontext. |
+
+### Hbar-utvidgning (--bar-accent-binding)
+
+`.hbar__fill` ber gick `background: var(--accent-9)`. Andrat till
+`background: var(--bar-accent, var(--accent-9))`. Backwards-compat
+(default-fall ar oforandrat). App-domain-CSS kan satta `--bar-accent`
+via wrapper-klasser:
+
+```css
+/* Ekonom-domain.css */
+.cat-mat { --bar-accent: var(--cat-mat-icon); }
+.cat-el  { --bar-accent: var(--cat-el-icon); }
+...
+
+/* Template */
+<div class="hbar__fill cat-mat" data-bar-width="80%"></div>
+```
+
+### Saknande paket-komponenter i /design (separat)
+
+`.profile-panel`, `.kv-list`, `.pill-nav`, `.offline-*` finns redan
+i paketet men saknades i Ekonoms `/design`-styleguide. Lyfts inte i
+denna ADR - paketet ar redan komplett. /design-utvidgning gor i
+samma sprint.
+
+## Migration
+
+### Klodd-ds v4.4.0 (additive minor)
+
+Nya komponentfiler i `css/components/`:
+- `review-banner.css`
+- `matched-row.css`
+- `status-icon.css`
+- `tag-inline.css`
+- `kvp-arrow.css`
+- `icon-circle.css`
+- `expandable-row.css`
+- `item-stack.css`
+- `column-bar.css`
+- `dual-bar.css`
+
+Utvidgning av befintliga:
+- `hbar.css`: `--bar-accent`-binding pa `__fill`
+- `input.css`: `.input--compact`-modifier
+
+`index.css` uppdaterad med 10 nya @imports.
+`02-components.md` uppdaterad med nya block-entries.
+
+### Ekonom-migration
+
+Templates-klassnamn-byten (mass-find-replace):
+
+```
+cat-row             -> expandable-row
+cat-row__header     -> expandable-row__header
+cat-row__total      -> expandable-row__total
+cat-row__label      -> expandable-row__label
+cat-row__amount     -> expandable-row__amount
+cat-row__chev       -> expandable-row__chev
+cat-list            -> expandable-list
+cat-list-row        -> expandable-row__item
+cat-tx-list         -> expandable-row__item-list
+cat-tx-body         -> expandable-row__item-body
+cat-tx-desc         -> expandable-row__item-desc
+cat-tx-date         -> expandable-row__item-date
+cat-tx-amount       -> expandable-row__item-amount
+cat-tx-stack        -> item-stack
+cat-tx-stack__*     -> item-stack__*
+sub-row             -> matched-row
+sub-status-icon     -> matched-row__status-icon
+amort-bar           -> column-bar (+ amort-bars -> column-bar-list)
+equity-bar-row     -> dual-bar
+equity-bar-track   -> dual-bar__track
+equity-bar-fill    -> dual-bar__fill
+equity-amort       -> dual-bar__fill--amort
+equity-apprec      -> dual-bar__fill--apprec
+equity-bar-meta    -> dual-bar__meta
+cat-bars           -> hbar (eller hbar-konsumtion i template)
+cat-bar-*          -> hbar__* + cat-X-binding-klass
+budget-bar-*       -> progress + __bar--warning/--danger
+cost-bar           -> split-bar
+cost-bar-seg       -> split-bar__segment
+btn-copy           -> btn btn--icon btn--circle
+btn-bank           -> btn btn--icon btn--circle
+compact-select     -> input input--compact (select-version)
+compact-amount-input -> input input--compact
+tx-pending-icon    -> status-icon
+tx-pending-icon--stale -> status-icon status-icon--stale
+estimat-tag        -> tag-inline
+bank-row-icon      -> icon-circle icon-circle--positive
+rule-arrow         -> kvp-arrow
+rule-cat           -> kvp-target
+```
+
+Ekonoms `ds/ekonom.css` raderar nu alla lyfta block. Bara verkligen
+Ekonom-domain-specifika klasser kvarstar (om nagot).
+
+`ekonom-domain.css` behaller `.cat-mat`/`.cat-el`/etc-bindings till
+`--bar-accent`/`--row-accent` - de ar app-domain-data (kategori-farger).
+Bara binding-namnen `cat-bar-mat`/`cat-tx-mat` kan eventuellt byta
+till bara `cat-mat` om de konsumeras universellt.
+
+### Jubb-migration
+
+Ingen migration kravs - Jubb anvande inte nagra av de lyfta block:en.
+Jubb far paket-bump 4.4.0 som additive (alla nya block tillgangliga
+men inte aktivt anvanda). Jubbs `/design` utokas med samma nya
+sektioner for paritet.
+
+### /design-utvidgning
+
+Bagge appars `design.html` utokas med 14 nya sektioner:
+- 10 nya block (review-banner, matched-row, status-icon, tag-inline,
+  kvp-arrow, icon-circle, expandable-row, item-stack, column-bar,
+  dual-bar)
+- 4 saknande paket-block (profile-panel, kv-list, pill-nav, offline)
+
+## Konsekvenser
+
+**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.
+- /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`).
+- Hbar-utvidgning med `--bar-accent`-binding ar backwards-compat -
+  brytter inte Jubb eller andra konsumenter.
+
+**Trade-offs:**
+- 30+ template-klassnamn-byten i Ekonom. Risk for regression om nagot
+  missas. Mitigation: grep efter alla gamla klassnamn efter migration,
+  verifiera 0 traffar.
+- Vissa Ekonom-specifika namn forsvinner till generic-namn
+  (`cat-row` -> `expandable-row`). Kraver discipline att inte
+  introducera nya domain-specifika namn framover.
+- Paket-CSS-storlek vaxer ~5KB (additive imports). Acceptabelt for
+  konsekvensvinst.
+
+**Migration-strategi:**
+- v4.4.0 ar additive: nya klasser laggs till, inga raderas i paketet.
+- Ekonoms gamla klasser kvarstar i `ds/ekonom.css` UNTIL templates
+  migrerats. Sen radera ur ekonom.css.
+- Tva-stegs-deploy:
+  1. Bumpa paketet + apparna med nya klasser tillgangliga (men
+     gamla styling kvar i Ekonom-lokal CSS - parallel-exist).
+  2. Migrera Ekonom-templates till nya klasser (visual paritet via
+     paket-CSS, gamla klasser orphaned).
+  3. Radera gamla klasser ur Ekonoms `ds/ekonom.css`.
+
+## References
+
+- ADR 0009 (no-flat-components-css) - relaterade lift-doktrin
+- ADR 0011 (strikt-bem-elementsyntax)
+- ADR 0017 (padding-skala) + 0018 (outline-offset)
+- Calle's beslut 2026-05-14 (sen kvall): "lyft eller drop"
+- Audit-rapport: /design vs template-usage (2026-05-14)

package/references/04-locked-decisions/0021-bar-shared-tokens.md

@@ -0,0 +1,133 @@
+# 0021 - Bar-familjen: gemensamma tokens (Steg 1)
+
+## Status
+Locked. Minor version-bump (4.5.0) - additive, no visual change.
+
+## Context
+
+Audit 2026-05-14 (sen kvall, fas 3) raknade 6 bar-komponenter i
+paketet (progress, colored-bar, hbar, split-bar, column-bar,
+dual-bar) plus 2 Ekonom-domain-wrappers. Calle's observation:
+"manga bars - finns det dubbletter?".
+
+Konkreta dubletter i nuvarande bar-CSS:
+
+**Track-bg-varierar:**
+| Komponent | Track-bg |
+|---|---|
+| progress | `--surface-raised` |
+| hbar | `--surface-active` |
+| split-bar | `--surface-active` |
+| column-bar | `--surface-sunken` |
+| dual-bar | `--surface-sunken` |
+
+Tre olika value:r utan dokumenterad rationale. Inkonsekvens.
+
+**Fill-color-default varierar:**
+| Komponent | Fill-default |
+|---|---|
+| progress | `--accent-9` |
+| hbar | `--bar-accent || --accent-9` |
+| colored-bar | `--bar-accent || --accent-9` |
+| split-bar (primary) | `--accent-9` |
+| column-bar | `--positive` |
+| dual-bar | `--positive` |
+
+**Status-modifier-color varierar:**
+| Komponent | Positive | Warning | Negative |
+|---|---|---|---|
+| progress | `--bg-success` | `--bg-warning` | `--bg-danger` |
+| hbar | `--positive` | `--warning` | `--negative` |
+| split-bar | `--positive` | `--warning` | `--negative` |
+
+Tva olika status-tema (solid bg-X vs text-color-X) utan klar rationale.
+
+Per Calle 2026-05-14 (sen kvall): "Jag hade kunnat se att man har
+en stor bar-samling, dar storlek, farg etc bestams med olika tokens."
+
+Calles intuition stamde - shared tokens ar standard i moderna design-
+system. Men full one-class-many-modifiers-konsolidering ar breaking
+MAJOR-bump. Steg 1 levererar SHARED TOKENS utan att andra struktur
+eller visual.
+
+## Decision
+
+**Steg 1 (denna ADR, v4.5.0):** Lyfta 8 shared tokens till
+`:root` i `10-semantic.css`. Refaktorera alla 6 bar-komponenter att
+lasa dem. Komponenter med medvetet annorlunda varden override:ar
+pa block-roten (`--bar-track-color: var(--surface-sunken)` etc).
+
+```css
+:root {
+  --bar-track-color:           var(--surface-active);
+  --bar-track-radius:          var(--radius-full);
+  --bar-fill-radius:           var(--radius-full);
+  --bar-fill-color:            var(--accent-9);
+  --bar-fill-color-positive:   var(--positive);
+  --bar-fill-color-warning:    var(--warning);
+  --bar-fill-color-negative:   var(--negative);
+  --bar-fill-transition:       width var(--dur-medium) var(--ease-spring-snappy);
+}
+```
+
+### Per-komponent-changes
+
+| Komponent | Track-color | Fill-default | Status-modifier |
+|---|---|---|---|
+| progress | OVERRIDE: `--bar-track-color: var(--surface-raised)` | `--bar-fill-color` | Behaller `--bg-success/-warning/-danger` (solid status-bg-tema, medvetet annorlunda fran text-color-tema) |
+| hbar | DEFAULT (active) | `--bar-fill-color` med `--bar-accent`-binding | `--bar-fill-color-positive/-warning/-negative` |
+| split-bar | DEFAULT (active) | `--bar-fill-color` (primary) | `--bar-fill-color-positive/-negative/-warning` |
+| colored-bar | n/a (no track) | `--bar-fill-color` med `--bar-accent`-binding | n/a |
+| column-bar | OVERRIDE: `--bar-track-color: var(--surface-sunken)` + `--bar-track-radius: var(--radius-4)` | `--bar-fill-color-positive` | n/a |
+| dual-bar | OVERRIDE: `--bar-track-color: var(--surface-sunken)` | `--bar-fill-color-positive` (default + --amort), `--bar-fill-color` (--apprec) | n/a |
+
+### Future steps (NOT in scope for v4.5.0)
+
+**Steg 2:** Konsolidera till 1 `.bar`-namespace med modifiers
+`--vertical/-multi-segment/-with-meta/-with-label`. Breaking MAJOR-bump.
+Konsumeras vid framtida sprint nar Calle vill exekvera.
+
+**Steg 3:** Eliminera duplikat-komponenter (colored-bar = hbar__fill
+standalone). Mindre breaking. Optional cleanup.
+
+## Konsekvenser
+
+**Bra:**
+- Endpoint-shape uppfyller Calle's intuition - tokens styr utseende.
+- Konsekvens via en token-andring framover (andra
+  --bar-fill-color-positive pa root - andras pa hbar/split-bar/
+  column-bar/dual-bar samtidigt).
+- Inga visuella andringar (komponenter override:ar default per behov).
+- Backwards-compat - app-domain CSS som anvander direkta tokens
+  (Ekonoms `--bar-accent`-bindings) fortsatter funka.
+- Future Steg 2/3 kan byggas pa shared-token-foundation.
+
+**Trade-offs:**
+- 6 komponenter har fortfarande egen file/namespace - inte unifierat.
+- Per-komponent-override (--bar-track-color: var(--surface-X)) tilltager
+  CSS-storlek marginellt jamfort med hardkodad value.
+- Override-pattern kraver discipline - om someone andra `.column-bar`
+  utan att inse override:n kan bryta sunken-bg.
+
+## Migration
+
+**Klodd-ds v4.4.0 -> v4.5.0:** additive token-tillagg + per-komponent-
+refaktor. Inga template-andringar i appar. Inga visual changes.
+
+**Apparna:** bumpa till 4.5.0, build:ds, verify - ingen template-
+migration.
+
+## Verifiering
+
+- 0 visual changes per Calle's krav (Steg 1 = "no visual change").
+- Stylelint-plugin: 0 errors (alla tokens lagliga).
+- Manuell visual QA pa /design (alla 6 bar-sektioner ser identiska
+  ut pre/post-bump).
+
+## References
+
+- ADR 0020 (domain-to-package-lift) - inforde --bar-accent-binding
+- DESIGN-LANGUAGE.md sektion 4 (padding-rytm) - liknande shared-token-
+  approach for spacing
+- Calle's beslut 2026-05-14 (sen kvall): "Det later bra" pa Steg 1-
+  forslag