@klodd/ds 3.9.1 → 3.10.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/css/components/kv-list.css

@@ -9,6 +9,8 @@
 
    Element:
      .kv-list__item     - en rad (justify-content: space-between)
+     .kv-list__key      - vanster-segment (label, kan innehalla chip/svg)
+     .kv-list__value    - hoger-segment (varde, tabular-nums)
      .kv-budget-header  - rubrik-rad for budget-expandering
                           (compound-block per regel 11)
      .kv-budget-body    - expanderat innehall (compound-block)
@@ -38,6 +40,23 @@
   color: var(--text-subtle);
 }
 
+.kv-list__key {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  flex: 1;
+  min-width: 0;
+}
+
+.kv-list__value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  flex-shrink: 0;
+  color: var(--text-default);
+  font-variant-numeric: tabular-nums;
+}
+
 .kv-list__item--strong {
   color: var(--text-default);
   font-weight: var(--fw-medium);

package/package.json

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

@@ -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`)
@@ -190,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`)
 
@@ -273,7 +273,7 @@ För varje entry gäller:
 
 ### 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)
+- **Element:** `.kv-list__item`, `.kv-list__key`, `.kv-list__value`, `.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`)