@klodd/ds 3.5.0 → 3.5.2

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,31 @@ 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.2 - 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).
+v3.5.2 rattade .panel--attention__pill (felaktig BEM) till .panel__pill +
+context-styling via .panel--attention .panel__pill.
+ds/components.css raderingen i Ekonom rollback:ad samma kvall efter audit -
+template-migration (sprint C fas 2) ar nasta steg.)

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,31 @@
   color: var(--warning);
 }
 
+/* Pill-element inom panel - generisk, neutral default. Anvands for
+   count-badges, status-indikatorer i panel-headers. v3.5.2 (rattad
+   fran v3.5.1 .panel--attention__pill till korrekt BEM). */
+.panel__pill {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 var(--space-10);
+  background: var(--surface-default);
+  color: var(--text-muted);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Context-styling: pill inom attention-panel arver warning-fargschema. */
+.panel--attention .panel__pill {
+  background: var(--warning-dim);
+  color: var(--warning);
+  border-color: var(--warning-border);
+}
+
 .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.5.0",
-  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.0 tar bort LEGACY ALIASES (alla token-call-sites migrerade) och flyttar overlay-tints till egen sektion. Breaking: --accent/--bg-base/--text-primary/--accent-dim/--accent-hover/--accent-link*/--card-bg-elevated/--shadow-float/--bg-sunken/--radius-xs..4xl/--radius-pill borttagna - använd new tokens. Plus exclude-fält i CLI (klodd-ds.json) för app-specifika exkluderingar.",
+  "version": "3.5.2",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.2 (2026-05-08): rattade .panel--attention__pill (felaktig blandad modifier-element-BEM) till .panel__pill med context-styling via .panel--attention .panel__pill. Stricter BEM-konvention.",
   "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