@klodd/ds 3.9.0 → 3.9.1

package/SKILL.md

@@ -7,7 +7,7 @@ description: Design memory for the @klodd/ds shared design system across all Klo
 
 ## Vad detta är
 Gemensamt designsystem på npm (`@klodd/ds@3.x`). Tre-lagers tokens,
-34+ komponenter (sheet-content tillagd v3.5.1), konsumeras av Jubb
+37+ komponenter (sheet-content tillagd v3.5.1), konsumeras av Jubb
 och Ekonom. Fler appar planerade.
 Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
 
@@ -108,38 +108,4 @@ En källa, alla projekt ser samma skill automatiskt. Ändringar i
 `~/dev/klodd-ds/SKILL.md`, `POLICY.md` eller `references/` syns
 omedelbart i nästa CC-session - ingen synk-fas behövs.
 
-Updated: 2026-05-09 (matchar @klodd/ds 3.5.4 - sprint C fas 1+2: ny
-sheet-content.css-komponent (24 BEM-klasser för Sprint-65-pattern),
-foreman-typografi-utokning (.text-caption/-tiny/-num/-num--display/-positive/-warning),
-btn-modifiers (--block, --add), .heading (17px medium tight), och utokningar
-i panel/setting-row/chip.
-v3.5.2 rattade .panel--attention__pill (felaktig BEM) till .panel__pill +
-context-styling via .panel--attention .panel__pill.
-v3.5.3 lagger till .heading-utan-N (17px) for dialog-titlar och sheet-rubriker.
-v3.5.4 (Sprint D-3) introducerar --fs-16 token (16px) for iOS-anti-zoom
-pa inputs och applicerar pa inline-edit__input. Token ar dokumenterad
-som BARA for input-element - vanlig text anvander fortfarande 15 eller 17.
-v3.5.5 (Sprint E) konsoliderar :focus-visible over 7 komponenter (chip,
-list-row, tab-bar, nav, swipe-stack, inline-edit) - 11 nya selectorer
-fick outline 2px solid var(--border-focus) med outline-offset 2px. Plus
-.tab outline-offset normaliserad 1px->2px. input.css och .inline-edit__input
-ar dokumenterade undantag som behaller :focus (text-input-konvention).
-v3.5.6 (Sprint F) konsoliderar BEM over 5 komponenter (card, dropdown,
-hero-roll, overlay, nav) - 23 flat-hyphen element-klasser konverterade
-till .block__element-syntax. Inkluderar JS-koordinering pa hero-roll,
-sheet-drag, turbo-nav, nav-optimistic dar querySelector/classList
-adresserar de bytta klasserna. .bottom-nav-item.active konverterad till
-BEM-modifier .bottom-nav__item--active. tooltip-wrapper bevarad som
-compound block per references/03-quality-bar.md regel 1.
-v3.5.7 (Sprint G) uppdaterar hub-card.css med Ekonoms tightare design
-(padding 14/16, border-radius 14, hub-list gap 10, active scale 0.985)
-nar Ekonoms LEGACY-version raderades. Sprint G hanterade aven domain-CSS
-BEM-migration i app-repos (icke-paket-fil) - 4 tier: A=dead-code-radering
-(14 klasser), B=paket-dubblett-radering (.hub-card + .hub-list ur Ekonoms
-LEGACY), C=BEM-byten (9 block-grupper: amort-bar, cat-tx-stack, cat-row,
-cat-list-row state-modifiers, sub-row state-modifiers, job-card, hero-amount-card,
-source-bar, score-bar), D=compound-block-undantag (cat-bar/equity-bar/
-budget-bar/hbar/cat-tx). Plus base.css Sprint F-miss fixad (bottom-nav-item,
-sheet-handle som descendant-selektorer i touch-cleanup + press-feedback).
-Jubb fick paritet med Ekonom: bundles/jubb.css + jubb-domain.css scaffold.
-Sprint C fas 2 template-migration pagaar.)
+Updated: 2026-05-10 (matchar @klodd/ds 3.9.0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "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

@@ -162,12 +162,11 @@ För varje entry gäller:
 - **INTE:** Klickbart kort med rich content (anvand `.hub-card`)
 
 ### collapsible (`collapsible.css`)
-- **Blocks:** `.collapsible-card`
+- **Blocks:** `.collapsible`
 - **Element:** `.collapsible__header`, `.collapsible__header-text`, `.collapsible__chev`, `.collapsible__body`
-- **States:** `[data-expanded]` pa `.collapsible-card`
+- **States:** `[data-expanded]` pa `.collapsible`
 - **Anvand:** Panel som expanderar pa klick. JS togglar `data-expanded`
 - **INTE:** Modal-content (anvand `.dialog` eller `.sheet`)
-- **Special:** BEM-stam-mismatch - block heter `.collapsible-card` men element heter `.collapsible__X` (utan `-card`-suffix). Oppen punkt for rename, se sprint-rapport 2026-05-09.
 
 ### hbar (`hbar.css`)
 - **Blocks:** `.hbar`
@@ -354,4 +353,4 @@ Jubb, Ekonom, framtida appar foljer samma monster med sina egna tokens.
 - **`var(--gray-9)` i komponent-CSS.** Komponenter laser bara semantic.
 - **Egen .button-style.** Anvand `.btn` med modifier istallet.
 - **`font-weight: 700`.** Anvand `--fw-medium` (500). Display-siffror ar dokumenterat undantag.
-- **Anta att alla komponent-filer har ett root-block.** 17 av 35 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.
+- **Anta att alla komponent-filer har ett root-block.** 17 av 37 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.

package/references/03-quality-bar.md

@@ -212,7 +212,7 @@ Varje interaktiv komponent SKA ha:
 
 ## 11. En fil kan innehalla flera root-blocks
 
-I 17 av 35 komponent-filer i paketet definieras flera root-blocks i
+I 17 av 37 komponent-filer i paketet definieras flera root-blocks i
 samma fil (`form.css`, `nav.css`, `chip.css`, `swipe-stack.css`,
 `feedback.css`, `hub-card.css` m.fl.). Det ar en medveten konvention,
 inte ett undantag eller teknisk skuld.

package/references/05-open-decisions/0012-maskable-icons.md

@@ -0,0 +1,19 @@
+# 0012 - Maskable PWA-ikoner
+
+## Status
+Pending.
+
+## Context
+Jubb och Ekonom har PWA-ikoner men saknar maskable-varianter med
+safe-zone-padding. Utan maskable-ikoner riskerar ikonen att klippas
+på Android-enheter med adaptiva ikoner.
+
+SVG-källfiler är klara. Bakgrundsfärg ska vara steg 3 av respektive
+apps accent-ramp (--accent-3: Blue-3 för Jubb, Plum-3 för Ekonom).
+
+## Återstår
+- PNG-export med safe-zone-padding (72px ikon i 108px canvas)
+- purpose="maskable" i web manifest för båda appar
+
+## Beroenden
+Kräver designer-export. Inte en CC-uppgift förrän PNG-filer levereras.

package/references/05-open-decisions/0013-jubb-kv-list-migration.md

@@ -0,0 +1,84 @@
+# 0013 - Jubb kv-list template-migration
+
+## Status
+Pending.
+
+## Context
+Sprint 5 (3.9.0, MADR 0009) lyfte kv-list till @klodd/ds som BEM-
+komponent (.kv-list, .kv-list__item, .kv-list__item--strong/-sub/
+-divider/-budget). Ekonom-templates migrerades samtidigt.
+
+Jubb fick inte motsvarande migration. Jubbs jubb.css behåller en
+flat-namnskonvention (.kv-row, .kv-key, .kv-value) som 5 templates
+beror på via 10 separata `<ul class="kv-list">`-instanser med ~40
+individuella .kv-row/.kv-key/.kv-value-träffar:
+- runs.html (2 listor)
+- job_detail.html (1 lista)
+- dashboard.html (1 lista)
+- insights.html (4 listor)
+- jobs_list.html (2 listor)
+
+## API-mismatch
+
+Templates använder:
+
+```html
+<ul class="kv-list">
+  <li class="kv-row">
+    <span class="kv-key">label</span>
+    <span class="kv-value">value</span>
+  </li>
+</ul>
+```
+
+Paketets API (kv-list.css 3.9.0):
+
+```html
+<ul class="kv-list">
+  <li class="kv-list__item">
+    label
+    value
+  </li>
+</ul>
+```
+
+Paketets .kv-list__item har display: flex + justify-content:
+space-between direkt på li-en. Två children placeras på vänster
+och höger utan wrapper-spans. Jubbs nuvarande .kv-value bidrar
+med color: var(--text-default), font-variant-numeric: tabular-nums
+och inline-flex med gap som behöver återskapas i ny layout (möjliga
+vägar: ny .kv-list__item--num-modifier i paketet, eller behåll en
+lättviktig .kv-value-utility i Jubb).
+
+## Återstår
+
+- HTML-migration i 5 templates: `<li class="kv-row">` blir
+  `<li class="kv-list__item">`
+- Bedömning per template: droppa .kv-key/.kv-value-spans, eller
+  behåll dem för tabular-nums/color
+- Visuell verifiering per vy efter migration (runs, job_detail,
+  dashboard, insights, jobs_list)
+- Tester: kontrollera om pytest-asserts refererar kv-row/-key/-value
+- Slutsteg: radera Jubbs lokala .kv-list, .kv-list li, .kv-row,
+  .kv-key, .kv-value ur jubb.css
+
+## Beroenden
+
+- Visuell verifiering per vy via Chrome MCP eller dev-server
+- Tester kan kräva uppdatering om kv-* selectors finns i pytest-asserts
+
+## Avvisade alternativ
+
+Option C (lyft .kv-row/.kv-key/.kv-value till paketet som alias för
+flat-konvention): avvisad per ADR 0009 (no-flat-components-css).
+Sprint 5 MADR 0009 etablerade att Ekonoms ursprungliga flat-namn
+ersätts med generaliserade BEM-namn (.kv-list__item) i paketet. Att
+åter-introducera flat-namn skulle åter-öppna ADR 0009 utan ny
+arkitektonisk motivering.
+
+## Sprint 6-leverabel
+
+Sprint 6 fas 4 raderar dead kv-delar (.kv-list li.kv-strong/-sub/
+-divider/-budget-row, .kv-budget-header, .kv-budget-body - 0
+template-träffar) men behåller .kv-list, .kv-list li, .kv-row,
+.kv-key, .kv-value tills denna MADR genomförs.