@klodd/ds 4.2.0 → 4.4.0

package/css/components/column-bar.css

@@ -0,0 +1,73 @@
+/* ================================================================
+   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 {
+  width: 100%;
+  flex: 1;
+  background: var(--surface-sunken);
+  border-radius: var(--radius-4);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  min-height: 0;
+}
+
+.column-bar__fill {
+  width: 100%;
+  background: var(--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,61 @@
+/* ================================================================
+   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 {
+  flex: 1;
+  height: 12px;
+  background: var(--surface-sunken);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.dual-bar__fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--positive);
+  transition: var(--tr-width-slower);
+}
+
+.dual-bar__fill--amort  { background: var(--positive); }
+.dual-bar__fill--apprec { background: var(--accent-9); }
+
+.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

@@ -50,7 +50,10 @@
 
 .hbar__fill {
   height: 100%;
-  background: var(--accent-9);
+  /* v4.4.0 (ADR 0020): --bar-accent-binding for app-domain-kategorier.
+     Default --accent-9 om bindning saknas. App-domain CSS satter
+     --bar-accent via wrapper-klass: <div class="hbar__fill cat-mat">. */
+  background: var(--bar-accent, var(--accent-9));
   border-radius: var(--radius-full);
   transition: width var(--dur-medium) var(--ease-spring-snappy);
 }

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/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/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/css/utilities.css

@@ -148,6 +148,30 @@
   vertical-align: -2px;
 }
 
+/* Skip-link - a11y-pattern for keyboard-anvandare. Visas vid :focus
+   (top: var(--space-8) overrider top: -100px). HTML: lagg som forsta
+   element i body, target valfri main-content-id.
+     <a href="#main" class="skip-link">Hoppa till innehall</a>
+   Lyft fran Ekonom + Jubb v4.3.0 (identical implementation efter
+   konsekvens-cykel 2026-05-14 Sprint 5). */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: var(--space-8);
+  padding: var(--space-8) var(--space-16);
+  background: var(--accent-9);
+  color: var(--surface-page);
+  border-radius: var(--radius-full);
+  z-index: var(--z-spinner);
+  font-weight: var(--fw-medium);
+}
+
+.skip-link:focus {
+  top: var(--space-8);
+  outline: 2px solid var(--accent-9);
+  outline-offset: 2px;
+}
+
 /* Pre-formatted code/text. Sunken bakgrund, monospace, pre-wrap
    for line-break-preservering med word-wrap pa lang text. */
 .code-block {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "4.2.0",
+  "version": "4.4.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)