@klodd/ds 3.19.1 → 3.19.3

package/css/components/kv-list.css

@@ -5,7 +5,7 @@
    breakdowns, statistik-paneler, settings-summaries.
 
    Blocks:
-     .kv-list           - <ul>-wrapper, nollstaller list-styling
+     .kv-list           - <ul>-wrapper, satter default color + font-size
 
    Element:
      .kv-list__item     - en rad (justify-content: space-between)
@@ -18,38 +18,45 @@
    Modifiers (pa .kv-list__item):
      --strong   - primary text + medium weight
      --sub      - secondary text + smaller font
-     --divider  - horisontell separator-rad
+     --divider  - horisontell separator-rad (block-display)
      --budget   - block-display for burndown-rad med expanderbar header
 
-   Layout-doktrin (2026-05-13): alla direkta <li>-barn av .kv-list far
-   automatiskt flex-row + space-between + ellipsis-truncation pa forsta
-   barnet. Det galler aven bare <li> utan BEM-klasser - sa templates
-   som inte explicit anvander .kv-list__item far samma rad-layout. Det
-   loser radbrytningar och fel-vansterstallning nar template skriver
-   <li><span>label</span><span>value</span></li> utan klass.
+   Layout-doktrin (2026-05-13):
+   1) .kv-list satter default color/font-size sa ALLA barn-rader ar
+      (inkl. --budget och --divider) ärver via cascade. Det loser
+      specificity-konflikten dar default-LI-rule overrode modifier-
+      reglerna.
+   2) Layout-regeln pa .kv-list > li satter bara display/padding/gap,
+      INGEN color/font-size. Modifier-reglerna (--strong, --sub) kan
+      darmed override via simple class-selectors utan specificity-hack.
+   3) Alla direkta <li>-barn far flex-row + space-between + ellipsis-
+      truncation pa forsta barnet sa templates kan skriva
+      <li><span>label</span><span>value</span></li> utan BEM-klasser.
+      Undantag: --budget och --divider behaller block-display via :not().
    ================================================================ */
 .kv-list {
   list-style: none;
   padding: 0;
   margin: 0;
+  color: var(--text-subtle);
+  font-size: var(--fs-13);
 }
 
 /* Default rad-layout for alla direkta <li>-barn + explicit .kv-list__item.
-   --budget och --divider overrider till block-display nedanfor. */
-.kv-list > li,
-.kv-list__item {
+   :not()-filter sa --budget och --divider behaller egen layout.
+   INGEN color/font-size har - arvs fran .kv-list sa modifiers kan vinna. */
+.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider),
+.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: var(--space-10);
   padding: var(--space-8) 0;
-  font-size: var(--fs-13);
-  color: var(--text-subtle);
 }
 
-/* Forsta barnet (label) trunkeras vid overflow med ellipsis.
-   display:block (override pa span) for att text-overflow ska tradgardas. */
-.kv-list > li > :first-child,
+/* Forsta barnet (label) trunkeras vid overflow med ellipsis. */
+.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider) > :first-child,
+.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) > :first-child,
 .kv-list__key {
   display: block;
   flex: 1;
@@ -59,8 +66,10 @@
   white-space: nowrap;
 }
 
-/* Andra barnet (varde) krymper inte + tabular-nums for siffer-alignment. */
-.kv-list > li > :last-child,
+/* Sista barnet (varde) krymper inte + tabular-nums for siffer-alignment.
+   color: text-default sa varde-kolumnen alltid framtrader oavsett LI-class. */
+.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider) > :last-child,
+.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) > :last-child,
 .kv-list__value {
   flex-shrink: 0;
   color: var(--text-default);
@@ -74,12 +83,9 @@
 
 .kv-list__item--sub {
   font-size: var(--fs-11);
-  color: var(--text-subtle);
+  /* color arvs (text-subtle fran .kv-list) */
 }
 
-/* Divider och budget overrider tillbaka till block-display sa
-   default-flex inte stor deras egen layout. */
-.kv-list > li.kv-list__item--divider,
 .kv-list__item--divider {
   display: block;
   border-bottom: 1px solid var(--border-subtle);
@@ -87,14 +93,17 @@
   margin: var(--space-4) 0;
 }
 
-.kv-list > li.kv-list__item--budget,
 .kv-list__item--budget {
   display: block;
   padding: 0;
+  /* color arvs (text-subtle fran .kv-list) sa Mat/Noje/Shopping-label
+     far samma farg som Boendeavgift/Amortering/Ranta. */
 }
 
 /* kv-budget-header foljer samma rad-layout som .kv-list > li
-   (label + varde med ellipsis-truncation). */
+   (label + varde med ellipsis-truncation). Egen flex-regel sa
+   den inte kollapsar fran --budget's block-display.
+   INGEN color har - arvs fran .kv-list (text-subtle). */
 .kv-budget-header {
   display: flex;
   justify-content: space-between;
@@ -132,7 +141,6 @@
   align-items: baseline;
   gap: var(--space-10);
   font-size: var(--fs-11);
-  color: var(--text-subtle);
   padding: var(--space-4) 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.19.1",
+  "version": "3.19.3",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {