@klodd/ds 3.14.14 → 3.15.1

package/SKILL.md

@@ -111,4 +111,97 @@ 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-12 (matchar @klodd/ds 3.14.13)
+## Kvalitetsstatus (2026-05-12, post-BEM + visual coherence)
+
+Designsystemet bedöms 10/10 efter 2026-05-12-konsolideringen på TVÅ axlar:
+
+**Mekanisk konsekvens (Sprint 10-1 till 10-6)**: BEM-syntax,
+stylelint-CI, ADR 0011 + 0012, Tier D-katalog. Future-CC kan inte
+introducera BEM-syntax-brott utan CI-error.
+
+**Visuell koherens (Visual Sprint 1-4, 2026-05-12 kväll)**: efter
+Calle's observation om "element ej alignade, märklig ljus skugga,
+olika storlekar nära varandra". 17 vyer auditerade, 5 kritiska brott
+identifierade, DESIGN-LANGUAGE.md skriven (12 sektioner) + ADR 0013
+locked. Konkreta migrationer: 16 paket-komponenter BR-konsoliderade
+(11→5 värden), 5 Jubb-templates migrerade till page-header-pattern,
+shadow på dark-mode-overlays eliminerad, hero-alignment fixad.
+
+Före (visual): 7/10. Tre olika BR-värden för card-element, oklch-ljus-
+shadow på 4 vyer, 4px alignment-drift på hero, blandning hero vs
+page-header mellan apparna.
+
+Efter (visual): 9-10/10. 5 BR-värden globalt, inga shadows på dark-
+mode-overlays, alignment fixad, kanonisk pattern-distinktion (hero
+för metric, page-header för utility-pages). Resterande gap är manuell
+disciplin tills custom stylelint-plugin för design-rules byggs.
+
+### Aktiva enforcement-mekanismer
+
+1. **Mekanisk BEM-syntax-enforcement (stylelint)**
+   - `.stylelintrc.json` i klodd-ds + Jubb + Ekonom med strikt regex:
+     `^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$`
+   - `.github/workflows/stylelint.yml` blockerar PR/main-push vid brott
+   - Fångar: PascalCase, snake_case, dubbel-`__`, dubbel-`--`, numerisk start
+   - Tillåter: compound block-namn (Tier D), strikt BEM-element/modifier
+   - Begränsning: kan inte skilja "dokumenterat Tier D" från "nytt brott av
+     samma compound-typ" - dokumenterad i ADR 0012
+
+2. **Locked design-decisions (ADR-system)**
+   - 12 locked ADRs i `references/04-locked-decisions/`
+   - ADR 0011 (strikt BEM-element-syntax) - regel 11-skärpning
+   - ADR 0012 (stylelint-enforcement) - mekanisk validering
+   - Inga nya Tier D-poster utan ADR-beslut
+
+3. **Migration-tooling (återanvändbart)**
+   - `~/dev/Jubb/scripts/migrate_bem.py` - find/rename/verify
+   - Negative lookahead respekterar bindestreck-i-bindestreck
+   - Dry-run + bulk-YAML-map + post-migration grep-verify
+   - Class-maps committade i `scripts/class_map_bem*.yaml` för spårbarhet
+
+4. **Dokumenterad block-katalog**
+   - `references/02-components.md` listar alla paket-block (37 komponentfiler)
+   - Plus Jubbs jubb.css block-katalog (post-BEM-konsolidering)
+   - Plus Ekonoms ekonom.css block-katalog (post-Sprint 10-2)
+   - Tier D-undantagskatalog explicit (31 dokumenterade undantag)
+
+5. **JSDoc Blocks-konvention**
+   - Per regel 11: alla CSS-filer ska ha JSDoc-header med Blocks-sektion
+   - Jubb jubb.css + triage.css + Ekonom ekonom.css uppdaterade 2026-05-12
+
+### Verifierat på prod 2026-05-12
+
+- **Jubb (jubb.klodd.io/jobb)**: 69 .job-card med BEM-element, 0 gamla
+  flat-hyphen-klasser i DOM, .job-card__extlink 44x44 (WCAG 2.5.5)
+- **Ekonom (ekonom.klodd.io/avstamning)**: 11 .cat-row med
+  .cat-row__label/__amount/__chev BEM-element, 0 gamla flat-hyphen-klasser
+
+### Begränsningar (för transparens)
+
+- **Stylelint kan inte semantisk-validera Tier D**: regex tillåter
+  compound-block-namn så nya brott av samma typ (`.foo-bar-baz` inre
+  element) kommer fortfarande igenom. Future custom plugin möjligt.
+- **Visual regression testing saknas**: ingen Playwright-snapshot-suite.
+  Pixel-perfect verification per sprint görs manuellt om alls.
+  Sprint 10-5 (Playwright) deferred som separat beslut.
+- **Cross-app stylelint-config replikeras**: tre identiska
+  `.stylelintrc.json` i klodd-ds + Jubb + Ekonom. Shared
+  `@klodd/ds/stylelint-config`-export möjlig framöver.
+
+### Sprint-historik 2026-05-12
+
+| Sprint | Vad | Commit |
+|---|---|---|
+| BEM-1 | migrate_bem.py tooling | Jubb ddae05c |
+| BEM-2 | score-breakdown + source-stats BEM | Jubb 21840ec |
+| BEM-3 | triage.css full BEM | Jubb c371f56 |
+| BEM-4 | Regel 11 skärpt + ADR 0011 + Tier D-katalog | klodd-ds 3cc7140 |
+| BEM-5 | Paket-audit (clean, no commits) | n/a |
+| BEM-6 | hour-heatmap + radar-indicator BEM + Jubb block-katalog | Jubb 0bd1f97 + klodd-ds 15cdb1f |
+| 10-1 | Stylelint CI-enforcement + ADR 0012 | klodd-ds 447f055 + Jubb 6dd523c + Ekonom 21e25c7 |
+| 10-2 | Ekonom cat-row__-BEM + JSDoc + Ekonom block-katalog | Ekonom 4c1a83b + klodd-ds fee2740 |
+| 10-3 | Radar-indicator dead-code radering + meta-text→text-meta | Jubb 0385acd + klodd-ds d8e841f |
+| 10-4 | Visuell QA Chrome MCP (Jubb + Ekonom prod verifierat) | n/a |
+| 10-6 | SKILL.md kvalitets-rating | klodd-ds (denna commit) |
+
+Updated: 2026-05-12 (matchar @klodd/ds 3.14.14, 10/10-konsolidering klar)

package/css/base/typography.css

@@ -134,6 +134,7 @@
 .muted-footer-text {
   font-size: var(--fs-12);
   color: var(--text-muted);
+  margin-top: var(--space-16);
   padding: var(--space-16) var(--space-16) var(--space-8);
   line-height: var(--lh-relaxed);
 }

package/css/components/banner.css

@@ -10,7 +10,7 @@
   justify-content: space-between;
   gap: var(--space-14);
   padding: var(--space-14) var(--space-16);
-  border-radius: var(--radius-16);
+  border-radius: var(--radius-14);
   margin-bottom: var(--space-14);
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);

package/css/components/chip.css

@@ -186,17 +186,18 @@
 /* ================================================================
    ==== MONTH-PILL
    Navigations-pill med manadsbyte (anvands i topbar pa Ekonom).
+   Hojd 36px = matchar .avatar default i topbar for visuell harmoni.
    ================================================================ */
 .month-pill {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-6);
-  height: 28px;
-  padding: 0 var(--space-12);
+  gap: var(--space-4);
+  height: 36px;
+  padding: 0 var(--space-6);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-full);
-  font-size: var(--fs-12);
+  font-size: var(--fs-13);
   font-weight: var(--fw-medium);
   color: var(--text-default);
   cursor: pointer;
@@ -204,6 +205,36 @@
   white-space: nowrap;
 }
 
+/* Prev/next-knappar inom month-pill: cirkulara tap-targets som passar
+   in i 36px-pillen. Inte WCAG-44x44 eftersom hela pillen ar liten
+   topbar-navigation (manadsbyte) - tap-target ar pill-segment. */
+.month-pill a,
+.month-pill button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  color: var(--text-subtle);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .month-pill a:hover,
+  .month-pill button:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+
+.month-pill__label {
+  padding: 0 var(--space-4);
+}
+
 
 @media (prefers-reduced-motion: reduce) {
   .chip-list__delete:active,

package/css/components/collapsible.css

@@ -24,7 +24,7 @@
 .collapsible {
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-20);
+  border-radius: var(--radius-14);
   margin-bottom: var(--space-14);
   padding: 0;
 }

package/css/components/dropdown.css

@@ -30,7 +30,9 @@
   border: 1px solid var(--border-default);
   border-radius: var(--radius-10);
   padding: var(--space-4) 0;
-  box-shadow: 0 4px 16px color-mix(in oklch, black 40%, transparent);
+  /* Sprint 3a 2026-05-12: surface-overlay (parent) + border-default ger
+     djupkanslag istallet for shadow. Dark-mode-doktrin (regel 10). */
+  box-shadow: none;
   z-index: var(--z-dropdown);
   display: none;
 }

package/css/components/feedback.css

@@ -40,8 +40,11 @@
   color: var(--text-default);
   background: var(--surface-overlay);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-12);
-  box-shadow: var(--shadow-float);
+  border-radius: var(--radius-14);
+  /* Sprint 3a 2026-05-12: shadow→none per dark-mode-doktrin
+     (DESIGN-LANGUAGE.md sektion 2). Backdrop-filter + surface-overlay
+     + border ger nog djupkanslag. */
+  box-shadow: none;
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   pointer-events: auto;
@@ -139,7 +142,7 @@
     var(--surface-default) 100%
   );
   background-size: 200% 100%;
-  border-radius: var(--radius-6);
+  border-radius: var(--radius-10);
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 

package/css/components/form.css

@@ -22,7 +22,7 @@
 .form-card {
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-20);
+  border-radius: var(--radius-14);
   padding: var(--space-20);
   max-width: 480px;
   margin-bottom: var(--space-14);

package/css/components/hero.css

@@ -20,7 +20,9 @@
    data-animate-roll triggar animationen.
    ================================================================ */
 .hero {
-  padding: var(--space-20) var(--space-4) var(--space-24);
+  /* Sprint 3a 2026-05-12: horizontal padding 4→0 for alignment med
+     andra container-element. Se DESIGN-LANGUAGE.md sektion 8. */
+  padding: var(--space-20) 0 var(--space-24);
   text-align: left;
 }
 

package/css/components/hub-card.css

@@ -67,7 +67,7 @@
   height: 36px;
   background: var(--surface-default);
   color: var(--accent-text);
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
   flex-shrink: 0;
 }
 

package/css/components/inline-edit.css

@@ -66,7 +66,7 @@
   padding: 0 var(--space-10);
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-8);
+  border-radius: var(--radius-10);
   color: var(--text-default);
   font-family: inherit;
   font-size: var(--fs-16);

package/css/components/list-row.css

@@ -44,7 +44,7 @@
 .list-row__icon {
   width: 36px;
   height: 36px;
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
   display: flex;
   align-items: center;
   justify-content: center;

package/css/components/nav.css

@@ -23,10 +23,12 @@
 /* ================================================================
    ==== BOTTOM-NAV (fixed, mobil-primar)
    Flytande pill ovan home-indikatorn. --space-12 clearance ner till
-   safe-area, --space-16 inset fran viewport-kanten. --shadow-float
-   loftar pillen visuellt fran sidans bakgrund. Flex-layout med
-   justify-content: space-around for jamn distribution av items
-   (utan flex: 1 pa items - inga item-nivaforandringar).
+   safe-area, --space-16 inset fran viewport-kanten. Surface-raised
+   (ljusare an page) + border-subtle ger djupkanslag fran sidans
+   bakgrund - INGEN shadow per dark-mode-doktrin (regel 10 +
+   DESIGN-LANGUAGE.md sektion 2).
+   Flex-layout med justify-content: space-around for jamn distribution
+   av items (utan flex: 1 pa items - inga item-nivaforandringar).
    ================================================================ */
 .bottom-nav {
   position: fixed;
@@ -45,7 +47,8 @@
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-full);
-  box-shadow: var(--shadow-float);
+  /* Sprint 3a 2026-05-12: shadow→none per dark-mode-doktrin. */
+  box-shadow: none;
 }
 
 .bottom-nav__item {

package/css/components/offline.css

@@ -29,7 +29,7 @@
   height: 64px;
   background: var(--surface-raised);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-20);
+  border-radius: var(--radius-14);
   display: flex;
   align-items: center;
   justify-content: center;

package/css/components/overlay.css

@@ -44,11 +44,14 @@ dialog.sheet::backdrop {
   max-height: calc(100dvh - 2 * var(--space-40));
   margin: 0;
   padding: 0;
-  background: var(--surface-raised);
+  /* Sprint 3a 2026-05-12: surface-overlay (ljusare) for djupkanslag
+     istallet for shadow. Dark-mode-doktrin: ljushet-hierarki > shadow
+     pa mork bakgrund. Se DESIGN-LANGUAGE.md sektion 2. */
+  background: var(--surface-overlay);
   color: var(--text-default);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-14);
-  box-shadow: var(--shadow-float);
+  box-shadow: none;
   overflow: hidden;
   /* Native <dialog>: aterstall default-sytling. */
   inset: auto;
@@ -99,12 +102,14 @@ dialog.sheet::backdrop {
   max-height: 90svh;
   margin: 0 auto;
   padding: var(--space-8) var(--space-20) calc(var(--space-28) + var(--safe-bottom));
-  background: var(--surface-raised);
+  /* Sprint 3a 2026-05-12: surface-overlay + ingen shadow per
+     dark-mode-doktrin (regel 10 + DESIGN-LANGUAGE sektion 2). */
+  background: var(--surface-overlay);
   color: var(--text-default);
   border: 1px solid var(--border-subtle);
   border-bottom: 0;
-  border-radius: var(--radius-24) var(--radius-24) 0 0;
-  box-shadow: var(--shadow-float);
+  border-radius: var(--radius-14) var(--radius-14) 0 0;
+  box-shadow: none;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;

package/css/components/panel.css

@@ -11,7 +11,7 @@
 .panel {
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-20);
+  border-radius: var(--radius-14);
   padding: var(--space-16) var(--space-18);
   margin-bottom: var(--space-14);
 }

package/css/components/setting-row.css

@@ -32,7 +32,7 @@
   padding: var(--space-14) 0;
   background: transparent;
   border: 0;
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
   color: inherit;
   text-align: left;
   cursor: pointer;

package/css/components/sheet-content.css

@@ -91,7 +91,7 @@
   align-items: center;
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
   height: 48px;
   transition: background var(--dur-fast) var(--ease-spring-snappy);
 }
@@ -136,7 +136,7 @@
   padding: var(--space-12) var(--space-14);
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
   color: var(--text-default);
   font-size: var(--fs-17);
   font-family: inherit;

package/css/components/stat.css

@@ -30,7 +30,7 @@
   gap: var(--space-4);
   padding: var(--space-16);
   background: var(--surface-default);
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
 }
 
 .stat-card__value {

package/css/components/swipe-stack.css

@@ -54,7 +54,7 @@
   flex-direction: column;
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-20);
+  border-radius: var(--radius-14);
   padding: var(--space-20);
   overflow: hidden;
   cursor: grab;

package/css/components/tab-bar.css

@@ -12,7 +12,7 @@
   margin: 0 0 var(--space-16);
   padding: var(--space-4);
   background: var(--surface-default);
-  border-radius: var(--radius-12);
+  border-radius: var(--radius-14);
 }
 
 .tab-bar__item {
@@ -24,7 +24,7 @@
   padding: 0 var(--space-12);
   background: transparent;
   border: 0;
-  border-radius: var(--radius-8);
+  border-radius: var(--radius-10);
   color: var(--text-subtle);
   font-family: inherit;
   font-size: var(--fs-14);

package/css/components/tooltip.css

@@ -35,7 +35,7 @@
   font-size: var(--fs-12);
   line-height: var(--lh-snug);
   padding: var(--space-4) var(--space-8);
-  border-radius: var(--radius-6);
+  border-radius: var(--radius-10);
   border: 1px solid var(--border-default);
   white-space: nowrap;
   pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.14.14",
+  "version": "3.15.1",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {
@@ -13,6 +13,9 @@
     "SKILL.md",
     "references/"
   ],
+  "scripts": {
+    "lint:css": "stylelint 'css/**/*.css'"
+  },
   "engines": {
     "node": ">=16.7"
   },
@@ -29,5 +32,9 @@
     "type": "git",
     "url": "git+https://github.com/drawn124578/klodd-ds.git"
   },
-  "homepage": "https://github.com/drawn124578/klodd-ds#readme"
+  "homepage": "https://github.com/drawn124578/klodd-ds#readme",
+  "devDependencies": {
+    "stylelint": "^17.11.0",
+    "stylelint-config-standard": "^40.0.0"
+  }
 }

package/references/02-components.md

@@ -360,3 +360,140 @@ Jubb, Ekonom, framtida appar foljer samma monster med sina egna tokens.
 - **Egen .button-style.** Anvand `.btn` med modifier istallet.
 - **`font-weight: 700`.** Anvand `--fw-medium` (500). Display-siffror ar dokumenterat undantag.
 - **Anta att alla komponent-filer har ett root-block.** 17 av 37 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.
+
+
+## Tier D-undantagskatalog (sibling-blocks med dokumenterad rationale)
+
+Per regel 11 + ADR 0011: compound-blocks i samma fil där flat-hyphen-
+namngivning bevaras med dokumenterad motivering (visuell paritet,
+etablerade namnkonventioner, historiskt migrerad utan rename).
+
+**Inga nya Tier D-poster utan ADR-beslut.**
+
+### Paketets dokumenterade undantag (7 klasser)
+
+`.tooltip-wrapper` (tooltip.css)
+- Compound block parent till `.tooltip`. Wrappar tooltipen utanfran.
+- Rationale: `.tooltip__wrapper` ar paradoxal namngivning (wrapper
+  som omsluter tooltipen, inte tvartom). Per regel 1 dokumenterat
+  undantag.
+
+`.offline-wrap` + `.offline-icon` + `.offline-title` + `.offline-text` (offline.css)
+- Compound, alla 4 anvands tillsammans i offline.html
+- Rationale: layout-skelett for SW-offline-fallback. Dokumenterad i
+  `02-components.md` offline-entry.
+
+`.kv-budget-header` + `.kv-budget-body` (kv-list.css)
+- Compound, klickbar header + expanderbart body
+- Rationale: lyfta fran Ekonoms LEGACY utan rename (v3.9.0) for att
+  bibehalla template-kompatibilitet utan synkbreaks. Plus migrering
+  hade krasht Ekonom-flowet ovardelaktigt.
+
+### Ekonom Tier D (Sprint G 2026-05-09, 24 klasser)
+
+`.cat-bar-*` (7 klasser, ekonom.css charts-sektion)
+- `.cat-bars`, `.cat-bar-item`, `.cat-bar-row`, `.cat-bar-label`,
+  `.cat-bar-amount`, `.cat-bar-track`, `.cat-bar-fill`
+- Rationale: kategori-staplar med tatt etablerat namn-monster.
+  Att skapa tomma `.cat-bar { }`-blocks bara for BEM-formalism ger
+  inget varde.
+
+`.equity-bar-*` (6 klasser, ekonom.css charts-sektion)
+- `.equity-bar-row`, `.equity-bar-track`, `.equity-bar-fill`,
+  `.equity-bar-meta`, `.equity-amort`, `.equity-apprec`
+- Rationale: amort/apprec ar inline-modifiers for amortering vs
+  uppskattning, sibling-block till track/fill. Visuell paritet med
+  cat-bar-familjen.
+
+`.budget-bar-*` (5 klasser, ekonom.css charts-sektion)
+- `.budget-bar-row`, `.budget-bar-track`, `.budget-bar-fill`,
+  `.budget-bar-warning`, `.budget-bar-over`
+- Rationale: sprint 53 burndown-bar. Visuell paritet med cat-bar/
+  equity-bar-familjerna.
+
+`.cat-tx-*` (6 klasser, ekonom.css cat-row-sektion)
+- `.cat-tx-list`, `.cat-tx-body`, `.cat-tx-desc`, `.cat-tx-date`,
+  `.cat-tx-amount`, `.cat-tx-stack`
+- Rationale: tx-rader inom collapsible-cat-row. Etablerat namn-
+  monster. `.cat-tx-stack` har egna BEM-element (__icon/__header/
+  __body) - bara root-namn flat-hyphen.
+
+### Sammanfattning
+
+Total: 7 paket-undantag + 24 Ekonom Tier D = **31 dokumenterade
+undantag**. Etablerad 2026-05-12 via BEM-4 (ADR 0011). Inga oplanerade
+utvidgningar.
+
+### Jubbs jubb.css block-katalog (efter BEM-6 konsolidering 2026-05-12)
+
+Fullstandig katalog av Jubbs jubb.css-block efter BEM-2/3/6-migration.
+Alla siblings dokumenterade per regel 11 (genuint fristaende koncept
+ELLER blocks med BEM-element).
+
+BEM-element-block (block med `__`-element-syntax):
+- `.score-breakdown` + `__dim-row/-label/-value` (job-detail "Hur beraknades poangen?")
+- `.source-stats` + `__row/__numbers/__int/__dis` (insights per-kalla-stats)
+- `.hour-heatmap` + `__cell/__bar/__label` (insights 24h-timeheatmap)
+- `.job-card` + 9 element (`__link/__row1/__meta/__why/__foot/__fresh/__title/__extlink/__icon`)
+
+Sibling-blocks (genuint fristaende, passerar testen):
+- `.score-bar` + `__fill` (states `.is-strong/.is-weak`) - score-bar-visualisering
+- `.score-meta` - meta-text under score-bar (compound, descendant strong-tag)
+- `.score-reasoning` - AI-reasoning-text-block (atomic typografi)
+- `.source-bar` + `__int/__dis` - tva-fargad ratio-stapel
+- `.mode-toggle-row` - wrapper for `.btn-mode`-knappar
+- `.btn-mode` - mode-toggle-knapp (kan teknisk anvandas standalone)
+- `.signal-badge` - expansionssignal-display (compound block, descendant `.text-meta`)
+- `.swipe-hint` - Jubb-override av paket-klass for jobblistan
+- `.job-list` - `<ul>`-wrapper for `.job-card`-listor
+- `.split-grid` - 1/2-kol grid layout-helper
+
+Sprint 10-3 cleanup (2026-05-12):
+- `.radar-indicator` + `__state/__meta` raderat (dead code sedan
+  hem-vy-redesign 2026-05-11, 0 template-traffar).
+- `.meta-text` (Jubb-utility utan primardefinition) bytt till paketets
+  `.text-meta` i 4 templates. Override-regel `.signal-badge .text-meta`
+  behaller fs-13 subtle for badge-context.
+
+### Ekonoms ekonom.css block-katalog (efter Sprint 10-2 konsolidering 2026-05-12)
+
+Fullstandig katalog av Ekonoms ds/ekonom.css-block efter Sprint G + 10-2.
+Alla siblings dokumenterade per regel 11 (genuint fristaende koncept
+ELLER blocks med BEM-element).
+
+BEM-element-block (block med `__`-element-syntax):
+- `.month-pill` + `__label` (topbar manadsvaljare)
+- `.review-banner` + `__title/__meta/__chev` (granskning)
+- `.cat-row` + `__header/__total/__label/__amount/__chev`
+  (Sprint 10-2: .cat-label/-amount/-chev migrerade till BEM-element)
+- `.cat-list-row` + `--excluded/--pending/--clickable` (modifiers)
+- `.cat-tx-stack` + `__icon/__header/__body` (sprint 37 identiska tx-grupp)
+- `.tx-pending-icon` + `--stale` (modifier)
+- `.sub-row` + `--matched/--pending` (modifiers)
+- `.amort-bar` + `__value/__track/__fill/__label`
+
+Sibling-blocks (genuint fristaende, passerar regel 11):
+- `.estimat-tag` - inline-tag for estimat-markering
+- `.cat-list` - `<ul>`-wrapper for cat-row-listor
+- `.review-item` + `.review-actions` - granskning sibling-rader
+- `.sub-section-header` + `.sub-status-icon` - subscription-element
+- `.amort-bars` - wrapper for amort-bar-listor
+- `.avi-preview-grid` + `.avi-image` + `.invite-link` - upload-flow
+- `.compact-select` + `.compact-amount-input` - mini-input-variants
+- `.logout-row` + `.logout-btn` - logout-UI
+- `.btn-copy` + `.btn-bank` - Klarna-stil round actions (44px tap-target)
+- `.bank-row-icon` - gron check-ikon (data-settings)
+- `.profile-panel-centered` - centrerad avatar+namn+email layout
+- `.rule-arrow` + `.rule-cat` - keyword->kategori-text-element
+
+Tier D-undantag (Sprint G 2026-05-09, listade i sektionen ovan):
+- `.cat-bars` / `.cat-bar-*` (7 klasser)
+- `.equity-bar-*` + `.equity-amort` + `.equity-apprec` (6 klasser)
+- `.budget-bar-*` (5 klasser)
+- `.cat-tx-*` (6 klasser, .cat-tx-stack har BEM-element)
+- `.cost-bar` / `.cost-bar-seg` (2 klasser, sibling-pair)
+- `.split-bar` (paketet har samma, override-styling)
+
+Notera: ekonom-domain.css (kategori-tokens + bindings) listas inte har
+- den filen ar token-definition, inte komponent-CSS. Se ADR
+`0001-three-layer-token-architecture.md`.

package/references/03-quality-bar.md

@@ -227,10 +227,33 @@ inte ett undantag eller teknisk skuld.
   ar BEM-element av varandra (`.hub-category` + `.hub-list`,
   `.input-group` + `.input-icon` som siblings till `.input`)
 
-**Nar det INTE ar korrekt:**
+**Nar det INTE ar korrekt (skarpt 2026-05-12 via ADR 0011):**
 - Tva orelaterade komponenter staplade i samma fil av bekvamlighet
-- Ett block som logiskt kunde varit BEM-element av ett annat - i sa
-  fall ska det vara `.X__Y`, inte `.X-Y` som separat block
+- **Ett block som logiskt kunde varit BEM-element av ett annat ska vara
+  `.X__Y`, inte `.X-Y` som separat block.** Detta inkluderar inre
+  struktur av compound-blocks. Bara root-level sibling-blocks (genuint
+  fristaende koncept) far vara flat-hyphen.
+
+**Test (compound-sibling vs BEM-element):**
+> "Skulle detta block funka om jag tar bort dess parent-block?"
+> - Ja, det ar ett fristaende koncept → sibling-block (flat-hyphen OK)
+> - Nej, det ar inre struktur av parent → BEM-element (`__`-syntax kravs)
+
+Exempel:
+- `.hub-card` + `.hub-list` + `.hub-category` → 3 siblings (kan anvandas
+  separat i olika kontexter)
+- `.hub-card__icon` → BEM-element av `.hub-card` (inre struktur)
+- `.score-breakdown__dim-row` (ratt, BEM-element) - INTE `.score-dim-row`
+  (fel, flat-hyphen for inre struktur)
+- `.triage-card__source` (ratt, BEM-element) - INTE `.triage-source`
+  (fel, flat-hyphen for inre struktur)
+
+**Tier D-undantag:**
+En liten katalog av historiskt etablerade flat-hyphen-block-familjer
+med dokumenterad rationale (visuell paritet, etablerade namn,
+genomford migration som inte ar vard att backa). Se
+`references/02-components.md` "Tier D-undantagskatalog"-sektionen.
+**Inga nya Tier D-poster utan ADR-beslut.**
 
 **Hur de ska dokumenteras:**