@klodd/ds 3.4.5 → 3.5.1

package/SKILL.md

@@ -7,7 +7,8 @@ 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,
-33+ komponenter, konsumeras av Jubb och Ekonom. Fler appar planerade.
+34+ 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").
 
 ## Läs i denna ordning
@@ -76,4 +77,29 @@ på push och PR.
 Läs relevant ADR. Täcks frågan inte av något ADR — flagga det explicit:
 "Jag ser inget beslut på detta — ska vi skapa ett i references/05-open-decisions/?"
 
-Updated: 2026-05-08 (matchar @klodd/ds 3.4.1)
+## Distribution
+
+Källan är `~/dev/klodd-ds/` (committad i git, synkas mellan maskiner).
+Skillen aktiveras via symlink på varje maskin - inga kopior i app-repos.
+
+**Mac:**
+```bash
+mkdir -p ~/.claude/skills/
+ln -s ~/dev/klodd-ds ~/.claude/skills/klodd-ds
+```
+
+**Windows:**
+```cmd
+mklink /D %USERPROFILE%\.claude\skills\klodd-ds %USERPROFILE%\dev\klodd-ds
+```
+
+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-08 (matchar @klodd/ds 3.5.1 - sprint C fas 1: 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), och utokningar i panel/setting-row/chip).
+ds/components.css raderingen i Ekonom rollback:ad samma kvall efter audit -
+template-migration (sprint C fas 2) ar nasta steg.)

package/bin/sync.js

@@ -2,7 +2,11 @@
 /* @klodd/ds sync - kopierar paketets CSS och JS till app-repot.
  * Kör: npx @klodd/ds sync
  * Förutsätter att CWD är app-repots rot.
- * Läser cssTarget/jsTarget från klodd-ds.json i CWD, eller använder default.
+ * Läser cssTarget/jsTarget/exclude från klodd-ds.json i CWD, eller använder default.
+ *
+ * exclude-fältet (v3.5.0+) är en lista av relativa fil-paths under css/ eller
+ * js/ som hoppas över vid kopiering. Användbart när en app inte konsumerar en
+ * komponent som finns i paketet (t.ex. apps/ekonom.css i Jubbs repo).
  *
  * Cross-platform via fs.cpSync (Node 16.7+) - inte POSIX cp -r. */
 'use strict';
@@ -17,17 +21,39 @@ const jsSource = path.join(pkgDir, 'js');
 const configPath = path.join(process.cwd(), 'klodd-ds.json');
 const config = fs.existsSync(configPath)
   ? JSON.parse(fs.readFileSync(configPath, 'utf8'))
-  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds' };
+  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds', exclude: [] };
 
 const cssTarget = path.join(process.cwd(), config.cssTarget);
 const jsTarget = path.join(process.cwd(), config.jsTarget);
+const exclude = new Set(config.exclude || []);
 
 fs.mkdirSync(cssTarget, { recursive: true });
 fs.mkdirSync(jsTarget, { recursive: true });
 
-fs.cpSync(cssSource, cssTarget, { recursive: true });
+function copyDirFiltered(srcRoot, dstRoot, kind) {
+  const stack = [{ abs: srcRoot, rel: '' }];
+  while (stack.length) {
+    const { abs, rel } = stack.pop();
+    for (const entry of fs.readdirSync(abs, { withFileTypes: true })) {
+      const childAbs = path.join(abs, entry.name);
+      const childRel = rel ? path.posix.join(rel, entry.name) : entry.name;
+      const excludeKey = `${kind}/${childRel}`;
+      if (exclude.has(excludeKey) || exclude.has(childRel)) continue;
+      const childDst = path.join(dstRoot, childRel);
+      if (entry.isDirectory()) {
+        fs.mkdirSync(childDst, { recursive: true });
+        stack.push({ abs: childAbs, rel: childRel });
+      } else if (entry.isFile()) {
+        fs.copyFileSync(childAbs, childDst);
+      }
+    }
+  }
+}
+
+copyDirFiltered(cssSource, cssTarget, 'css');
 if (fs.existsSync(jsSource)) {
-  fs.cpSync(jsSource, jsTarget, { recursive: true });
+  copyDirFiltered(jsSource, jsTarget, 'js');
 }
 
-console.log(`OK @klodd/ds synkad till ${config.cssTarget} och ${config.jsTarget}`);
+const excludedCount = exclude.size > 0 ? ` (${exclude.size} excluderade)` : '';
+console.log(`OK @klodd/ds synkad till ${config.cssTarget} och ${config.jsTarget}${excludedCount}`);

package/bin/verify.js

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 /* @klodd/ds verify - diff:ar committade DS-filer mot paket-källan.
  * Kör i CI: npx @klodd/ds verify
- * Fail:ar med exit code 1 om drift detekteras. */
+ * Fail:ar med exit code 1 om drift detekteras.
+ *
+ * exclude-fältet (v3.5.0+) i klodd-ds.json hoppas över vid diff. */
 'use strict';
 
 const fs = require('fs');
@@ -12,7 +14,9 @@ const pkgDir = path.dirname(require.resolve('@klodd/ds/package.json'));
 const configPath = path.join(process.cwd(), 'klodd-ds.json');
 const config = fs.existsSync(configPath)
   ? JSON.parse(fs.readFileSync(configPath, 'utf8'))
-  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds' };
+  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds', exclude: [] };
+
+const exclude = new Set(config.exclude || []);
 
 function hashFile(filePath) {
   return crypto.createHash('sha256')
@@ -27,7 +31,7 @@ function listFilesRec(dir) {
     const { abs, rel } = stack.pop();
     for (const entry of fs.readdirSync(abs, { withFileTypes: true })) {
       const childAbs = path.join(abs, entry.name);
-      const childRel = rel ? path.join(rel, entry.name) : entry.name;
+      const childRel = rel ? path.posix.join(rel, entry.name) : entry.name;
       if (entry.isDirectory()) stack.push({ abs: childAbs, rel: childRel });
       else if (entry.isFile()) out.push(childRel);
     }
@@ -35,11 +39,13 @@ function listFilesRec(dir) {
   return out;
 }
 
-function diffDirs(sourceDir, targetRel) {
+function diffDirs(sourceDir, targetRel, kind) {
   const drifted = [];
   if (!fs.existsSync(sourceDir)) return drifted;
   const targetAbs = path.join(process.cwd(), targetRel);
   for (const file of listFilesRec(sourceDir)) {
+    const excludeKey = `${kind}/${file}`;
+    if (exclude.has(excludeKey) || exclude.has(file)) continue;
     const src = path.join(sourceDir, file);
     const tgt = path.join(targetAbs, file);
     if (!fs.existsSync(tgt)) {
@@ -51,8 +57,8 @@ function diffDirs(sourceDir, targetRel) {
   return drifted;
 }
 
-const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget);
-const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget);
+const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget, 'css');
+const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget, 'js');
 const allDrift = [...cssDrift, ...jsDrift];
 
 if (allDrift.length > 0) {
@@ -62,5 +68,6 @@ if (allDrift.length > 0) {
   process.exit(1);
 }
 
-console.log('OK: alla DS-filer matchar @klodd/ds-paketet.');
+const excludedCount = exclude.size > 0 ? ` (${exclude.size} excluderade fran kontroll)` : '';
+console.log(`OK: alla DS-filer matchar @klodd/ds-paketet${excludedCount}.`);
 process.exit(0);

package/css/10-semantic.css

@@ -409,98 +409,14 @@
 
 
 /* ================================================================
-   ==== LEGACY ALIASES
-   Bakatkompat-skikt sa befintliga komponenter inte krasar under
-   migration. Mappar gamla namn mot nya semantic tokens.
-
-   Migration sker gradvis: nar en komponent rors, byt fran legacy-namn
-   till nytt semantic-namn. Behall denna sektion tills alla call-sites
-   ar migrerade. Da kan den raderas och DECISIONS.md uppdateras.
+   ==== OVERLAY TINTS
+   Transparenta tints för drag-overlays, hover-states på dark surfaces
+   och liknande där en alpha-pixel-shift räcker. Inte permanenta
+   surface-nivåer (de ligger i SURFACES-sektionen ovan).
    ================================================================ */
 :root {
-  /* Surfaces (gamla overlay-skala) -> mappa mot nya neutral-stegen. */
   --surface-faint:  color-mix(in oklch, white 2%, transparent);
   --surface-subtle: color-mix(in oklch, white 4%, transparent);
   --surface-medium: color-mix(in oklch, white 8%, transparent);
   --surface-strong: color-mix(in oklch, white 12%, transparent);
-
-  /* Bakgrunder - gamla bg-* mappas till nya surface-*. */
-  --bg-sunken:  var(--surface-sunken);
-  --bg-base:    var(--surface-page);
-  --bg-surface: var(--surface-raised);
-  --bg-raised:  var(--surface-raised);
-  --bg-hover:   var(--surface-hover);
-
-  /* Text - gamla text-primary/secondary/tertiary/faint. */
-  --text-primary:   var(--text-default);
-  --text-secondary: var(--text-subtle);
-  --text-tertiary:  var(--text-muted);
-  --text-faint:     var(--text-disabled);
-
-  /* Accent - gamla --accent (singular) mappas mot nya --accent-9.
-     --accent-dim/-border foljde gamla 20%/40%-konventionen, mappas
-     nu mot Radix-skalans steg 3 (subtil) och 6 (border-emphasis). */
-  --accent:           var(--accent-9);
-  --accent-hover:     var(--accent-10);
-  --accent-strong:    var(--accent-9);
-  --accent-secondary: var(--accent-9);
-  --accent-dim:       var(--accent-a3);
-  --accent-border:    var(--accent-a6);
-
-  /* Accent-link - gamla cirkelknapps-tokens. Mappas mot accent-systemet.
-     Gamla 10/20/40%-stegen mappas mot nya Radix-stegen 2/3/6. */
-  --accent-link:              var(--accent-text);
-  --accent-link-bg:           var(--accent-a2);
-  --accent-link-bg-hover:     var(--accent-a3);
-  --accent-link-border:       var(--accent-a3);
-  --accent-link-border-hover: var(--accent-a6);
-
-  /* Audit-aliaser fran 2026-05-07 - ofta refererade utan att vara definierade. */
-  --text:        var(--text-default);
-  --border:      var(--border-default);
-  --surface-2:   var(--surface-default);
-  --surface-3:   var(--surface-raised);
-  --accent-rgba: var(--accent-a3);
-
-  /* Radius - gamla t-shirt-namn mappas mot nya pixel-numeriska. */
-  --radius-xs:   var(--radius-2);
-  --radius-sm:   var(--radius-4);
-  --radius-md:   var(--radius-6);
-  --radius-lg:   var(--radius-12);
-  --radius-xl:   var(--radius-14);
-  --radius-2xl:  var(--radius-16);
-  --radius-3xl:  var(--radius-20);
-  --radius-4xl:  var(--radius-24);
-  --radius-pill: var(--radius-full);
-
-  /* Font-weight: --fw-semibold borttagen 2026-05-07 per 400/500-policy.
-     Aktiva call-sites bytte till var(--fw-medium) explicit. Se DECISIONS.md. */
-
-  /* Kategori-paletter (Ekonom-only). Behalls for shared-tokens-paritet
-     med Ekonom-repot, oanvanda i Jubb. */
-  --primitive-cat-mat:    color-mix(in oklch, var(--purple-9) 60%, transparent);
-  --primitive-cat-el:     oklch(0.72 0.135 245);
-  --primitive-cat-vatten: oklch(0.78 0.110 200);
-  --primitive-cat-avgift: var(--green-9);
-  --primitive-cat-noje:   oklch(0.72 0.150 350);
-  --primitive-cat-amort:  oklch(0.72 0.135 160);
-  --primitive-cat-ranta:  oklch(0.72 0.150 50);
-  --primitive-cat-privat: var(--gray-9);
-
-  --cat-mat:         color-mix(in oklch, var(--purple-9) 15%, transparent);
-  --cat-mat-icon:    var(--primitive-cat-mat);
-  --cat-el:          color-mix(in oklch, var(--blue-9) 15%, transparent);
-  --cat-el-icon:     var(--primitive-cat-el);
-  --cat-vatten:      color-mix(in oklch, oklch(0.78 0.110 200) 15%, transparent);
-  --cat-vatten-icon: var(--primitive-cat-vatten);
-  --cat-avgift:      color-mix(in oklch, var(--green-9) 15%, transparent);
-  --cat-avgift-icon: var(--primitive-cat-avgift);
-  --cat-noje:        color-mix(in oklch, oklch(0.72 0.150 350) 15%, transparent);
-  --cat-noje-icon:   var(--primitive-cat-noje);
-  --cat-amortering:  color-mix(in oklch, oklch(0.72 0.135 160) 15%, transparent);
-  --cat-amort-icon:  var(--primitive-cat-amort);
-  --cat-ranta:       color-mix(in oklch, oklch(0.72 0.150 50) 15%, transparent);
-  --cat-ranta-icon:  var(--primitive-cat-ranta);
-  --cat-privat:      color-mix(in oklch, var(--gray-9) 12%, transparent);
-  --cat-privat-icon: var(--primitive-cat-privat);
 }

package/css/apps/ekonom.css

@@ -26,9 +26,7 @@
 
      Konvention: --surface-raised = appens <color>-2. Gäller alla
      Klodd-appar (Jubb -> blue-2, Ekonom -> plum-2). Korten ligger
-     subtilt over page-bakgrunden utan att bli för ljus. Tidigare
-     använde Ekonom --plum-2-5 (mellanvarde) - nu linjerat med
-     samma regel som Jubb. */
+     subtilt över page-bakgrunden utan att bli för ljusa. */
   --surface-page:    var(--plum-1);   /* #181118 */
   --surface-default: var(--plum-2);   /* #201320 */
   --surface-raised:  var(--plum-2);   /* #201320 - kort, paneler */

package/css/base/typography.css

@@ -125,3 +125,61 @@
 .text-on-accent {
   color: var(--text-on-accent);
 }
+
+
+/* ================================================================
+   ==== FOREMAN-VARIANTER (v3.5.1, 2026-05-08)
+   Tillagda fran Ekonoms ds/components.css som flyttades till paketet
+   nar sprint C-migration paboorjades. Generiska namn med semantic
+   tokens.
+   ================================================================ */
+
+/* Smaa metadata-text under content (citations, byline, helptext).
+   Skiljer sig fran .text-meta genom explicit letter-spacing for
+   lasbarhet pa 11px. */
+.text-caption {
+  font-size: var(--fs-11);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-base);
+  letter-spacing: 0.01em;
+  color: var(--text-muted);
+}
+
+/* Mycket liten uppercase-tracker (10px). Anvands for category-rubriker,
+   meta-info ovanfor titel etc. Liknande tracking som .heading-4 men
+   mindre. */
+.text-tiny {
+  font-size: var(--fs-10);
+  font-weight: var(--fw-medium);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* Inline-numerik med tabular-nums (14px). Default-storlek for siffror
+   inom panel-titlar, setting-row-amounts, kategori-totaler. */
+.text-num {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-snug);
+  letter-spacing: -0.015em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Display-numerik (32px). Anvands for stora siffror i kort/panels.
+   Komposition: <span class="text-num text-num--display">. */
+.text-num--display {
+  font-size: var(--fs-32);
+  line-height: var(--lh-tight);
+  letter-spacing: -0.02em;
+}
+
+/* Color-aliaser - foljer paketets befintliga .text-on-accent-konvention.
+   Anvands for inline emphasis i text-block. */
+.text-positive {
+  color: var(--positive);
+}
+
+.text-warning {
+  color: var(--warning);
+}

package/css/components/button.css

@@ -165,6 +165,39 @@
 }
 
 
+/* ================================================================
+   ==== BLOCK-MODIFIER (v3.5.1)
+   Full-bredd-knapp for sheet-actions, danger-block, primary-cta i
+   form-flode. Komponerar med variant-modifiers (.btn--primary,
+   .btn--danger, .btn--add).
+   ================================================================ */
+.btn--block {
+  display: block;
+  width: 100%;
+}
+
+
+/* ================================================================
+   ==== ADD-MODIFIER (v3.5.1)
+   "Lagg till"-knapp med dashed border. Signalerar tomt slot.
+   Komposition: .btn .btn--add .btn--block (full-bredd add-knapp).
+   ================================================================ */
+.btn--add {
+  background: transparent;
+  color: var(--text-subtle);
+  border-color: var(--text-disabled);
+  border-style: dashed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .btn--add:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+    border-color: var(--text-muted);
+  }
+}
+
+
 /* ================================================================
    ==== LOADING-STATE
    Doljer text och visar spinner via ::after. Behaller knappens

package/css/components/chip.css

@@ -65,6 +65,20 @@
   white-space: nowrap;
 }
 
+/* Text-element inom chip-list-item. Tight line-height for visual
+   centering med padding. v3.5.1. */
+.chip-list__text {
+  line-height: 1;
+}
+
+/* Form-element inom chip-list (when item ar inline-form med delete-btn).
+   Default UA-margin nollstalls. v3.5.1. */
+.chip-list__form {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+}
+
 .chip-list__delete {
   display: inline-flex;
   align-items: center;

package/css/components/panel.css

@@ -34,6 +34,17 @@
 }
 .panel__title-row .panel__title { margin-bottom: 0; }
 
+/* Likt .panel__title-row men med baseline-alignment (titel + meta-text
+   i hoger kolumn pa olika fontsizes ska vila pa samma baslinje).
+   v3.5.1. */
+.panel__header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: var(--space-12);
+}
+.panel__header-row .panel__title { margin-bottom: 0; }
+
 .panel__title-meta {
   font-size: var(--fs-12);
   color: var(--text-muted);
@@ -72,6 +83,23 @@
   color: var(--warning);
 }
 
+/* Pill inom attention-panel (t.ex. count "2 att atgarda"). Anvander
+   warning-tokens for konsekvens med .panel--attention. v3.5.1. */
+.panel--attention__pill {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 var(--space-10);
+  background: var(--warning-dim);
+  color: var(--warning);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  border: 1px solid var(--warning-border);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
 .panel__step-row {
   display: flex;
   align-items: center;

package/css/components/setting-row.css

@@ -136,6 +136,13 @@
   white-space: nowrap;
 }
 
+/* Wrapper for <form>-element som hostar setting-rows (single-row-form
+   med per-field POST). Default UA-margin nollstalls. v3.5.1. */
+.setting-row__form {
+  display: block;
+  margin: 0;
+}
+
 
 /* ================================================================
    ==== TOGGLE (iOS-stil)

package/css/components/sheet-content.css

@@ -0,0 +1,399 @@
+/* ================================================================
+   components/sheet-content.css
+   Sheet-innehallets typografi + form-monster. Kompletterar
+   .sheet/.sheet-handle/.sheet-body/.sheet-divider i overlay.css.
+
+   Generiska BEM-klasser - inga domain-namn (cat → item, tx →
+   description, excluded → subform). Apparna binder bara data
+   (kategori-tokens etc) via app-domain-CSS.
+
+   Strukturer:
+   - Title + description (sektionsrubrik + kontext-text)
+   - Form (vertikal stack med fields)
+   - Field (label + input-wrap eller standalone-input + hint)
+   - Items grid (selectable items 2-kol)
+   - Actions (multi-step button-grid)
+   - Toggle (boolean-field row)
+   - Subform (sub-block med border-top)
+   - Action-buttons (save/delete fixed sizes)
+   ================================================================ */
+
+
+/* ================================================================
+   ==== TITLE + DESCRIPTION
+   ================================================================ */
+.sheet__title {
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 0 0 var(--space-8);
+}
+
+.sheet__description {
+  font-size: var(--fs-14);
+  color: var(--text-default);
+  margin: 0 0 var(--space-18);
+  word-break: break-word;
+}
+
+
+/* ================================================================
+   ==== FORM-STRUKTUR
+   .sheet__form ar vertikal flex-stack med 16px gap mellan fields.
+   .sheet__form--inline tar bort margin sa <form> kan vara inline.
+   .sheet__field ar per-field-container (label + input + hint).
+   ================================================================ */
+.sheet__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+  margin: 0;
+}
+
+.sheet__form--inline {
+  margin: 0;
+}
+.sheet__form--inline button {
+  width: 100%;
+}
+
+.sheet__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.sheet__field-label {
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.sheet__field-label--upper {
+  font-size: var(--fs-11);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-6);
+}
+
+
+/* ================================================================
+   ==== INPUTS
+   Input-wrap (med focus-within-state) ger sprint-65-ramad input.
+   Standalone-input ar fristaaende variant utan wrapper.
+   ================================================================ */
+.sheet__input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-12);
+  height: 48px;
+  transition: background var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.sheet__input-wrap:focus-within {
+  outline: 2px solid var(--accent-9);
+  outline-offset: -1px;
+  background: var(--surface-default);
+  border-color: transparent;
+}
+
+.sheet__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--space-14);
+  background: transparent;
+  border: 0;
+  color: var(--text-default);
+  font-size: var(--fs-17);
+  font-family: inherit;
+  outline: none;
+}
+.sheet__input::placeholder {
+  color: var(--text-disabled);
+}
+
+.sheet__input--select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 14px;
+  padding-right: var(--space-32);
+  color: var(--text-muted);
+}
+
+.sheet__input--standalone {
+  display: block;
+  width: 100%;
+  padding: var(--space-12) var(--space-14);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-12);
+  color: var(--text-default);
+  font-size: var(--fs-17);
+  font-family: inherit;
+  outline: none;
+  margin-top: var(--space-6);
+  transition: background var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.sheet__input--standalone:focus {
+  outline: 2px solid var(--accent-9);
+  outline-offset: -1px;
+  background: var(--surface-default);
+  border-color: transparent;
+}
+
+.sheet__suffix {
+  padding: 0 var(--space-14) 0 0;
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+
+/* ================================================================
+   ==== HINT-TEXT
+   .sheet__hint - default 12px text-muted med margin
+   .sheet__hint--compact - 11px utan margin (sprint 65 in-form-hint)
+   .is-error - rod variant for validation-fel
+   ================================================================ */
+.sheet__hint {
+  font-size: var(--fs-12);
+  color: var(--text-muted);
+  margin: var(--space-8) 0 var(--space-16);
+}
+.sheet__hint em {
+  font-style: italic;
+  color: var(--text-subtle);
+}
+
+.sheet__hint--compact {
+  font-size: var(--fs-11);
+  margin: 0;
+  line-height: var(--lh-snug);
+}
+
+.sheet__hint.is-error,
+.sheet__hint--compact.is-error {
+  color: var(--accent-danger);
+}
+
+
+/* ================================================================
+   ==== ITEMS GRID (selectable items 2-kol)
+   Generic monster for kategori-val, alternativ-val osv. Apparna
+   binder data via egna domain-klasser pa item-elementet.
+   ================================================================ */
+.sheet__item-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-8);
+}
+
+.sheet__item {
+  display: block;
+  width: 100%;
+  padding: var(--space-12) var(--space-14);
+  background: var(--surface-default);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-14);
+  color: var(--text-default);
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  font-family: inherit;
+  cursor: pointer;
+  text-align: center;
+  transition: background var(--dur-fast) var(--ease-spring-snappy);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .sheet__item:hover {
+    background: var(--surface-hover);
+  }
+}
+
+.sheet__item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.sheet__item:active {
+  transform: scale(0.985);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.sheet__item--primary {
+  background: var(--accent-9);
+  color: var(--text-on-accent);
+  border-color: var(--accent-9);
+}
+@media (hover: hover) and (pointer: fine) {
+  .sheet__item--primary:hover {
+    background: var(--accent-10);
+    border-color: var(--accent-10);
+  }
+}
+
+.sheet__item--reset {
+  grid-column: 1 / -1;
+  margin-top: var(--space-6);
+  background: transparent;
+  color: var(--text-subtle);
+  border-style: dashed;
+}
+
+.sheet__item--back {
+  grid-column: 1 / -1;
+  margin-bottom: var(--space-4);
+  background: transparent;
+  color: var(--text-subtle);
+  border-style: dashed;
+}
+
+
+/* ================================================================
+   ==== MULTI-STEP ACTIONS-GRID
+   2-kol button-grid for steg-N actions (t.ex. Tillbaka + Spara).
+   ================================================================ */
+.sheet__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-8);
+}
+
+
+/* ================================================================
+   ==== CONFIRMATION
+   "Du valde X"-text fore step-2-actions.
+   ================================================================ */
+.sheet__confirm {
+  font-size: var(--fs-14);
+  color: var(--text-subtle);
+  margin: 0 0 var(--space-14);
+}
+.sheet__confirm strong {
+  color: var(--text-default);
+  font-weight: var(--fw-medium);
+}
+
+
+/* ================================================================
+   ==== TOGGLE (boolean field)
+   Row-layout for label + native checkbox/toggle.
+   ================================================================ */
+.sheet__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-10);
+  cursor: pointer;
+  padding: var(--space-6) 0;
+}
+
+.sheet__toggle-label {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+}
+
+.sheet__toggle-input {
+  width: 22px;
+  height: 22px;
+  accent-color: var(--accent-9);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+
+/* ================================================================
+   ==== SUBFORM (sub-block med border-top divider)
+   Anvands for excluded-toggle-form etc i sheets med flera
+   logiska delar.
+   ================================================================ */
+.sheet__subform {
+  margin: var(--space-18) 0 0;
+  padding-top: var(--space-14);
+  border-top: 1px solid var(--border-default);
+}
+
+
+/* ================================================================
+   ==== ACTION-BUTTONS (fixed sizes for sheet-context)
+   .sheet__btn--save  - primary 48px full-bredd accent-9
+   .sheet__btn--delete - sekundar destructive 44px transparent
+   Tightly coupled to sheet-form-sizing - inte generiska .btn.
+   ================================================================ */
+.sheet__btn--save {
+  display: block;
+  width: 100%;
+  height: 48px;
+  margin: var(--space-8) 0 0;
+  background: var(--accent-9);
+  color: var(--text-on-accent);
+  border: 0;
+  border-radius: var(--radius-14);
+  font-family: inherit;
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-spring-snappy);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.sheet__btn--save:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .sheet__btn--save:not(:disabled):hover {
+    background: var(--accent-10);
+  }
+}
+
+.sheet__btn--save:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.sheet__btn--delete {
+  display: block;
+  width: 100%;
+  height: 44px;
+  margin: var(--space-8) 0 0;
+  background: transparent;
+  color: var(--accent-danger);
+  border: 0;
+  border-radius: var(--radius-14);
+  font-family: inherit;
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-spring-snappy);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .sheet__btn--delete:hover {
+    background: var(--accent-danger-dim);
+  }
+}
+
+.sheet__btn--delete:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/css/index.css

@@ -62,3 +62,6 @@
 /* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
 @import './components/colored-row.css';
 @import './components/colored-bar.css';
+
+/* v3.5.1 - sheet-content (sprint-65 form-monster, generiska BEM-namn) */
+@import './components/sheet-content.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@klodd/ds",
-  "version": "3.4.5",
-  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.4.5 tar bort --plum-2-5-token (oanvänd sedan v3.4.2 när surface-raised flyttade till plum-2).",
+  "version": "3.5.1",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.1 (2026-05-08): nya foreman-typografi-klasser (.text-caption/-tiny/-num/-num--display/-positive/-warning), nya sheet-content-komponent (24 BEM-klasser för Sprint-65-pattern), nya btn-modifiers (--block, --add), och nya elements i panel.css (.panel__header-row, .panel--attention__pill), setting-row.css (.setting-row__form), chip.css (.chip-list__text, .chip-list__form). Sektion C av sprint-C-migration (paket-utvidgning, ej template-migration).",
   "main": "css/index.css",
   "bin": {
     "klodd-ds": "./bin/klodd-ds.js"

package/references/03-quality-bar.md

@@ -223,16 +223,21 @@ Varje interaktiv komponent SKA ha:
 - Linear, Vercel och liknande modern SaaS anvander samma stack
 
 
-## 12. Audit-aliaser halls levande tills hela migration genomford
+## 12. Bara nya semantic token-namn
 
 **Hur man foljer:**
-- Gamla token-namn (--text-primary, --bg-base, --accent-dim) finns kvar
-  i 10-semantic.css's "LEGACY ALIASES"-block
-- Komponent-CSS som migrerats anvander nya semantic-namn
-  (--text-default, --surface-page, --accent-a3)
-- Tar INTE bort legacy-aliaser forrans alla call-sites migrerats
+- Anvand bara nya semantic-namn: `--text-default/-subtle/-muted/-disabled`,
+  `--surface-page/-default/-raised/-overlay/-hover/-active/-sunken`,
+  `--accent-soft/-9/-10/-text/-a10/-a20/-a40` osv.
+- Gamla namn (--text-primary, --bg-base, --accent-dim, --fw-semibold,
+  --radius-sm/md/lg/xl/2xl/3xl/4xl) ar **borttagna** i v3.5.0
+  (2026-05-08). Ingen alias-bro langre.
 
 **Varfor:**
-- Migrations-bro: app-CSS som inte uppdaterats fortsatter funka
-- Big-bang-migrationer ar riskabla - per-template-migration ar saker
-- Open punkter dokumenterade i `05-open-decisions/`
+- En standard, en mental modell. Inga "vilket namn ska jag anvanda?"-
+  fragor i koden.
+- Komponenter som referensade gamla namn migrerades i 2026-05-07/08-
+  sprintarna innan aliasen raderades. Inga kvarstaende call-sites.
+
+Migrations-historiken finns dokumenterad i ADR 0008 (CLOSED) och
+ADR 0009 (locked).

package/references/04-locked-decisions/0009-no-flat-components-css.md

@@ -0,0 +1,94 @@
+# 0009 - Inga flat-fil-aggregat av komponenter (`ds/components.css` förbjudet)
+
+## Status
+Locked.
+
+## Context
+
+Innan 2026-05-08 hade både Jubb och Ekonom en flat-fil
+`app/static/css/ds/components.css` per repo. Filen aggregerade
+paketets komponentstyling med app-specifik domain-CSS i en stor
+samlingsfil.
+
+Filen var ett resultat av att designsystemet började som en kopierad
+samling klasser **innan** paketet flyttades till `@klodd/ds`. När
+paketet bröts ut till en egen npm-modul med `components/<x>.css`-
+filer per komponent fanns ingen tvingande mekanism att avveckla
+flat-filen.
+
+Filen växte över tid till en parallellprodukt mot paketets
+`components/`-mapp:
+
+- Dubbel-styling: samma selector definierades på två platser
+- Drift: paketet uppdaterades men flat-filen släpade efter
+- Underhållsbörda: ändring krävde uppdatering i två repos + paketet
+- Otydlig ansvarsgräns: vad är paket-styling, vad är domain?
+
+## Decision
+
+`ds/components.css` (eller motsvarande aggregat-fil) i appar är
+**förbjuden**. Appar konsumerar paketets `components/`-mapp direkt
+via `@import url("ds/components/<x>.css")` i `main.css` (eller
+motsvarande bundle-fil).
+
+App-specifik domain-CSS (kategorisystem, score-pills, app-unika
+element) lever i en tydligt namngiven domain-fil:
+
+- Jubb: `app/static/css/jubb-theme.css`
+- Ekonom: `app/static/css/ds/ekonom-domain.css`
+
+## Consequences
+
+**Bra:**
+- Paketet är enda källan för komponent-styling
+- Drift mellan paket och app är omöjlig
+- Bumpa paketversion = automatiskt nya stilar i alla konsumenter
+- Tydlig ansvarsgräns: paket = komponenter, domain-fil = app-spec
+
+**Trade-off:**
+- `main.css` får fler `@import`-rader (en per komponent). Inte ett
+  problem - browsern parallelliserar. Service Worker pre-cachar dem.
+- Ny komponent kräver `@import` i alla konsumerande appars `main.css`.
+  Acceptabelt - paketet listar komponenter i README.
+
+## Migration (genomförd 2026-05-08)
+
+Båda repos genomgick **selector-för-selector-radering**, inte big-bang:
+
+1. Klassificera varje sektion: paket-duplicat eller app-domain?
+2. Paket-duplicat raderas direkt
+3. App-domain flyttas till domain-fil
+4. När filen är tom raderas den helt
+5. `main.css` importerar paketet direkt
+
+**Big-bang-försök rollbackades direkt** vid första testet - massiv
+visuell regression (bottom-nav-blackouts, hub-card stylelöshet).
+Selector-för-selector var rätt val för att hålla appen stabil under
+migrationen.
+
+Verifiering på prod via Chrome MCP:
+- Jubb: 21 paket-imports, panel.css applierad, bottom-nav 20px
+- Ekonom: 25 nested @imports (CSSOM-rekursion), components.css = 404,
+  panel.bg = rgb(32,19,32) Plum-2, hero rendererar
+
+**Tester:** 429 pass (Jubb) + 636 pass (Ekonom), oförändrat.
+
+## Framöver
+
+Ny app som konsumerar paketet:
+1. Skapa egen domain-fil: `app/static/css/<app>-domain.css`
+2. Importera paketet direkt i `main.css` eller bundle-fil
+3. Använd `npx @klodd/ds precache` för att generera SW PRECACHE_URLS
+4. Bumpa SW-version vid varje paketuppdatering
+
+**Aldrig** skapa en flat-fil-aggregat à la `ds/components.css`.
+
+## References
+
+- Ekonom commit: `8a0611e` (refactor(ds): ds/components.css raderad)
+- Jubb commits: `cf334b5` (Block 1) + `6e0710d` (Block 2) + `d8a6c12`
+  (Block 3)
+- Ekonom STATUS.md 2026-05-08
+- Jubb STATUS.md 2026-05-08
+- ADR 0001 (three-layer-token-architecture)
+- ADR 0008 (npm-package-distribution)

package/references/05-open-decisions/{0008-legacy-token-migration.md → 0008-legacy-token-migration-CLOSED.md}

@@ -1,6 +1,23 @@
 # 0008 - Legacy token-migration och `ds/components.css`-radering - v4.0.0
 
 ## Status
+**CLOSED 2026-05-08.** Bagge stegen genomforda. Se ADR 0009 (locked)
+"Inga flat-fil-aggregat av komponenter" som ar den varande regeln
+framover.
+
+**Resultat:**
+- LEGACY ALIASES-sektionen raderad ur `10-semantic.css` i paket v3.5.0
+- `ds/components.css` raderad ur Jubb (commits cf334b5 + 6e0710d +
+  d8a6c12) och Ekonom (commit 8a0611e)
+- Bagge appar kor 100% paket-driven design via `@klodd/ds`-komponenter
+  + per-app domain-fil (`jubb-theme.css` resp. `ekonom-domain.css`)
+- 429 pass (Jubb) + 636 pass (Ekonom), oforandrat
+
+Originaltexten bevarad nedan for historik.
+
+---
+
+## Original status (innan stangning)
 Pending. Trigger: innan tredje app borjar anvanda `@klodd/ds`.
 
 ## Context