@klodd/ds 3.19.2 → 3.20.0

package/css/components/form.css

@@ -33,10 +33,10 @@
 }
 
 .form-section__title {
-  font-size: var(--fs-10);
+  /* 2026-05-13: sentence-case. Tidigare uppercase + 0.12em tracker. */
+  font-size: var(--fs-11);
   font-weight: var(--fw-medium);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  letter-spacing: var(--ls-tight);
   color: var(--text-muted);
   margin: 0 0 var(--space-12);
   padding-bottom: var(--space-8);

package/css/components/hub-card.css

@@ -98,11 +98,13 @@
 }
 
 .hub-category {
+  /* 2026-05-13: sentence-case. Tidigare uppercase + 0.08em letter-
+     spacing, men matchar nu hero__label-konventionen ("Mitt" istallet
+     for "MITT"). Hierarki via font-size + weight + color. */
   font-size: var(--fs-11);
   font-weight: var(--fw-medium);
   color: var(--text-muted);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  letter-spacing: var(--ls-tight);
   margin: var(--space-20) 0 var(--space-8);
   padding: 0 var(--space-4);
 }

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)
@@ -21,21 +21,30 @@
      --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 sa templates kan skriva <li><span>label</span><span>value</span></li>
-   utan BEM-klasser. Undantag: --budget och --divider behaller block-
-   display sa de kan stacka kv-budget-header + kv-budget-body alternativt
-   rendera en separator-linje.
+   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.
-   :not()-filter sa --budget och --divider behaller egen layout. */
+   :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;
@@ -43,8 +52,6 @@
   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. */
@@ -59,7 +66,8 @@
   white-space: nowrap;
 }
 
-/* Sista barnet (varde) krymper inte + tabular-nums for siffer-alignment. */
+/* 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 {
@@ -75,7 +83,7 @@
 
 .kv-list__item--sub {
   font-size: var(--fs-11);
-  color: var(--text-subtle);
+  /* color arvs (text-subtle fran .kv-list) */
 }
 
 .kv-list__item--divider {
@@ -88,11 +96,14 @@
 .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). Egen flex-regel sa
-   den inte kollapsar fran --budget's block-display. */
+   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;
@@ -130,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/css/components/panel.css

@@ -17,10 +17,11 @@
 }
 
 .panel__title {
-  font-size: var(--fs-10);
+  /* 2026-05-13: sentence-case. Tidigare uppercase + xl-tracker.
+     fs-10 → fs-11 sa "Installningar" kanns lasbar utan caps-boost. */
+  font-size: var(--fs-11);
   font-weight: var(--fw-medium);
-  letter-spacing: var(--ls-tracker-xl, 0.12em);
-  text-transform: uppercase;
+  letter-spacing: var(--ls-tight);
   color: var(--text-muted);
   margin: 0 0 var(--space-12);
 }

package/css/components/sheet-content.css

@@ -23,10 +23,10 @@
    ==== TITLE + DESCRIPTION
    ================================================================ */
 .sheet__title {
+  /* 2026-05-13: sentence-case. Tidigare uppercase + 0.04em tracker. */
   font-size: var(--fs-13);
   font-weight: var(--fw-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  letter-spacing: var(--ls-tight);
   color: var(--text-muted);
   margin: 0 0 var(--space-8);
 }

package/package.json

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