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:
parent
9f806469f3
commit
76a64bde48
8 changed files with 83 additions and 28 deletions
|
|
@ -185,18 +185,13 @@
|
|||
ikke skubber innhold utenfor viewport. */
|
||||
.recommendation-card__body { overflow-wrap: anywhere; word-break: break-word; }
|
||||
|
||||
/* v1.13.0 fix (B3): matrix-bobler i ROS-matrise skal være klikkbare.
|
||||
DS har hover på cellene, men bobler er <span> uten cursor. Klikk-handler
|
||||
scroller til tilsvarende rad i Trusler-tabellen. */
|
||||
.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; }
|
||||
|
||||
/* v1.13.1 fix (B7): .report-meta er ikke definert i vendored DS — vi bruker
|
||||
<section class="report-meta"> som outer-wrapper i flere rendrere. Browser-
|
||||
defaults for <dl><dd><ul> gir uforutsigbare indents (Forpliktelser-bullet-
|
||||
liste i renderAiActPyramid, expansion__body-dl i renderRequirements).
|
||||
Lokal reset gir konsistent venstre-justering uavhengig av nestelse. */
|
||||
Lokal reset gir konsistent venstre-justering uavhengig av nestelse.
|
||||
MERKNAD: .report-meta-mønsteret fjernes i sesjon 4 (V1.14.0) — erstattes
|
||||
av <aside class="card"> + <dl class="adr-meta"> per renderer. */
|
||||
.report-meta { display: block; margin-block: var(--space-4); }
|
||||
.report-meta > h4 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.report-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
|
||||
|
|
@ -205,15 +200,11 @@
|
|||
.report-meta > ul { padding-left: var(--space-5); margin: 0; }
|
||||
.report-meta > ul > li { margin-bottom: var(--space-1); color: var(--color-text-primary); }
|
||||
|
||||
/* v1.13.1 fix (B8b): .expansion__title-main og __title-sub er <span>'ene som
|
||||
DS lar flyte inline. Resultat: "dokumentertKilde: Art. 9" uten linjebrytning.
|
||||
Tving block-display så de stables vertikalt med riktig spacing. */
|
||||
.expansion__title-main, .expansion__title-sub { display: block; }
|
||||
|
||||
/* v1.13.1 fix (B10): DS' .kanban-card__name har word-break:break-all som knekker
|
||||
midt i ord ("Tekn isk dokumen tasjon"). Erstatt med break-word så ordskjøt
|
||||
respekteres. Override krever spesifisitet pga. cascade-orden. */
|
||||
.kanban-card .kanban-card__name { word-break: break-word; }
|
||||
/* B-DS-1, B-DS-2, B-DS-3 (v1.14.0 sesjon 2): tre lokal-overrides slettet.
|
||||
Fixes nå i shared/playground-design-system/ v0.4.0:
|
||||
- .kanban-card__name (break-word + overflow-wrap)
|
||||
- .expansion__title-main/sub (display: block)
|
||||
- .matrix__bubble (cursor + hover + focus) */
|
||||
|
||||
/* v1.13.1 fix (B12, B13, B15): defensive block-layout for sibling-rapport-
|
||||
seksjoner som kan ha overflow-issues mot foregående grid-elementer
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
"generated_by": "scripts/sync-design-system.mjs",
|
||||
"do_not_edit": true,
|
||||
"source": "shared/playground-design-system/",
|
||||
"source_commit": "f58b89243653b8207f006460e75d4a39bc8348a1",
|
||||
"sync_date": "2026-05-04T14:45:29.457Z",
|
||||
"source_commit": "9f806469f37742be65f778059bf364308c9d2811",
|
||||
"sync_date": "2026-05-08T17:57:53.412Z",
|
||||
"file_count": 26,
|
||||
"files": {
|
||||
"CHANGELOG.md": "e293a911701e0ae8e95f8d30e2b583d1c578d0c2af4fd2abfbee3a7d65d5f7ba",
|
||||
"CHANGELOG.md": "dfbd75552c94848acba3e2503bfad56c1c4bc8cfdcbd638d9409149010913d28",
|
||||
"README.md": "83de0e29b207c979b7b2a3327b7a4ec0c2e1b4d3705ee2677f26c28c3a3ee643",
|
||||
"base.css": "604fe6839e2ed304bc0ba112a4e045f208b4b3f084f449a1abdb94ce0a1e5263",
|
||||
"components-tier2.css": "c2cb7e9d76d6af28d50db654030413777feb2f2f2b93213e598de8b686b14523",
|
||||
"components-tier3-supplement.css": "b78664275948f05b9cb4e577921695bd39d15b34c671809d8c8465cac4e1739b",
|
||||
"components-tier3-supplement.css": "51fab10377d80029d6552613069d46fd14ce66af77fe6705b1c6bdf5c9e6481e",
|
||||
"components-tier3.css": "c391ea387298ce864bc35078e7e044b2cdd4187e3130456347d91876599ff4b1",
|
||||
"components.css": "f76b22ba9fd64c2e806b4467536174347105f3e5ccca8a6349a919287d864b86",
|
||||
"components.css": "56fa7392b8b20b567a46f72a8fe9e0205d78ce475eae6b22fc3f50b39b235545",
|
||||
"fonts.css": "e3c3df581c6e4d66e25c555f125c745f6512a33038401089d2519a94ea63ee3d",
|
||||
"fonts/Inter-Bold.woff2": "220976705fbec109f43c5cfdceca639e99ace7e51f3eb67292b105d3575eb39b",
|
||||
"fonts/Inter-Medium.woff2": "8458f8afa67b5691c1fcbe51607a2dafb53a9839e48131c608a186b65415d96d",
|
||||
|
|
|
|||
|
|
@ -280,7 +280,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); }
|
||||
|
||||
|
|
@ -696,8 +696,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);
|
||||
|
|
|
|||
|
|
@ -191,6 +191,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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue