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.
This commit is contained in:
Kjell Tore Guttormsen 2026-05-08 20:03:20 +02:00
commit 76a64bde48
8 changed files with 83 additions and 28 deletions

View file

@ -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 <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 {