@klodd/ds 3.20.1 → 3.21.0

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.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/02-components.md

@@ -133,6 +133,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/DESIGN-LANGUAGE.md

@@ -376,6 +376,122 @@ 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).
+
 ## 12. När ändra regler
 
 Denna fil är **locked**. Ändringar kräver: