@klodd/ds 3.9.0 → 3.9.2

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/css/components/badge.css

@@ -2,6 +2,8 @@
    components/badge.css
    .badge - generisk pill med variants for status.
    .score-pill - tabular-nums-pill speciellt for relevance-scores.
+                 Kanonisk definition (chip.css duplicerade tidigare,
+                 raderad 2026-05-10).
 
    BEM-konvention med double-dash for varianter.
    ================================================================ */
@@ -72,7 +74,7 @@
   font-size: var(--fs-11);
   font-weight: var(--fw-medium);
   font-variant-numeric: tabular-nums;
-  letter-spacing: 0.01em;
+  letter-spacing: var(--ls-wide, 0.01em);
   line-height: 1.4;
   border: 1px solid transparent;
   border-radius: var(--radius-full);

package/css/components/chip.css

@@ -1,6 +1,6 @@
 /* ================================================================
    components/chip.css
-   Pills- och chips-familjen: sex fristående blocks som delar
+   Pills- och chips-familjen: fem fristående blocks som delar
    form-språket (rounded-full, kompakt padding, inline-flex).
 
    Blocks:
@@ -8,7 +8,6 @@
      .chip-list     - sibling-wrapper för chips i rad (har __item/__delete/__add)
      .brand-pill    - projekt-namn-pill i topbar
      .month-pill    - navigations-pill för månadsbyte (Ekonom)
-     .score-pill    - ratings-pill (NB: definieras även i badge.css - identiska regler)
      .install-chip  - PWA install-prompt som flyter ovan bottom-nav
 
    HTML-relationer:
@@ -17,7 +16,6 @@
 
    Modifiers:
      .chip       --accent/-positive/-negative/-warning/-faint
-     .score-pill --strong/-medium/-low
 
    .install-chip har egna BEM-element (__text/__install/__dismiss) plus
    keyframe-animation install-chip-up (respekterar prefers-reduced-motion).
@@ -208,45 +206,6 @@
 }
 
 
-/* ================================================================
-   ==== SCORE-PILL
-   Tabular-nums for sifferjustering. Modifiers: --strong/--medium/--low.
-   ================================================================ */
-.score-pill {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--fs-11);
-  font-weight: var(--fw-medium);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: var(--ls-wide, 0.01em);
-  padding: var(--space-2) var(--space-8);
-  border-radius: var(--radius-full);
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1.4;
-}
-
-.score-pill--strong {
-  color: var(--positive);
-  background: var(--positive-dim);
-  border-color: var(--positive-border);
-}
-
-.score-pill--medium {
-  color: var(--warning);
-  background: var(--warning-dim);
-  border-color: var(--warning-border);
-}
-
-.score-pill--low {
-  color: var(--text-muted);
-  background: var(--surface-default);
-  border-color: var(--border-subtle);
-}
-
-
 /* ================================================================
    ==== INSTALL-CHIP
    PWA install-prompt som flyter ovan bottom-nav.

package/package.json

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

@@ -33,7 +33,7 @@ För varje entry gäller:
 - **Tokens:** `--surface-sunken/-default`, `--accent-9`, `--accent-a3` (focus-ring), `--bg-danger` (error-state)
 
 ### badge (`badge.css`)
-- **Blocks:** `.badge`, `.score-pill` (sibling, definieras aven i `chip.css` med identiska regler)
+- **Blocks:** `.badge`, `.score-pill` (sibling, kanonisk definition)
 - **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.score-pill--strong/-medium/-low`
 - **Anvand:** Status-pills (statiska)
 - **INTE:** Klickbara chips (anvand `.chip`)
@@ -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`
@@ -191,9 +190,9 @@ För varje entry gäller:
 - **INTE:** Vanlig `<h1>` (anvand `.heading-1`)
 
 ### chip (`chip.css`)
-- **Blocks:** `.chip`, `.chip-list` (sibling-wrapper for chips i rad), `.brand-pill`, `.month-pill`, `.score-pill` (definieras aven i `badge.css`), `.install-chip` (PWA install-prompt)
+- **Blocks:** `.chip`, `.chip-list` (sibling-wrapper for chips i rad), `.brand-pill`, `.month-pill`, `.install-chip` (PWA install-prompt)
 - **Element:** `.chip-list__item`, `.chip-list__text`, `.chip-list__form`, `.chip-list__delete`, `.chip-list__add`, `.install-chip__text`, `.install-chip__install`, `.install-chip__dismiss`
-- **Modifiers:** `.chip--accent/-positive/-negative/-warning/-faint`, `.score-pill--strong/-medium/-low`
+- **Modifiers:** `.chip--accent/-positive/-negative/-warning/-faint`
 - **Anvand:** Kort-format pills med dot-prefix (status, kategori, count)
 - **INTE:** Form-inputs (anvand `.input`)
 
@@ -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.