f1fecf39b8
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>
97 lines
5.9 KiB
HTML
97 lines
5.9 KiB
HTML
<!doctype html>
|
||
<html lang="nb">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Maturity-Ladder · Tier 3 supp</title>
|
||
<link rel="stylesheet" href="../../playground-design-system/tokens.css" />
|
||
<link rel="stylesheet" href="../../playground-design-system/base.css" />
|
||
<link rel="stylesheet" href="../../playground-design-system/components.css" />
|
||
<link rel="stylesheet" href="../../playground-design-system/components-tier2.css" />
|
||
<link rel="stylesheet" href="../../playground-design-system/components-tier3-supplement.css" />
|
||
<link rel="stylesheet" href="../../playground-design-system/fonts.css" />
|
||
<style>
|
||
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
|
||
@media (max-width: 980px) { .demo-row { grid-template-columns: 1fr; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="app-header">
|
||
<a href="../index.html" class="app-header__brand"><span class="app-header__brand-mark">P</span><span>Playground</span></a>
|
||
<span class="app-header__breadcrumb">/ Komponenter / Maturity-Ladder</span>
|
||
</header>
|
||
|
||
<main class="container container--wide" style="padding: var(--space-8) 0;">
|
||
<div style="margin-bottom: var(--space-6);">
|
||
<span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-scope-okr); font-weight: var(--font-weight-semibold);">OKR · config-audit · security</span>
|
||
<h1 style="margin: 4px 0 6px;">Maturity-Ladder</h1>
|
||
<p class="text-secondary" style="max-width: 65ch;">Vertikal stepper med rik beskrivelse. Current step har progress-ring (her 65 %).</p>
|
||
</div>
|
||
|
||
<div class="demo-row">
|
||
<section>
|
||
<h2 style="font-size: var(--font-size-lg); margin: 0 0 var(--space-3);">OKR-modenhet (4 nivåer)</h2>
|
||
<div class="mat-ladder">
|
||
<div class="mat-step" data-state="completed">
|
||
<div class="mat-step__icon" aria-hidden="true">✓</div>
|
||
<div>
|
||
<div class="mat-step__name">Utforsker <span class="mat-step__pill mat-step__pill--complete">Fullført</span></div>
|
||
<div class="mat-step__desc">Eksperimenterer med OKR i 1–2 team. Ingen formell rytme.</div>
|
||
</div>
|
||
</div>
|
||
<div class="mat-step" data-state="current">
|
||
<div class="mat-step__icon" aria-hidden="true">
|
||
2
|
||
<span class="mat-step__ring" aria-hidden="true">
|
||
<svg viewBox="0 0 52 52"><circle class="ring-bg" cx="26" cy="26" r="24"></circle><circle class="ring-fill" cx="26" cy="26" r="24" stroke-dasharray="150.8" stroke-dashoffset="52.8"></circle></svg>
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div class="mat-step__name">Pilot <span class="mat-step__pill mat-step__pill--current">Nå</span></div>
|
||
<div class="mat-step__desc">OKR i én avdeling. Kvartalsrytme etablert. Ledelse engasjert.</div>
|
||
<div class="mat-step__progress"><span>65 %</span><span class="mat-step__progress-bar"><span class="mat-step__progress-fill" style="width:65%"></span></span><span>til Skalering</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="mat-step" data-state="future">
|
||
<div class="mat-step__icon" aria-hidden="true">3</div>
|
||
<div>
|
||
<div class="mat-step__name">Skalering</div>
|
||
<div class="mat-step__desc">OKR rullet ut til hele organisasjonen. Cross-team alignment.</div>
|
||
</div>
|
||
</div>
|
||
<div class="mat-step" data-state="future">
|
||
<div class="mat-step__icon" aria-hidden="true">4</div>
|
||
<div>
|
||
<div class="mat-step__name">Moden</div>
|
||
<div class="mat-step__desc">OKR er drift. Strategisk forankring fra Stortingsmelding til team-OKR.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2 style="font-size: var(--font-size-lg); margin: 0 0 var(--space-3);">Config-modenhet (5 nivåer)</h2>
|
||
<div class="mat-ladder">
|
||
<div class="mat-step" data-state="completed"><div class="mat-step__icon" aria-hidden="true">✓</div>
|
||
<div><div class="mat-step__name">Bare <span class="mat-step__pill mat-step__pill--complete">Fullført</span></div>
|
||
<div class="mat-step__desc">Defaults overalt. Ingen sentralisert konfig.</div></div></div>
|
||
<div class="mat-step" data-state="completed"><div class="mat-step__icon" aria-hidden="true">✓</div>
|
||
<div><div class="mat-step__name">Configured <span class="mat-step__pill mat-step__pill--complete">Fullført</span></div>
|
||
<div class="mat-step__desc">Eksplisitte verdier per miljø. Ingen drift-deteksjon.</div></div></div>
|
||
<div class="mat-step" data-state="current"><div class="mat-step__icon" aria-hidden="true">3
|
||
<span class="mat-step__ring" aria-hidden="true"><svg viewBox="0 0 52 52"><circle class="ring-bg" cx="26" cy="26" r="24"></circle><circle class="ring-fill" cx="26" cy="26" r="24" stroke-dasharray="150.8" stroke-dashoffset="105.6"></circle></svg></span></div>
|
||
<div><div class="mat-step__name">Structured <span class="mat-step__pill mat-step__pill--current">Nå</span></div>
|
||
<div class="mat-step__desc">Skjema-validert konfig. Versjonert i Git. Endringssporbarhet.</div>
|
||
<div class="mat-step__progress"><span>30 %</span><span class="mat-step__progress-bar"><span class="mat-step__progress-fill" style="width:30%"></span></span><span>til Automated</span></div></div></div>
|
||
<div class="mat-step" data-state="future"><div class="mat-step__icon" aria-hidden="true">4</div>
|
||
<div><div class="mat-step__name">Automated</div>
|
||
<div class="mat-step__desc">CI-validering. Auto-rollback ved feil. Drift-detektor.</div></div></div>
|
||
<div class="mat-step" data-state="future"><div class="mat-step__icon" aria-hidden="true">5</div>
|
||
<div><div class="mat-step__name">Governed</div>
|
||
<div class="mat-step__desc">Policy-as-code. Audit-trail. Approval-workflows for prod.</div></div></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html>
|