@klodd/ds 3.15.0 → 3.15.1

package/SKILL.md

@@ -111,12 +111,30 @@ 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.
 
-## Kvalitetsstatus (2026-05-12, post-BEM-migration + 10/10-lyft)
-
-Designsystemet bedöms 10/10 efter 2026-05-12-konsolideringen.
-Före: 5/10 (BEM-disciplin enbart via mänsklig review, app-domain-
-inkonsekvens, dead code). Lyftet skedde i 11 sprintar över 6 commits-
-sekvenser (BEM-1 till BEM-6 + Sprint 10-1 till 10-4 + 10-6 doc).
+## 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
 

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/package.json

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

package/references/04-locked-decisions/0013-visual-coherence-doctrine.md

@@ -0,0 +1,128 @@
+# 0013 - Visual Coherence Doctrine
+
+## Status
+Locked.
+
+## Context
+
+Designsystemet hade efter Sprint 10 (BEM-mekanisk-konsekvens) en hög
+nivå av token-disciplin och BEM-syntax-disciplin, men brist på
+**komposition-disciplin**. Calle's observation 2026-05-12: "element
+inte synkade i former och storlek, märklig ljus skugga på mörk
+bakgrund, olika storlekar nära varandra som borde harmonisera."
+
+Det var inte BEM-syntax-brott. Det var visuell koherens-brist.
+Designsystem ger tokens + komponenter + regler, men hur komponenter
+används TILLSAMMANS i layouter var inte kodifierat.
+
+Full audit (Chrome MCP javascript_tool layout-extraction över 17
+vyer i båda apparna) identifierade 5 kritiska brott:
+
+1. **Border-radius-kaos**: 11+ distinkta BR-värden över systemet
+2. **Shadow-användning bryter regel 10**: oklch-ljus-shadow på 4 vyer
+3. **4px alignment-drift**: hero-content sittande på x=18, övriga på
+   x=14 (hero.css padding 20/4/24)
+4. **Font-size-spread varierade dramatiskt**: 3-9 distinkta fs per vy
+5. **Hero-pattern inkonsekvent mellan apparna**: Jubb siffer-hero,
+   Ekonom label-meta-hero, blandning page-header vs hero
+
+Audit-rapport: `references/AUDIT-VISUAL-COHERENCE-2026-05-12.md`.
+
+## Decision
+
+`references/DESIGN-LANGUAGE.md` är **LOCKED** som visual coherence-
+doktrin. 12 sektioner specificerar konkreta regler:
+
+1. **Border-radius-skala**: 5 värden (4/10/14/50%/9999) - eliminerat
+   2/6/8/12/16/18/20/22/24 från komponent-CSS
+2. **Shadow-policy**: restriktiv. Dialog/sheet/dropdown/bottom-nav/toast
+   har `box-shadow: none`. Bara iOS-style toggle-thumb och active-pill
+   får `--shadow-card`.
+3. **Page-toppar**: TVÅ separata patterns (.hero med __amount för
+   metric-display, .page-header för titel+subtitle utility-pages)
+4. **Padding-rytm**: 6 värden (4/8/12/16/20/24)
+5. **Font-size-skala**: 8 token-bundna värden
+6. **Container-klassifikation**: matrix för card/panel/hub-card/etc
+7. **Spacing-rytm mellan block**: konsekvent margin-conventions
+8. **Alignment-regler**: alla container-element på x=14
+9. **PWA-konventioner**: 44x44 tap-targets, mobile-first, safe-areas
+10. **Färg-konvention**: semantic-surface-tokens enbart
+11. **Enforcement-status**: stylelint för BEM, mänsklig disciplin
+    för visual coherence (custom plugin candidate)
+12. **När ändra regler**: ADR-process, inga ad-hoc-ändringar
+
+## Migration genomförd 2026-05-12
+
+### Sprint 3a: Quick-wins (klodd-ds 3.15.0)
+- overlay.css: dialog + sheet shadow→none, bg surface-overlay
+- dropdown.css: shadow→none
+- hero.css: padding 20/4/24→20/0/24 (alignment-drift fixad)
+- nav.css: bottom-nav shadow→none
+- feedback.css: toast shadow→none
+- typography.css: muted-footer-text margin-top: var(--space-16)
+
+Commit: klodd-ds a3beab4
+
+### Sprint 3b: BR-konsolidering (klodd-ds 3.15.0)
+- 16 paket-komponenter migrerade till 5-värdes-BR-skala
+- 6 → 10, 8 → 10, 12 → 14, 16 → 14, 20 → 14, 24 → 14
+- App-domain BR-konsolidering: Ekonom ekonom.css, Jubb jubb.css +
+  pages/design.css + pages/triage.css
+
+Commit: klodd-ds 96d1bf6 + Ekonom 955919a + Jubb f69bd14
+
+### Sprint 3c: Template-migration
+- Jubb: 24 .hero-label → .hero__label byten över 5 templates
+- Jubb-template-migration: topbar__title → topbar+page-header-pattern
+  (jobs_list, insights, runs, install, job_detail)
+- Konsekvens med Ekonom (som redan använder topbar+page-header)
+
+Commit: Jubb dffb7eb
+
+## Consequences
+
+**Bra:**
+- Cross-app visuell homogenitet (Jubb och Ekonom följer samma
+  patterns)
+- 5 BR-värden istället för 11+ (eliminerar "olika former"-känsla)
+- Inga shadow-anomalier på dark-mode (per regel 10-doktrin)
+- Hero alignment fixad (4px-drift eliminerad)
+- Klar pattern-distinktion (hero för metric, page-header för titel)
+
+**Trade-offs:**
+- Visuella ändringar på 17+ vyer kräver visuell verifiering per vy
+  (re-audit Sprint 4b)
+- BR-konsolidering är breaking visual change (panel 20→14 är
+  tightare/mer angular)
+- DESIGN-LANGUAGE.md är ytterligare doc att underhålla för
+  CC-sessioner
+- Custom stylelint-plugin för design-rule-enforcement saknas (mänsklig
+  disciplin tills implementerad)
+
+## Future work
+
+1. **Custom stylelint-plugin** som validerar:
+   - border-radius är en av {4, 10, 14, 50%, 9999}
+   - font-size är token-bundet (--fs-N)
+   - padding-värden begränsade till de 6 listade
+   - box-shadow förbjudet utöver --shadow-card
+
+2. **Visual regression testing** via Playwright (Sprint 10-5 deferred):
+   - snapshots av kärnvyer per viewport
+   - PR-comment med diff-images
+   - Baseline-update via `--update-snapshots`
+
+3. **Component combination-katalog**: utvidga 02-components.md med
+   "när-använda-vilken-kombination"-tabeller (t.ex. card vs panel
+   för list-items, hub-card vs setting-row för settings).
+
+## References
+
+- `references/DESIGN-LANGUAGE.md` (locked doktrin)
+- `references/AUDIT-VISUAL-COHERENCE-2026-05-12.md` (audit-rapport)
+- `references/03-quality-bar.md` regel 10 (shadow), regel 11 (BEM)
+- ADR `0011-strikt-bem-elementsyntax.md` (besläktad)
+- ADR `0012-stylelint-bem-enforcement.md` (besläktad)
+- Klodd-ds commits: a3beab4 + 96d1bf6 + 3.15.0-bump
+- Jubb commits: f69bd14 + dffb7eb
+- Ekonom commit: 955919a