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>
99 lines
6 KiB
HTML
99 lines
6 KiB
HTML
<!doctype html>
|
|
<html lang="nb">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Persistent-Antipattern Badge · 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" />
|
|
</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 / Persistent-Antipattern Badge</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 · /okr:analyse cross-cycle</span>
|
|
<h1 style="margin: 4px 0 6px;">Persistent-Antipattern Badge</h1>
|
|
<p class="text-secondary" style="max-width: 65ch;">Markerer antipatterns som har dukket opp i 2+ påfølgende sykluser. Pulserende prikk skiller seg fra one-shot.</p>
|
|
</div>
|
|
|
|
<h2 style="font-size: var(--font-size-lg); margin: 0 0 var(--space-3);">I bruk i en finding-tabell</h2>
|
|
<table style="width:100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow:hidden;">
|
|
<thead>
|
|
<tr style="background: var(--color-bg-soft);">
|
|
<th style="text-align:left; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-subtle);">Antipattern</th>
|
|
<th style="text-align:left; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-subtle);">Funnet i</th>
|
|
<th style="text-align:left; padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-subtle);">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 12px 14px;">Aktivitetsfokus i KR</td>
|
|
<td style="padding: 12px 14px; font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-secondary);">T1-25 · T2-25 · T3-25 · T1-26 · T2-26</td>
|
|
<td style="padding: 12px 14px;">
|
|
<button type="button" class="pap-badge" onclick="togglePap(0)" aria-expanded="false" aria-controls="papDetail0">
|
|
Vedvarende <span class="pap-badge__count">5 sykluser</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 14px;">Sandbagging av target-verdier</td>
|
|
<td style="padding: 12px 14px; font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-secondary);">T2-25 · T3-25 · T1-26</td>
|
|
<td style="padding: 12px 14px;">
|
|
<button type="button" class="pap-badge" onclick="togglePap(1)" aria-expanded="false" aria-controls="papDetail1">
|
|
Vedvarende <span class="pap-badge__count">3 sykluser</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 14px;">For mange KR per Objective</td>
|
|
<td style="padding: 12px 14px; font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-secondary);">T2-26</td>
|
|
<td style="padding: 12px 14px;">
|
|
<span class="pap-badge pap-badge--oneshot" title="Kun én syklus så langt">Én syklus</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<section class="pap-detail" id="papDetail0" style="margin-top: var(--space-3);">
|
|
<h4>Aktivitetsfokus i KR</h4>
|
|
<p class="text-secondary" style="margin: 0; font-size: var(--font-size-sm);">KR-formuleringer beskriver aktiviteter ("Innføre nytt system", "Pilotere X") i stedet for målbare utfall. Vedvarende mønster på tvers av sykluser indikerer at OKR-coaching ikke har festet seg.</p>
|
|
<div class="pap-detail__cycles">
|
|
<span class="pap-detail__cycle">T1-2025 · 4 forekomster</span>
|
|
<span class="pap-detail__cycle">T2-2025 · 3 forekomster</span>
|
|
<span class="pap-detail__cycle">T3-2025 · 5 forekomster</span>
|
|
<span class="pap-detail__cycle">T1-2026 · 6 forekomster</span>
|
|
<span class="pap-detail__cycle">T2-2026 · 4 forekomster</span>
|
|
</div>
|
|
<div class="pap-detail__rec"><strong>Anbefaling:</strong> Vurder OKR-coaching eller retrospective-fokus på outcome vs activity. Spør "Hva endrer seg for innbyggeren hvis dette KR-et oppfylles?"</div>
|
|
</section>
|
|
|
|
<section class="pap-detail" id="papDetail1" style="margin-top: var(--space-3);">
|
|
<h4>Sandbagging av target-verdier</h4>
|
|
<p class="text-secondary" style="margin: 0; font-size: var(--font-size-sm);">Targets satt så lavt at de oppnås uten reell innsats. Score > 0,9 to sykluser på rad uten endring i baseline.</p>
|
|
<div class="pap-detail__cycles">
|
|
<span class="pap-detail__cycle">T2-2025</span>
|
|
<span class="pap-detail__cycle">T3-2025</span>
|
|
<span class="pap-detail__cycle">T1-2026</span>
|
|
</div>
|
|
<div class="pap-detail__rec"><strong>Anbefaling:</strong> Innfør stretch-target som komplement, eller vurder aspirational vs committed-skille (se OKR-mode).</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
function togglePap(i) {
|
|
const d = document.getElementById('papDetail' + i);
|
|
const open = d.getAttribute('data-open') === 'true';
|
|
d.setAttribute('data-open', open ? 'false' : 'true');
|
|
event.currentTarget.setAttribute('aria-expanded', open ? 'false' : 'true');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|