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.
Two changes in one commit because they were prepared together and the
component demos depend on the new self-hosted fonts.css.
Tier 3 wave 2 — 12 new components
---------------------------------
Adds components-tier3-supplement.css (886 lines) and 12 isolated demo
HTML pages under shared/playground-examples/components/:
toxic-flow chain, fleet-overview, kanban Keep/Review/Remove,
maturity-ladder, classify-and-transform, cycle-ribbon,
persistent-antipattern, suppressed-signals, ExpansionCard, ReadMore,
FormProgress, Aspirational-vs-Committed.
Reuses existing tokens — no new CSS custom properties. Honors the
Phase 1 feedback rules: no large pink areas for body text, severity-red
distinct from failure-red, dark mode via existing [data-theme="dark"].
Provenance: components-tier3-supplement.css and the 12 demo bodies were
authored by claude.ai/design (separate Anthropic instance) on 2026-05-03.
This commit only integrates them — path rewrites, font swap, generic
name substitution in fleet-overview demo data, README updates.
base.css from the export was deliberately NOT taken in because it
reverted the inline-message contrast fix from v0.1.
Self-hosted fonts (Inter, JetBrains Mono, Source Serif 4)
---------------------------------------------------------
Replaces all fonts.googleapis.com / fonts.gstatic.com requests with
.woff2 files bundled at shared/playground-design-system/fonts/.
Why:
- No data leaked to Google about end-user IPs and User-Agents.
- GDPR-safe for Norwegian public-sector deployments.
- Works offline / behind air-gapped firewalls.
- Forkers downloading the marketplace get a complete bundle.
All three families are SIL Open Font License 1.1 — license texts
included alongside the woff2 files. Source Serif 4 woff2 generated
locally from the upstream OTF release using
fonttools ttLib.woff2 compress; Inter and JetBrains Mono are
unmodified upstream webfont releases.
Total bundle: 9 woff2 files, ~940 KB. New fonts.css declares all
@font-face rules with font-display: swap. All 6 example HTMLs and 12
new component demos load it via a single relative path.
Verified
--------
- Privacy grep returns empty across plugins/ and shared/
- Google Fonts grep returns empty across shared/*.html
- Smoke test via python -m http.server: HTML + 7 stylesheets +
Inter-Regular.woff2 all return 200
Doc updates
-----------
- shared/playground-design-system/README.md: file tree updated,
Quick start snippet shows fonts.css link, "Self-hosted fonts"
section added
- shared/playground-design-system/fonts/LICENSES.md: combined attribution
- README.md (root): Tier 3 wave 1+2 component list, Privacy-first bullet
- CLAUDE.md (root): tree entry expanded for new components + fonts
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace named real-world entity with fictional generic Norwegian
public-sector entity ("Direktoratet for digital tjenesteutvikling",
DDT) across the design system reference scenarios and root docs.
Repository is a private personal project; references to a real
organization were unintended and unrelated to the project.
- Rename: security-vegvesen.html -> security-direktorat.html
- Persona: replaced with fictional Kari Nordmann
- Domain refs / acronym / rule-IDs: SVV* -> DDT*
- Internal system names (Autosys etc.): replaced with fictional names
Phase 2 (plugin-internal references) follows in next commit.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Authored in Claude Code following the design-DNA established by claude.ai/design
in v0.1 (tokens + Tier 1 + Tier 2). Visual coherence verified against existing
components via tier3-preview.html showcase.
shared/playground-design-system/components-tier3.css (~480 lines):
- pair-before-after: ROS/DPIA/AI Act inherent->residual primitive with delta
pill (improved/worsened); responsive collapse to vertical on narrow viewports
- aiact-timeline: 4 EU AI Act milestones (2025-02-02 .. 2027-08-02) with
per-system countdown chips (urgent/soon/distant), today-marker, and per-
milestone passed/active/upcoming states
- tracks: Guide/Explore/Expert 3-track entry pattern carried from Playground v2,
top-bar color coding per track
- rights-matrix: FRIA 12 EU Charter rights x 5 impact levels (Art. 27 EU AI Act)
- capability-matrix: license x kapabilitet with explicit icons per status
(available/cost/conditional/missing) - never color-only
- agent-grid + agent-card: parallel-worker status with state pills, progress
bars, metric chips, pulsing dot for running, distinct failure-red token
- error-summary: Aksel/GOV.UK pattern, white bg + red border + dark body text
+ red heading (NOT large pink fill — fixes contrast bug)
- guide-panel: Aksel friendly inline guidance, info/success/warn variants
Also fixes shared/playground-design-system/base.css inline-message--error which
had the same contrast bug as ErrorSummary v1: white text on light-pink soft-fill
was unreadable. Now uses surface bg + critical border + primary text + critical
strong/heading color. Same dark-mode treatment.
shared/playground-examples/tier3-preview.html (~470 lines): live demo for all
8 components with realistic Norwegian mock-data (Lier kommune ROS T-001
threat, AI Act timeline 2026-05-02 today-marker, FRIA EU Charter rights, M365
capability-matrix, 4-worker utredning grid). Used to validate visual coherence
before committing.
Updates shared/playground-design-system/README.md with Tier 3 component table
and provenance note distinguishing v0.1 (claude.ai/design) from this addition
(Claude Code).
Remaining for v0.2: 12 plugin-specific Tier 3 components (sankey/toxic-flow,
fleet-overview, kanban Keep/Review/Remove, maturity-ladder, classify-and-
transform, cycle-ribbon, persistent-antipattern badge, suppressed-signals,
ExpansionCard, ReadMore, FormProgress, Aspirational vs Committed visual). To
be generated by claude.ai/design in a supplement session before plugin
Playground work begins.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
