@klodd/ds 3.21.0 → 3.21.2

package/css/components/badge.css

@@ -98,3 +98,142 @@
   background: var(--surface-default);
   border-color: var(--border-subtle);
 }
+
+/* --na: AI har inte bedömt (relevance_score IS NULL). Klickbar för att
+   trigga rescore. Dashed border signalerar "bedömning saknas, klicka för
+   att försöka". Lyft från Jubb-domain v3.21.1 (2026-05-13).
+   Användning: <button class="score-pill score-pill--na" data-action="rescore" data-job-id="X">N/A</button> */
+.score-pill--na {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border: 1px dashed var(--border-default);
+  cursor: pointer;
+  font-family: inherit;
+  transition: background var(--dur-fast) var(--ease-default),
+              color var(--dur-fast) var(--ease-default);
+}
+@media (hover: hover) and (pointer: fine) {
+  .score-pill--na:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+.score-pill--na:active { transform: scale(0.96); }
+.score-pill--na:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.score-pill--na:disabled,
+.score-pill--na[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: progress;
+}
+.score-pill--na.is-loading {
+  background: var(--surface-active);
+}
+
+
+/* ================================================================
+   .score-circle - cirkulär relevance-score-display (v3.21.2)
+   Standardstorlek 36x36 matchar .avatar default. Tabular-nums för
+   visuellt-jämn siffer-rendering. Klickbart fall (--na) triggar
+   rescore med is-loading spinning animation.
+
+   Modifiers: --strong (grön), --medium (gul), --low (grå), --na (klickbar)
+   States på --na: :hover, :active, :focus-visible, :disabled, .is-loading
+
+   Användning:
+     <span class="score-circle score-circle--strong">8.4</span>
+     <button class="score-circle score-circle--na" data-action="rescore"
+             data-job-id="X" aria-label="Bedöm jobbet">N/A</button>
+   ================================================================ */
+.score-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.score-circle--strong {
+  color: var(--positive);
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.score-circle--medium {
+  color: var(--warning);
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+}
+
+.score-circle--low {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border-color: var(--border-subtle);
+}
+
+/* --na: klickbar (button-element) som triggar rescore via JS. Dashed
+   border signalerar "bedömning saknas, klicka för att försöka". */
+.score-circle--na {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border: 1px dashed var(--border-default);
+  cursor: pointer;
+  font-size: var(--fs-11);
+  font-family: inherit;
+  transition: background var(--dur-fast) var(--ease-default),
+              color var(--dur-fast) var(--ease-default);
+}
+@media (hover: hover) and (pointer: fine) {
+  .score-circle--na:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+.score-circle--na:active { transform: scale(0.96); }
+.score-circle--na:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.score-circle--na:disabled,
+.score-circle--na[aria-disabled="true"] {
+  cursor: progress;
+}
+
+/* is-loading: spinning border-segment medan AI bedömer. Texten döljs
+   visuellt (transparent) men ::after-pseudo ritar en roterande ring.
+   prefers-reduced-motion slowar ner animationen markant. */
+.score-circle--na.is-loading {
+  color: transparent;
+  background: var(--surface-default);
+  border-color: var(--border-default);
+  border-style: solid;
+}
+.score-circle--na.is-loading::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: var(--accent-9);
+  animation: score-circle-spin 0.8s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .score-circle--na.is-loading::after {
+    animation-duration: 2s;
+  }
+}
+@keyframes score-circle-spin {
+  to { transform: rotate(360deg); }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.21.0",
+  "version": "3.21.2",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/02-components.md

@@ -33,11 +33,12 @@ För varje entry gäller:
 - **Tokens:** `--surface-sunken/-default`, `--accent-9`, `--accent-a3` (focus-ring), `--bg-danger` (error-state)
 
 ### badge (`badge.css`)
-- **Blocks:** `.badge`, `.score-pill` (sibling, kanonisk definition)
-- **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.score-pill--strong/-medium/-low`
-- **Anvand:** Status-pills (statiska)
+- **Blocks:** `.badge`, `.score-pill` (legacy rectangular form, behålls för bakåtkompat), `.score-circle` (v3.21.2 - cirkulär form, ersätter score-pill för relevance-displays)
+- **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.score-pill--strong/-medium/-low/-na`, `.score-circle--strong/-medium/-low/-na`
+- **States på `.score-pill--na` + `.score-circle--na`:** `.is-loading` (spinning animation), `[aria-disabled="true"]`, `:disabled` (cursor: progress)
+- **Anvand:** Status-pills (statiska) + score-circle--na som klickbar rescore-trigger med spinning loading-animation. Standardstorlek 36x36 matchar .avatar default.
 - **INTE:** Klickbara chips (anvand `.chip`)
-- **Tokens:** `--positive/-dim/-border`, `--warning/-dim/-border`, `--bg-danger`, `--accent-text/-a2/-a6`
+- **Tokens:** `--positive/-dim/-border`, `--warning/-dim/-border`, `--bg-danger`, `--accent-text/-a2/-a6/--accent-9`, `--surface-default/-hover/-active`, `--border-default/-focus/-subtle`, `--dur-fast`, `--ease-default`
 
 ### card (`card.css`)
 - **Blocks:** `.card`

package/references/04-locked-decisions/0016-mina-sidor-doctrine.md

@@ -0,0 +1,147 @@
+# 0016 - "Mina sidor"-doctrine
+
+## Status
+Locked.
+
+## Context
+
+Audit 2026-05-13 jämförde Ekonoms `/jag` (sprint 66b-doktrinen) mot
+Jubbs `/min-sida` (just byggd från grund). Båda är settings-hubbar -
+samma roll men olika UI-disciplin.
+
+Ekonom hade etablerat ett moget mönster (profilkort med inline-edit,
+logisk sektion-gruppering, "Att åtgärda"-conditional, field_sheet-
+macros för editing, LEAF-topbar). Jubb hade snabbt byggts utan motsvarande
+struktur (profilkort utan namn, blandning av setting-rows och inline-knappar,
+ingen actionable-conditional).
+
+Per Calle's princip "alla appar ska ha samma namn och komponentstruktur"
+behöver ett gemensamt locked pattern etableras för "Mina sidor" som
+används av alla nuvarande och framtida Klodd-appar.
+
+## Decision
+
+**Locked template-struktur för "Mina sidor"** (kanonisk ordning):
+
+```
+┌────────────────────────────────────────────┐
+│ Topbar (3-kol grid, LEAF-anpassad)         │
+│   col 1: pwa-avatar                        │
+│   col 2: topbar__logo "Min sida"           │
+│   col 3: <span class="avatar"> utan link   │  ← LEAF
+├────────────────────────────────────────────┤
+│ Profilkort (.profile-panel)                │
+│   · avatar--lg                             │
+│   · display-name med inline-edit (om       │
+│     multi-user) eller skippa (single-user) │
+│   · email (.text-caption eller .text-meta) │
+├────────────────────────────────────────────┤
+│ Panel "Att åtgärda" CONDITIONAL            │  ← Alerts först
+│   panel--attention                         │
+│   setting-rows med .panel__pill (count)    │
+├────────────────────────────────────────────┤
+│ Panel "Min [domän]" OPTIONAL               │  ← om domän-data finns
+│   setting-rows som öppnar field_sheet      │
+├────────────────────────────────────────────┤
+│ Panel "Mina inställningar"                 │
+│   setting-rows + toggles + sheets          │
+├────────────────────────────────────────────┤
+│ Panel "Mina vyer"                          │
+│   setting-rows som länk-rows               │
+├────────────────────────────────────────────┤
+│ Panel "Installera [app]" CONDITIONAL       │  ← om !standalone PWA
+│   iOS Safari-instruktioner (iPhone-only)   │
+├────────────────────────────────────────────┤
+│ Logout-row                                 │
+│   .btn--logout (paketet)                   │
+└────────────────────────────────────────────┘
+```
+
+### Regler
+
+1. **Topbar är 3-kol-grid, LEAF-anpassad.** Avatar i kolumn 3 finns
+   visuellt för layout-konsekvens men är `<span class="avatar">` utan
+   `<a>`-wrapper. Inte klickbar (användaren är redan på destinationen).
+   Topbar__logo blir korrekt centrerat av grid `auto 1fr auto`.
+
+2. **Topbar-text "Min sida"** (svenska). Kort, idiomatisk, konsekvent
+   över alla Klodd-appar.
+
+3. **Profilkort är obligatoriskt.** `.profile-panel` (lyft till paketet
+   v3.21.0). Avatar--lg + email som minimum. Display-name med inline-edit
+   OBLIGATORISKT för multi-user-appar (Ekonom), OPTIONAL för single-user-
+   appar (Jubb). Single-user-app utan tydligt display-name-bruk får skippa.
+
+4. **Sektion-ordning är "alerts first".** "Att åtgärda" placeras FÖRE
+   "Min [domän]" och övriga settings så användaren direkt ser pending
+   tasks vid sidladdning.
+
+5. **"Min [domän]"-panel är OPTIONAL.** Bara om appen har domän-
+   specifika personliga värden separat från preferences (Ekonom:
+   inkomst + saldo). Single-purpose-appar (Jubb) slår ihop allt till
+   "Mina inställningar".
+
+6. **Alla settings använder setting-row + sheet.** Inga inline-knappar
+   för actions som ändrar state. Detta inkluderar:
+   - Choice-actions: `.sheet__item-grid` med `.sheet__item--primary`
+   - Field-editing: `field_sheet` macro
+   - Multi-field-editing: `multi_field_sheet` macro
+   - Toggles: `setting-toggle` inom setting-row
+
+7. **Conditional panels visas via JS eller Jinja-conditional.** Inte
+   alltid synliga, inte alltid dolda. Aktivering-villkor i ADR/template-
+   kommentar.
+
+8. **PWA-install-panel är iPhone-only.** Klodd-appar utvecklas för iOS
+   PWA + dev-desktop. Android Chrome-instruktioner inkluderas inte
+   (skulle ge falskt-positiva intryck att Android stöds). Detection
+   via `window.matchMedia('(display-mode: standalone)').matches`.
+
+9. **Logout är paketet `.btn--logout` i `.logout-row`** (v3.21.0).
+
+### Domain-naming-konvention per app
+
+| App | "Min [domän]" eller "Mina inställningar" |
+|---|---|
+| Ekonom | Min ekonomi (inkomst, saldo) + Mina inställningar (toggles, abonnemang) |
+| Jubb | Skip "Min [domän]" → Mina inställningar (Sökläge, Notiser, AI-profil) |
+| Future-app | "Min [domän]" om personliga värden finns separat |
+
+## Konsekvenser
+
+**Bra:**
+- Single source of truth för settings-hubbar
+- Future-Margevo + framtida appar får gratis-pattern
+- A11y + iOS-konvention: heading-hierarki + setting-row-rytm
+- Komposit av befintliga paket-komponenter (ingen ny CSS behövs)
+
+**Trade-offs:**
+- Single-user-appar tappar ett potentiellt personlighet-element (display-
+  name) - acceptabelt eftersom inline-edit av single-user-namn är
+  cosmetic, inte funktionellt.
+- "Min sida" är längre än iOS-konvention "Mitt" - men matchar Calle's
+  preferens (mer explicit).
+
+## Migration 2026-05-13
+
+**Jubb:**
+- /min-sida-template omskriven enligt doktrinen
+- Topbar: lägg avatar i kolumn 3 (`<span class="avatar">` utan link)
+- "Att åtgärda" CONDITIONAL panel: pending triage-jobb med relevance >= 7.0
+- Slå ihop "Sökläge" + "Notiser" + "AI-profil-förslag" till "Mina
+  inställningar"-panel
+- "Installera Jubb": bara iOS Safari-instruktioner
+
+**Ekonom:**
+- /jag topbar: byt "Mitt" → "Min sida"
+- Topbar: lägg `<span class="avatar">` i kolumn 3 (visuell paritet)
+- Flytta "Att åtgärda" till FÖRE "Min ekonomi" (alerts first)
+- Lägg "Installera Ekonom" CONDITIONAL panel (paritet, iOS-only)
+
+## References
+
+- ADR 0011-strikt-bem-elementsyntax.md (besläktad - BEM-disciplin)
+- ADR 0013-visual-coherence-doctrine.md (besläktad - visuell rytm)
+- ADR 0015-panel-title-tag-doctrine.md (besläktad - heading-semantik)
+- 02-components.md profile-panel-entry (v3.21.0)
+- DESIGN-LANGUAGE.md sektion 13 (topbar-layout) + sektion 17 (Mina sidor)

package/references/DESIGN-LANGUAGE.md

@@ -492,6 +492,44 @@ inte brott - browser-tree accepterar skipping levels).
 **Etablerad 2026-05-13** efter panel__title-audit över Jubb + Ekonom.
 Se ADR 0015 (panel-title-tag-doctrine).
 
+## 17. "Mina sidor"-doktrin (settings-hub-pattern)
+
+**Regel:** alla Klodd-appar har en gemensam "Mina sidor"-route med
+locked template-struktur. Route-URL kan variera per app (`/jag` i
+Ekonom, `/min-sida` i Jubb) men UI-pattern är konsekvent.
+
+### Template-struktur (kanonisk ordning)
+
+1. **Topbar** - 3-kol-grid med LEAF-anpassning: pwa-avatar + "Min sida" + `<span class="avatar">` utan link
+2. **Profilkort** - `.profile-panel` med avatar--lg + ev. display-name med inline-edit + email
+3. **"Att åtgärda"** CONDITIONAL - `panel--attention` med setting-rows + `.panel__pill`
+4. **"Min [domän]"** OPTIONAL - app-specifika personliga värden
+5. **"Mina inställningar"** - app-agnostiska preferences via setting-rows + sheets
+6. **"Mina vyer"** - navigation till sub-vyer
+7. **"Installera [app]"** CONDITIONAL - iPhone-only PWA-instruktioner
+8. **Logout-row** - `.btn--logout`
+
+### Kritiska regler
+
+- Topbar avatar i kolumn 3 är `<span class="avatar">` UTAN `<a>`-wrapper på Min sida (LEAF-pattern - användaren är redan på destinationen, men element kvar för layout-konsekvens)
+- Topbar-text alltid **"Min sida"** över alla appar (svenska, kort)
+- Alla settings använder **setting-row + sheet** - inga inline-knappar för state-changes
+- "Att åtgärda" placeras **FÖRE** "Min [domän]" så alerts visas direkt
+- Display-name **obligatoriskt** för multi-user-appar (Ekonom), **optional** för single-user (Jubb)
+- "Min [domän]" är **OPTIONAL** panel - bara om appen har domän-specifika personliga värden
+- PWA-install-panel **bara iOS Safari**-instruktioner (Klodd-appar är iPhone-targeted)
+
+### Förbjudet
+
+- Inline-knapp för push-aktivering (måste vara setting-row)
+- Topbar utan kolumn 3-avatar på Min sida (bryter grid-centrering)
+- Topbar utan LEAF-anpassning (avatar måste vara `<span>`, inte `<a>` på destinationen)
+- Android Chrome-instruktioner i PWA-install-panel (klodd-appar är iPhone-only)
+
+**Etablerad 2026-05-13** efter audit-jämförelse mellan Ekonoms `/jag`
+och Jubbs `/min-sida`. Se ADR 0016 (mina-sidor-doctrine) för fullständig
+specifikation + locked rationale.
+
 ## 12. När ändra regler
 
 Denna fil är **locked**. Ändringar kräver: