feat(playground-design-system): v0.4.0 — root-cause fix for kanban/expansion/matrix-bubble [skip-docs]

Bugfixes (B-DS-1, B-DS-2, B-DS-3 fra V1.14.0-AUDIT):
- .kanban-card__name (tier3-supplement): word-break: break-all → break-word
  + overflow-wrap: anywhere. Knekket midt i ord ("Tekn isk dokumen tasjon").
- .expansion__title-main, .expansion__title-sub (tier3-supplement): legg
  til display: block. Begge er <span> som flyter inline by default —
  resultat: "dokumentertKilde: Art. 9" på samme linje.
- .matrix__bubble (components.css): legg til cursor: pointer, hover-scale
  og focus-visible. Antas rendret som <button> i konsumenter — gir
  visuell + keyboard-fokus-feedback.

Re-syncet til plugins/ms-ai-architect/playground/vendor/ via
sync-design-system.mjs. Slettet 3 lokal-overrides i playground HTML
(matrix-bubble, expansion-title, kanban-card-name). Style-blokk:
191 → 182 linjer.

Smoke-tester: validate-plugin 219 PASS, e2e --playground 272 PASS,
statisk struktur 202 PASS.

Andre plugins (llm-security, voyage, okr, config-audit) påvirkes IKKE
— beholder gammel vendored DS inntil de selv re-syncer.

Sesjon 2 av 6 i v1.14.0 root-cause-multi-sesjons-løp.
ms-ai-architect plugin-versjon ikke bumpet (sesjon 6 ship-er v1.14.0).
[skip-docs]: docs oppdateres i sesjon 6 ved v1.14.0 plugin-ship.

Refs V1.14.0-AUDIT.local.md sub-batch 1 + 4.

shared/playground-design-system/CHANGELOG.md

@@ -1,5 +1,28 @@
 # playground-design-system — CHANGELOG
 
+## 0.4.0 — 2026-05-08
+
+### Bug fixes
+- **`.kanban-card__name`** (components-tier3-supplement.css): bytt `word-break: break-all` til `word-break: break-word` + `overflow-wrap: anywhere`. `break-all` knekker midt i ord ("Tekn isk dokumen tasjon"); ny verdi respekterer ordskjøt og brytter kun lange tokens (B-DS-1).
+- **`.expansion__title-main`, `.expansion__title-sub`** (components-tier3-supplement.css): legg til `display: block`. Begge er `<span>`-elementer som flyter inline by default, noe som gir "dokumentertKilde: Art. 9" på samme linje. `display: block` sikrer vertikal stacking (B-DS-2).
+- **`.matrix__bubble`** (components.css): legg til `cursor: pointer`, `transition`, `:hover { transform: scale(1.15) }` og `:focus-visible { outline + offset }`. Antar at consumer rendrer bobler som `<button>` for click-handlers — gir visuell + keyboard-fokus-feedback (B-DS-3).
+
+### Påvirkning
+
+Bugfixene er **backward-compatible** — alle eksisterende selectors og verdier som er endret, var bugfixes. Plugin-konsumenter som har lokal-overrides for disse mønstrene bør re-syncer og slette overridene:
+
+- **ms-ai-architect:** re-sync i samme commit, sletter linje 191-193 (matrix-bubble), 208-211 (expansion-title), 213-216 (kanban-card-name) i `playground/ms-ai-architect-playground.html`.
+- **llm-security, voyage, okr, config-audit:** re-sync på eget tempo (ikke breaking — gammel vendored DS fungerer fortsatt med eksisterende lokal-overrides).
+
+### For å adoptere v0.4
+
+```bash
+node scripts/sync-design-system.mjs <plugin-name>
+# --force hvis drift detected
+```
+
+Førsteadopter: `ms-ai-architect` v1.14.0 (planlagt 2026-05-08, multi-sesjons-løp som starter med DS-bump i sesjon 2).
+
 ## 0.3.0 — 2026-05-04
 
 ### Added — Playground/report-page foundation primitives (sections 13-25 in tier3-supplement)

shared/playground-design-system/components-tier3-supplement.css

@@ -279,7 +279,7 @@
 .kanban-card[data-verdict="trusted"] { border-left: 4px solid var(--color-state-success); }
 .kanban-card[data-verdict="unknown"] { border-left: 4px solid var(--color-state-warning); }
 
-.kanban-card__name { font-family: var(--font-family-mono); font-size: 13px; color: var(--color-text-primary); word-break: break-all; }
+.kanban-card__name { font-family: var(--font-family-mono); font-size: 13px; color: var(--color-text-primary); word-break: break-word; overflow-wrap: anywhere; }
 .kanban-card__meta { font-size: 11px; color: var(--color-text-tertiary); }
 .kanban-card__reason { font-size: 12px; color: var(--color-text-secondary); }
 
@@ -695,8 +695,8 @@
 .expansion__head:hover { background: var(--color-bg-soft); }
 .expansion__head:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 .expansion__title { flex: 1; }
-.expansion__title-main { font-size: var(--font-size-md); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
-.expansion__title-sub  { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
+.expansion__title-main { display: block; font-size: var(--font-size-md); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
+.expansion__title-sub  { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
 .expansion__chev {
   color: var(--color-text-tertiary);
   transition: transform var(--duration-normal) var(--ease-default);

shared/playground-design-system/components.css

@@ -190,6 +190,15 @@
   color: var(--color-bg);
   border: none;
 }
+/* B-DS-3 (v0.4.0): bobler rendres som <button> i renderMatrixHtml — gi
+   visuell + keyboard-fokus-feedback. Antar at consumer bruker
+   <button class="matrix__bubble">, ellers bare-virkning ufarlig på <span>. */
+.matrix__bubble {
+  cursor: pointer;
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+.matrix__bubble:hover { transform: scale(1.15); }
+.matrix__bubble:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
 [data-theme="dark"] .matrix__bubble { background: rgba(0,0,0,0.45); color: var(--color-text-primary); border-color: rgba(255,255,255,0.15); }
 
 .matrix__x-label {