@klodd/ds 3.8.0 → 3.9.0

package/css/components/auth.css

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

package/css/components/button.css

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

package/css/components/kv-list.css

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

package/css/components/nav.css

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

package/css/components/offline.css

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

package/css/index.css

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

package/package.json

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

package/references/02-components.md

@@ -1,6 +1,6 @@
 # Komponentkatalog
 
-35 komponent-filer i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
+37 komponent-filer i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
 inga primitives. BEM-konvention (block__element--modifier).
 
 ## Klassificeringsformat
@@ -19,7 +19,7 @@ För varje entry gäller:
 
 ### button (`button.css`)
 - **Blocks:** `.btn`
-- **Modifiers:** `.btn--primary/-secondary/-ghost/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--block/-add`, `.btn--loading`
+- **Modifiers:** `.btn--primary/-secondary/-ghost/-positive/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--block/-add`, `.btn--loading`
 - **Anvand:** alla aktioner med tap-target >=44px
 - **INTE:** Cirkel-link i topbar (anvand `.btn--icon.btn--circle`)
 - **Tokens:** `--surface-default/-hover/-active`, `--text-default/-on-accent`, `--border-default/-focus`, `--accent-9/-10`, `--bg-danger`, `--touch-min`
@@ -48,8 +48,8 @@ För varje entry gäller:
 - **Tokens:** `--surface-raised/-overlay/-hover`, `--border-subtle/-default/-focus`
 
 ### nav (`nav.css`)
-- **Blocks:** `.bottom-nav`, `.topbar`, `.tab-bar`, `.tab` (child av tab-bar)
-- **Element:** `.bottom-nav__item`, `.topbar__back`, `.topbar__title`, `.topbar__action`
+- **Blocks:** `.bottom-nav`, `.topbar`
+- **Element:** `.bottom-nav__item`, `.topbar__back`, `.topbar__title`, `.topbar__action`, `.topbar__logo`
 - **Modifiers:** `.bottom-nav__item--active` (Sprint F BEM-konvertering)
 - **States:** `.tab.active`
 - **Anvand:** Mobile bottom-nav (fixed), in-flow topbar, segmented tabs
@@ -221,6 +221,7 @@ För varje entry gäller:
 ### auth (`auth.css`)
 - **Blocks:** `.auth-container`
 - **Element:** `.auth-container__title`, `.auth-container__subtitle`
+- **Modifiers:** `.auth-container--narrow` (max-width 480px, ej full-page-centrerad - for onboarding-vyer)
 - **Anvand:** Centrerad layout for inloggning + onboarding
 - **INTE:** Settings-vyer
 
@@ -271,6 +272,20 @@ För varje entry gäller:
 - **Tokens:** `--bar-accent` (sattes av app-bindning), `--accent-9` (default)
 - **Pattern:** Se "Kategori-monstret" nedan
 
+### kv-list (`kv-list.css`) - v3.9.0
+- **Blocks:** `.kv-list` (`<ul>`-wrapper)
+- **Element:** `.kv-list__item`, `.kv-budget-header` (compound, klickbar header), `.kv-budget-body` (compound, expanderat innehall)
+- **Modifiers:** `.kv-list__item--strong/-sub/-divider/-budget`
+- **Anvand:** Key-value list for metric-breakdowns, statistik-paneler, settings-summaries
+- **INTE:** List av actions (anvand `.list-row` eller `.setting-row`)
+- **Special:** `.kv-budget-header` + `.kv-budget-body` ar compound-blocks per regel 11 - lyftade fran Ekonoms LEGACY utan rename for att bibehalla template-kompabilitet.
+
+### offline (`offline.css`) - v3.9.0
+- **Blocks (compound):** `.offline-wrap`, `.offline-icon`, `.offline-title`, `.offline-text`
+- **Anvand:** Offline-page layout som SW visar vid natverksfel
+- **INTE:** Inline empty-state i listor (anvand `.empty-state` fran feedback.css)
+- **Special:** Alla 4 blocks anvands tillsammans i offline.html. Compound-block-monster per regel 11.
+
 ### sheet-content (`sheet-content.css`) - v3.5.1
 - **Blocks:** `.sheet` (kompletterar `.sheet` fran `overlay.css` med innehall-typografi och form-monster)
 - **Element:** `.sheet__title`, `.sheet__description`, `.sheet__form`, `.sheet__field`, `.sheet__field-label`, `.sheet__hint`, `.sheet__items`, `.sheet__item`, `.sheet__actions`, `.sheet__toggle`, `.sheet__subform`, `.sheet__save`, `.sheet__delete`, `.sheet__handle`, `.sheet__body`, `.sheet__divider` (kompletterande element)

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

@@ -9,8 +9,10 @@ base.html: <script src="/static/js/{bar-styles,hero-roll}.js"> bytt till
 raderade (app/static/js/bar-styles.js + app/static/js/hero-roll.js).
 Pytest 636/636.
 
-Jubb status: kvarvarande oppen - kan stangas i samma monster nar Jubb
-faktiskt anvander dem (icke-blockande for narvarande).
+**Jubb status (verifierat 2026-05-10):** Jubb har 0 app-egen kopior i
+`app/static/js/`-roten. Bara paket-syncade versioner i `app/static/js/ds/`
+finns (`bar-styles.js`, `hero-roll.js`). Hela MADR 0003 ar nu LOST -
+ingen drift kvar i nagon app.
 
 ## Context
 Bade Jubb och Ekonom har for tillfallet `bar-styles.js` och

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

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

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

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

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

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

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

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