@klodd/ds 3.20.1 → 3.21.1

package/css/components/badge.css

@@ -98,3 +98,36 @@
   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);
+}

package/css/components/button.css

@@ -122,6 +122,18 @@
   }
 }
 
+/* --logout: subtil ghost-variant for "Logga ut"-knapp. Opacity 0.7
+   gor knappen visuellt mindre framtradande an primar-actions men
+   fortfarande klickbar. Lyft fran Ekonoms .logout-btn (v3.21.0).
+   Anvands som modifier ovanpa .btn--ghost --sm:
+     <button class="btn btn--ghost btn--sm btn--logout" data-action="logout">Logga ut</button> */
+.btn--logout {
+  opacity: 0.7;
+}
+@media (hover: hover) and (pointer: fine) {
+  .btn--logout:hover { opacity: 1; }
+}
+
 /* --positive: transparent + positive-border. Bekraftande action
    (t.ex. "Gemensam"-flagga i review_queue). Lyft fran Ekonom v3.9.0. */
 .btn--positive {

package/css/components/profile-panel.css

@@ -0,0 +1,57 @@
+/* ================================================================
+   components/profile-panel.css
+   Centrerad profilkort: avatar (lg) + namn + email.
+   Anvands pa /jag (Ekonom) och /min-sida (Jubb).
+
+   Blocks:
+     .profile-panel  - centrerad flex-column med komposit-children
+
+   Inga BEM-element - children ar paketets atomer (.avatar, .heading,
+   .inline-edit, .text-caption, .text-meta). Descendant-overrides
+   kalibrerar margin/layout for child-positions inom kortet.
+
+   Anvandning:
+     <div class="panel profile-panel">
+       <span class="avatar avatar--lg">CE</span>
+       <p class="text-meta">calle@klodd.io</p>
+     </div>
+
+   Med inline-edit (Ekonoms /jag-mönster):
+     <div class="panel profile-panel" data-profile-panel>
+       <span class="avatar avatar--lg">CE</span>
+       <p class="heading inline-edit">
+         <span class="inline-edit__text">Calle</span>
+         <button class="inline-edit__btn">...</button>
+       </p>
+       <p class="text-caption">calle@klodd.io</p>
+     </div>
+
+   Lyft fran Ekonoms .profile-panel-centered + Jubbs .profile-panel
+   (v3.21.0, 2026-05-13). Single source of truth ersatter app-domain-
+   kopior i ekonom.css + jubb.css.
+   ================================================================ */
+.profile-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--space-8);
+  padding: var(--space-20) var(--space-16);
+}
+
+.profile-panel .avatar--lg {
+  margin-bottom: var(--space-4);
+}
+
+.profile-panel .inline-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  justify-content: center;
+  margin: 0;
+}
+
+.profile-panel .text-caption,
+.profile-panel .text-meta {
+  margin: 0;
+}

package/css/index.css

@@ -41,6 +41,7 @@
 /* v2.0.0 - flyttade fran app-repona */
 @import './components/banner.css';
 @import './components/panel.css';
+@import './components/profile-panel.css';
 @import './components/hub-card.css';
 @import './components/stat.css';
 @import './components/form.css';

package/css/utilities.css

@@ -113,3 +113,68 @@
 /* Text-color utilities (CSP-migration: ersatter style="color: var(--text-X)") */
 .text-subtle { color: var(--text-subtle); }
 .text-muted  { color: var(--text-muted); }
+
+
+/* ================================================================
+   Layout-utilities (v3.21.0 lyft fran Jubb-domain)
+   ================================================================ */
+
+/* Logout-rad: centrerad btn-wrapper. Anvands pa /jag (Ekonom) och
+   /min-sida (Jubb) som container for "Logga ut"-knappen. */
+.logout-row {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--space-24);
+  margin-bottom: var(--space-16);
+}
+
+
+/* ================================================================
+   Text-utilities (v3.21.0 lyft fran Jubb-domain)
+   ================================================================ */
+
+/* Inline-separator "·" mellan meta-text-items. Disabled-fargad
+   sa den fungerar som tyst avgransning utan att dra blicken. */
+.dot-sep {
+  margin: 0 var(--space-6);
+  color: var(--text-disabled);
+}
+
+/* Pre-formatted code/text. Sunken bakgrund, monospace, pre-wrap
+   for line-break-preservering med word-wrap pa lang text. */
+.code-block {
+  margin: 0;
+  padding: var(--space-12);
+  background: var(--surface-sunken);
+  border-radius: var(--radius-14);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+  color: var(--text-subtle);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+/* Pre-formatted long-text (job-descriptions, multi-line content).
+   Likt .code-block men sans-font + default-fargad text. */
+.description-block {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--fs-13);
+  color: var(--text-default);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  line-height: var(--lh-base);
+}
+
+/* ul med default discs + standardspacing. Plain bullet-lista. */
+.bullet-list {
+  margin: 0;
+  padding-left: var(--space-20);
+}
+
+.bullet-list > li {
+  margin-bottom: var(--space-4);
+  font-size: var(--fs-13);
+  color: var(--text-default);
+  line-height: var(--lh-base);
+}

package/package.json

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

package/references/02-components.md

@@ -34,10 +34,11 @@ För varje entry gäller:
 
 ### 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)
+- **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.score-pill--strong/-medium/-low`, `.score-pill--na` (v3.21.1 - klickbar N/A för rescore-trigger)
+- **States på `.score-pill--na`:** `.is-loading`, `[aria-disabled="true"]`, `:disabled` (cursor: progress)
+- **Anvand:** Status-pills (statiska) + score-pill--na som klickbar rescore-trigger (vanligtvis som `<button>`-element med `data-action="rescore"`)
 - **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`, `--surface-default/-hover/-active`, `--border-default/-focus/-subtle`
 
 ### card (`card.css`)
 - **Blocks:** `.card`
@@ -133,6 +134,15 @@ För varje entry gäller:
 - **Modifiers:** `.panel--info`, `.panel--info-warning`, `.panel--danger`, `.panel--attention`
 - **Anvand:** Sektion med ramad styling och titel
 - **INTE:** Klickbart kort (anvand `.card--interactive`)
+- **HTML-tag for `.panel__title`:** `<h3>` default. Specialfall: `<span>` inom `.panel__step-row` (compound badge+title), `<summary>` inom `<details>`-element. Se ADR 0015 (panel-title-tag-doctrine).
+
+### profile-panel (`profile-panel.css`) - v3.21.0
+- **Blocks:** `.profile-panel`
+- **Anvand:** Centrerad profilkort med avatar + namn + email/meta. Pa /jag (Ekonom) och /min-sida (Jubb).
+- **INTE:** Allmant kort med titel (anvand `.panel` med `.panel__title`)
+- **Tokens:** `--space-8/-16/-20`, `--space-4` (avatar margin), `--space-6` (inline-edit gap)
+- **Composition:** Inga egna BEM-element. Children ar paketets atomer (`.avatar--lg`, `.heading`, `.inline-edit`, `.text-caption`, `.text-meta`). Descendant-overrides for child-positions inom kortet.
+- **Lyft fran:** Ekonoms `.profile-panel-centered` + Jubbs `.profile-panel` (v3.21.0).
 
 ### hub-card (`hub-card.css`)
 - **Blocks:** `.hub-card`, `.hub-list` (sibling-wrapper for kort-lista), `.hub-category` (sibling-rubrik over hub-list)

package/references/04-locked-decisions/0014-css-specificity-doctrine.md

@@ -0,0 +1,147 @@
+# 0014 - CSS Specificity Doctrine
+
+## Status
+Locked.
+
+## Context
+
+Sprint 2026-05-13 avslöjade en tyst CSS-specificity-bugg i kv-list.css.
+Default-regeln var skriven som:
+
+```css
+.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider) {
+  color: var(--text-subtle);
+  font-size: var(--fs-13);
+}
+```
+
+Specificity blev 0,3,1 (3 klasser via .kv-list + 2x :not()-arg, plus 1
+li element). Modifier-reglerna `.kv-list__item--strong` (color: text-
+default + medium weight) och `.kv-list__item--sub` (font-size: fs-11)
+hade specificity 0,1,0 - kunde inte vinna mot 0,3,1.
+
+Symptom: Calle/Lisa/Totalt-rader förblev text-subtle istället för
+text-default (font-weight: medium tillämpades dock - delvis vinst gav
+intryck att modifier "fungerade"). Verklig kostnad förblev fs-13
+istället för fs-11.
+
+Tyst bugg eftersom font-weight på --strong och font-size på --sub
+INTE konflikterade med default-regeln, så modifier-classes såg ut att
+fungera. Visuell skillnad förlorades men ingen runtime-error.
+
+Felmönstret: `:not()`-filter på default-regeln drog upp specificity
+till en nivå där flat modifier-classes inte kunde override:a.
+
+## Decision
+
+**Locked regel:** default/base-regler för rad-layout, list-items,
+comp-bas-styling **får inte** sätta `color`, `font-size`, `font-weight`,
+`background`, `border`, `text-transform`, `letter-spacing` när
+modifier-classes existerar för samma property.
+
+Tre alternativ för att undvika konflikt:
+
+### Alternativ 1: Inheritance från block-parent (rekommenderat)
+
+Sätt default-properties på **block-roten** (`.X`), inte på item-rule
+(`.X__item` eller `.X > li`).
+
+```css
+/* RÄTT */
+.kv-list {
+  color: var(--text-subtle);
+  font-size: var(--fs-13);
+}
+
+.kv-list > li:not(--budget):not(--divider) {
+  display: flex;
+  padding: var(--space-8) 0;
+  /* INGEN color/font-size */
+}
+
+.kv-list__item--strong {  /* specificity 0,1,0 - vinner via cascade */
+  color: var(--text-default);
+  font-weight: var(--fw-medium);
+}
+```
+
+Alla item-rader **ärver** color/font-size från `.kv-list`. Modifier-
+classes (0,1,0) override:ar via inheritance utan specificity-konflikt.
+
+### Alternativ 2: Höj modifier-specificity
+
+Om Alternativ 1 inte funkar (t.ex. parent har inte naturlig
+inheritance-relation), matcha modifier-specificity till default-rule:
+
+```css
+.X > li.X--strong:not(.X--budget):not(.X--divider) { color: ...; }
+```
+
+Brus och svårläsligt - undvik om möjligt.
+
+### Alternativ 3: :where() runt default-rule
+
+```css
+:where(.X > li:not(.X--budget):not(.X--divider)) {
+  color: var(--text-subtle);  /* specificity 0,0,0 */
+}
+```
+
+`:where()` nollställer specificity. Modifiers vinner trivialt. Modernt
+CSS (alla browsers sedan 2021). Använd när inheritance inte fungerar
+och Alternativ 2 är för fult.
+
+## Konsekvenser
+
+**Bra:**
+- Modifier-classes vinner förutsägbart utan specificity-hack
+- Default-rules kan ha `:not()`-filter för layout-undantag utan att
+  förstöra modifier-override
+- Inheritance-based design ger renare CSS (mindre upprepning)
+
+**Trade-offs:**
+- Kräver att block-parent (.X) finns och har naturlig
+  inheritance-relation
+- Inheritance fungerar inte för layout-properties (display, padding,
+  gap) - dessa måste fortfarande sättas på item-rule
+- Lite mer tankearbete vid komponent-design (vad är "default" och vad
+  är "modifier-overridable")
+
+## Migration: kv-list 3.19.0 → 3.19.3
+
+3.19.1 introducerade `:not()`-filter på default-rule (för --budget +
+--divider exclusion) som gav specificity 0,3,1. Modifier-reglerna
+tappade tyst. Tre patches behövdes:
+
+- 3.19.1: layout-fix för bare LI (introducerade buggen)
+- 3.19.2: fix layout för --budget (lade till :not()-filter)
+- 3.19.3: flyttade color/font-size från item-rule till .kv-list-
+  parent (löste specificity-konflikten)
+
+## Audit över paketet
+
+Sprint 2026-05-13 audit över alla 39 paket-CSS-filer hittade INGEN
+liknande bugg utöver kv-list. Övriga komponenter har:
+- Default-rules på 0,1,0 (.X { ... }) - matchas av modifier 0,1,0 via
+  cascade-order
+- Context-overrides på 0,2,0 (.X--mod .X__element) - intentional för
+  cross-element-styling, inte konflikt mot self-modifier
+
+Mönstret som triggade kv-list-buggen var unikt: `:not()`-filter på
+en default-rule som också konkurrerade om color/font-size med
+modifiers på samma block. Det mönstret ska undvikas framöver.
+
+## Future work
+
+1. **Stylelint-plugin** för att varna när default-rules sätter samma
+   property som modifier-rules i samma fil.
+2. **Custom selector-specificity-linting**: flagga rules med
+   specificity > 0,2,0 som inte är context-overrides.
+
+## References
+
+- klodd-ds commit 9854004 (3.19.3 fix)
+- kv-list.css JSDoc-header rad 24-35
+- DESIGN-LANGUAGE.md sektion 14 (CSS-specificity-disciplin)
+- ADR 0011-strikt-bem-elementsyntax.md (besläktad)
+- ADR 0013-visual-coherence-doctrine.md (besläktad)

package/references/04-locked-decisions/0015-panel-title-tag-doctrine.md

@@ -0,0 +1,122 @@
+# 0015 - Panel-title-tag-doctrine
+
+## Status
+Locked.
+
+## Context
+
+Audit 2026-05-13 kvällsessionen avslöjade två problem med
+`.panel__title`-användning över Klodd-ekosystemet:
+
+**Problem 1: Inkonsekvent HTML-tagg i Ekonom.**
+- 35 platser använder `<div class="panel__title">` (94%)
+- 2 platser använder `<span class="panel__title">` (auto_kategorisering.html)
+- 1 plats använder `<summary class="panel__title">` (bolan.html)
+
+`<div>` saknar heading-semantik. Screen readers kan inte navigera
+mellan paneler via heading-nav. Sökmotorer ser ingen rubrik-hierarki.
+
+**Problem 2: Jubb använder `.hero__label` som panel-rubrik.**
+- 25 platser har `<p class="hero__label">` som rubrik för en panel som
+  innehåller list/text/textarea - INTE följd av `.hero__amount`.
+- Bara 1 plats är legitim hero-kontext (dashboard.html med pending_count
+  som hero-amount).
+
+Felanvändningen uppstod eftersom `.hero__label` och `.panel__title`
+visuellt liknar varandra (12px vs 11px, samma color/weight/letter-
+spacing). Felet kostade inget visuellt, men semantiskt är klassen
+"label OVAN en hero-amount" - inte en generisk paneltitel.
+
+## Decision
+
+**Locked regel:** panel-rubriker använder `<h3 class="panel__title">`
+som default-tagg.
+
+### Specialfall (två dokumenterade undantag)
+
+**1. Inline i `.panel__step-row` eller `.panel__title-row`:**
+
+Använd `<span class="panel__title">` när rubriken sitter inline i en
+flex-rad med andra element (step-badge, meta, link). Block-element
+(h3) bryter flex-layouten.
+
+```html
+<div class="panel__step-row">
+  <span class="panel__step-badge">Steg 1</span>
+  <span class="panel__title">Bankavi-matchning</span>
+</div>
+```
+
+**2. Inom `<details>`-element:**
+
+Använd `<summary class="panel__title">` eftersom native HTML kräver
+`<summary>` som första child av `<details>`. Summary fungerar
+analogt med en heading - aria-tree exponerar den som klickbar
+expander.
+
+```html
+<details class="panel">
+  <summary class="panel__title">Värderingshistorik (3)</summary>
+  <ul class="list mt-12">...</ul>
+</details>
+```
+
+### `.hero__label` vs `.panel__title` - definition
+
+- `<p class="hero__label">` används ENDAST om följt av `<p class="hero-amount">`
+  eller `<p class="hero__amount--card">`. Klassen är "labeltext OVANFÖR
+  en stor siffer-display".
+- Allt annat (rubrik för list, table, form, text-content) ska vara
+  `<h3 class="panel__title">`.
+
+Card-hero-pattern (panel som innehåller hero-mönster) är legitimt:
+
+```html
+<div class="panel collapsible">
+  <p class="hero__label">Gemensamma utgifter</p>
+  <p class="hero__amount--card">12 500 kr</p>
+</div>
+```
+
+Här är `.hero__label` korrekt eftersom `.hero__amount--card` följer.
+
+## Konsekvenser
+
+**Bra:**
+- A11y-semantik korrekt: screen readers exponerar paneler som
+  navigerbara rubriker
+- Industri-praxis (Radix UI, Material UI, Chakra renderar card-title
+  som h3 default)
+- CSS oförändrad - `.panel__title`-stylling targetar klassen, inte
+  taggen
+- Konsekvens över Klodd-ekosystemet (Jubb + Ekonom + framtida appar)
+
+**Trade-offs:**
+- Heading-hierarki är inte alltid h1→h2→h3 över hela sajten. Vyer utan
+  `<h1 class="heading-1">` får h3 som top-level (icke-ideal men inte
+  brott - browser-tree är OK med "skipping levels").
+- Future custom stylelint-plugin kan enforce: `<h3 class="panel__title">`
+  default + dokumenterade specialfall. Tills dess är det human-disciplin.
+
+## Migration 2026-05-13
+
+**Klodd-ds:** denna ADR + 02-components.md panel-entry uppdaterad +
+DESIGN-LANGUAGE.md ny sektion 16 (HTML-tagg-konvention).
+
+**Ekonom:** 35 `<div class="panel__title">` → `<h3 class="panel__title">`.
+Specialfall (2 span + 1 summary) behålls med kommentar i template.
+
+**Jubb:** 25 `<p class="hero__label">` (icke-hero-kontext) →
+`<h3 class="panel__title">`. Legitim hero-användning (dashboard.html
+rad 16) oförändrad.
+
+Inga CSS-ändringar, ingen npm publish behövs. Bara templates +
+dokumentation.
+
+## References
+
+- DESIGN-LANGUAGE.md sektion 3 (hero vs page-header patterns)
+- 02-components.md panel-entry
+- 02-components.md hero-entry
+- ADR 0011-strikt-bem-elementsyntax.md (besläktad - BEM-disciplin)
+- ADR 0013-visual-coherence-doctrine.md (besläktad - visuell rytm)

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

@@ -376,6 +376,160 @@ universell PWA-refresh-action via tap på vänster avatar.
 
 **Etablerad 2026-05-13.** Refaktor från flex till grid samma datum.
 
+## 14. CSS Specificity-disciplin (modifier-vinst)
+
+**Regel:** default/base-regler för komponenter får INTE sätta `color`,
+`font-size`, `font-weight`, `background`, `border`, `text-transform`
+eller `letter-spacing` på item-level när modifier-classes existerar
+för samma property.
+
+**Default-properties ska sättas på block-roten** (`.X`), inte på
+item-rule. Item-rader ärver via cascade, modifier-classes (0,1,0)
+override:ar utan specificity-konflikt.
+
+**RÄTT (kv-list 3.19.3):**
+```css
+.kv-list {
+  color: var(--text-subtle);    /* default på block-root */
+  font-size: var(--fs-13);
+}
+
+.kv-list > li:not(--budget):not(--divider) {
+  display: flex;
+  /* INGEN color/font-size här */
+}
+
+.kv-list__item--strong {  /* 0,1,0 vinner via cascade */
+  color: var(--text-default);
+  font-weight: var(--fw-medium);
+}
+```
+
+**FEL (kv-list 3.19.1-3.19.2 - tyst bugg):**
+```css
+.kv-list > li:not(--budget):not(--divider) {
+  color: var(--text-subtle);     /* 0,3,1 - för hög! */
+  font-size: var(--fs-13);
+}
+
+.kv-list__item--strong {  /* 0,1,0 - vinner inte mot 0,3,1 */
+  color: var(--text-default);    /* förlorar */
+  font-weight: var(--fw-medium);  /* OK - ingen konflikt */
+}
+```
+
+Tyst bugg: modifier-classes vinner DELVIS (font-weight) men förlorar
+på color/font-size. Visuell skillnad försvinner. Ingen runtime-error.
+
+Se ADR 0014 för fullständig analys + alternativa lösningar (`:where()`,
+modifier-specificity-boost).
+
+**Etablerad 2026-05-13** efter kv-list-specificity-incidenten.
+
+## 15. Sentence-case för labels (svenska)
+
+**Regel:** label- och header-style text använder sentence-case
+("Din dagsbudget"), inte uppercase ("DIN DAGSBUDGET"). Visuell
+hierarki kommer från font-size + weight + color, inte caps.
+
+**Sentence-case (default):**
+- `.hero__label`, `.panel__title`, `.form-section__title`
+- `.sheet__title`, `.hub-category`, `.sub-section-header`
+- Banner-headings, empty-state titlar, card-rubriker
+
+**Uppercase behålls (etablerad konvention):**
+- `.heading-4`, `.text-tiny` (semantiska typo-klasser, dokumenterade
+  som "micro-tracker")
+- `.table th` (tabellhuvuden)
+- `.swipe-decision-overlay` (action-overlays SPARA/FÖRVISA)
+- `.avatar` (initialer "CE")
+- `.panel__step-badge`, `.sheet__field-label--upper` (explicit modifier)
+- Styleguide-element i `/design` (visuell hierarki via caps)
+
+**Rationale:** svensk grafisk konvention. Calle 2026-05-13: "bara
+capital letter och sen gemener, som vanligt." Matchar iOS Settings,
+Apple HIG, modern app-design. Caps reserveras för badges/actions/
+metadata där tighet + kort längd gör det läsbart.
+
+**Letter-spacing:** sentence-case-text använder `var(--ls-tight)`,
+inte `--ls-wider` eller hårdkodad 0.04-0.12em (det är designat för
+uppercase-tracking och ser sträckt ut i sentence-case).
+
+**Etablerad 2026-05-13** efter uppercase-audit över paketet.
+
+## 16. HTML-tagg för `.panel__title`
+
+**Regel:** panel-rubriker använder `<h3 class="panel__title">` som
+default-tagg. Två specialfall behålls:
+
+| Kontext | Tagg | Skäl |
+|---|---|---|
+| Default | `<h3>` | A11y-semantik, screen-reader-navigerbar |
+| Inom `.panel__step-row` | `<span>` | Compound badge+title som en konceptuell rubrik (Steg 1: X) |
+| Inom `<details>` | `<summary>` | Native HTML-krav (summary måste vara första child) |
+
+**Definition av `.hero__label` vs `.panel__title`:**
+- `<p class="hero__label">` ENDAST om följt av `<p class="hero-amount">`
+  eller `<p class="hero__amount--card">`. Klassen är "labeltext OVANFÖR
+  en stor siffer-display".
+- Allt annat (rubrik för list, table, form, text-content, knapp) ska
+  vara `<h3 class="panel__title">`.
+
+**Förbjudet:**
+- `<div class="panel__title">` (saknar heading-semantik)
+- `<p class="panel__title">` (paragraph är fel semantik för rubrik)
+- `<h3 class="hero__label">` (mismatch klass/tagg)
+
+**Rationale:** `<div>` är aria-tree-osynligt - screen readers kan inte
+navigera mellan paneler via heading-shortcut. `<h3>` är industri-praxis
+för card-titles (Radix UI, Material UI, Chakra). CSS oförändrad
+eftersom `.panel__title`-stylling targetar klassen, inte taggen.
+
+**Heading-hierarki:** vyer med `<h1 class="heading-1">` får h1→h3
+(legitimt skip). Vyer utan h1 får h3 som top-level (icke-ideal men
+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: