@klodd/ds 3.21.6 → 4.0.0

package/css/base/typography.css

@@ -17,8 +17,8 @@
    anvand dessa klasser eller (i komponentens CSS) primitive-tokens
    med kommentar om varfor en bundlad klass inte rackte.
 
-   Undantag: .hero-amount (display-siffra, fw 600) - dokumenterat
-   undantag i components/hero-roll.css.
+   Undantag: .hero__amount (display-siffra, fw 600) - dokumenterat
+   undantag i components/hero.css per ADR 0019.
    ================================================================ */
 
 

package/css/components/hero-roll.css

@@ -1,41 +1,41 @@
 /* ================================================================
    components/hero-roll.css
    Delad animationskomponent: kodlas-rullnings-animation pa hero-siffror.
-   Aktiveras via <p class="hero-amount" data-animate-roll="N">N kr</p>
+   Aktiveras via <p class="hero__amount" data-animate-roll="N">N kr</p>
    och hero-roll.js. Ursprung: Ekonom Sprint J + J.3-J.6 (2026-04-27 ff).
 
-   Helt app-token-fri - referar bara primitives (--lh-tight, --space-N,
-   --fs-N, --fw-medium) och en text-color (--text-default). Inga
-   --accent-*, --blue-*, --purple-* eller andra app-overrides. Samma
-   styling for Jubb och Ekonom.
+   v4.0.0 (2026-05-14, ADR 0019): `.hero-amount`-compound raderad.
+   `.hero__amount` ar nu canonisk i hero.css. Digit-roller-children
+   ar BEM-element av separat block `.hero-roll` (anti-3-niva-nesting).
+
+   Helt app-token-fri - refererar bara primitives. Samma styling for
+   Jubb och Ekonom.
 
    Krav for korrekt rendering:
    - font-variant-numeric: tabular-nums (sa 0-9-glyfer ar lika breda)
    - --lh-tight definierad i primitives (anvands som rullhojd)
    - prefers-reduced-motion respekteras (hoppar direkt till slut-state)
+
+   Blocks:
+     .hero-roll  - animation-mekanism (bara BEM-children, ingen baseregel)
+
+   Element:
+     .hero-roll__digit-roller  - en per siffra, overflow:hidden-clipper
+     .hero-roll__digit-track   - vertikal stack av siffer-spans
+     .hero-roll__static-char   - mellanslag och "kr"-suffix mellan rollers
    ================================================================ */
 
 
 /* ================================================================
-   ==== HERO-AMOUNT BAS
-   Display-siffran. Storre an UI-text och tyngre vikt for visuell
-   prioritet. Server renderar slutvardet som text - JS bygger
-   digit-roller-DOM vid trigger och restoreraar tillbaka till server-
-   text vid done.
+   ==== HERO__AMOUNT INLINE-FLEX VID ANIMATION
+   .hero__amount ar default block-flow (text-content). Nar JS bygger
+   roller-children-DOM aktiveras inline-flex via :has()-selector sa
+   rollerna staplas horizontellt. Server-text + post-animation-restore
+   behaller default block-flow.
    ================================================================ */
-.hero-amount {
-  /* 2026-05-13: fs-80 → fs-100 default (25% storre) for hero-display-tyngd.
-     Apparna kan overstyra via --hero-amount-fz om mindre size behovs. */
-  font-size: var(--hero-amount-fz, var(--fs-100));
-  /* Undantag fran 400/500-policy: display-siffra, inte UI-text.
-     600 ger nodvandig visuell tyngd pa hero-storlekar. */
-  font-weight: 600;
-  letter-spacing: var(--ls-tightest);
-  color: var(--text-default);
-  line-height: var(--lh-tight);
-  /* Tabular-nums kritisk for rullnings-animationen: alla 0-9-glyfer
-     packas identiskt sa layout inte vibrerar nar siffran roterar. */
-  font-variant-numeric: tabular-nums;
+.hero__amount[data-animate-roll]:has(.hero-roll__digit-roller) {
+  display: inline-flex;
+  align-items: baseline;
 }
 
 
@@ -44,7 +44,7 @@
    En per siffra. Containrar en track av siffror som translateY:as
    till slutvardet. Overflow:hidden klipper allt utom synlig position.
    ================================================================ */
-.hero-amount__digit-roller {
+.hero-roll__digit-roller {
   display: inline-block;
   height: var(--hero-digit-height, 1em);
   line-height: var(--hero-digit-height, 1em);
@@ -56,8 +56,8 @@
 /* Vignett over och under sa siffrorna fadar ut nar de rullar in/ut.
    --hero-vignette-color satts av app-konsumenten om subtle fade
    onskas mot bg, default transparent. */
-.hero-amount__digit-roller::before,
-.hero-amount__digit-roller::after {
+.hero-roll__digit-roller::before,
+.hero-roll__digit-roller::after {
   content: '';
   position: absolute;
   left: 0;
@@ -68,7 +68,7 @@
   background: transparent;
 }
 
-.hero-amount__digit-roller::before {
+.hero-roll__digit-roller::before {
   top: 0;
   background: linear-gradient(
     to bottom,
@@ -77,7 +77,7 @@
   );
 }
 
-.hero-amount__digit-roller::after {
+.hero-roll__digit-roller::after {
   bottom: 0;
   background: linear-gradient(
     to top,
@@ -91,15 +91,15 @@
    ==== DIGIT-TRACK
    Vertikal stack av siffer-spans. translateY-styrt av JS via inline
    transition + transform. tabular-nums upprepad pa span-niva som
-   safety-net om hero-amount-arvet skulle brytas av nan parent.
+   safety-net om hero__amount-arvet skulle brytas av nan parent.
    ================================================================ */
-.hero-amount__digit-track {
+.hero-roll__digit-track {
   display: flex;
   flex-direction: column;
   will-change: transform;
 }
 
-.hero-amount__digit-track > span {
+.hero-roll__digit-track > span {
   height: var(--hero-digit-height, 1em);
   line-height: var(--hero-digit-height, 1em);
   display: block;
@@ -112,7 +112,7 @@
    Mellanslag och "kr"-suffix runt rollers. white-space: pre bevarar
    exakta blanksteg.
    ================================================================ */
-.hero-amount__static-char {
+.hero-roll__static-char {
   display: inline-block;
   white-space: pre;
 }
@@ -125,7 +125,7 @@
    denna regel bara safety-net for befintliga inline-transitions.
    ================================================================ */
 @media (prefers-reduced-motion: reduce) {
-  .hero-amount__digit-track {
+  .hero-roll__digit-track {
     transition: none !important;
   }
 }

package/css/components/hero.css

@@ -3,21 +3,26 @@
    Stora display-rubriker med amount + meta. Används på dashboard,
    detaljvyer, primary-page-toppar.
 
+   v4.0.0 (2026-05-14, ADR 0019): `.hero-amount`-compound-block raderat.
+   `.hero__amount` är canonisk klass för alla hero-display-siffror
+   (animerade och statiska). Digit-roller-animationen bygger
+   `.hero-roll__*`-children inom `.hero__amount[data-animate-roll]` -
+   se components/hero-roll.css.
+
    Blocks:
-     .hero         - wrapper med padding och text-alignment (huvud-block)
-     .hero-amount  - sibling-block: hero-roll-animations-target
+     .hero  - wrapper med padding och text-alignment (huvud-block)
 
-   .hero har BEM-element (__heading/__amount/__amount-row/__label/__meta/__actions).
-   .hero-amount är ett separat root-block av historiska skäl - hero-roll-
-   animationen adresserar just klassen .hero-amount[data-animate-roll],
-   inte .hero__amount. Definieras även i hero-roll.css (animation-styling).
+   Element:
+     .hero__heading, .hero__label, .hero__amount, .hero__amount-row,
+     .hero__meta, .hero__actions
 
    Modifiers:
-     .hero__amount --card (40px sekundär), --fluid (clamp 40-80px)
      .hero__label  --muted
+     .hero__amount --card (40px sekundär), --fluid (clamp 40-80px)
 
-   Se components/hero-roll.css för digit-roller-styling när
-   data-animate-roll triggar animationen.
+   .hero__amount font-weight 600 är dokumenterat undantag från
+   400/500-policyn (regel 5) - display-siffer-tyngd ärvd från tidigare
+   `.hero-amount`-implementation per ADR 0019.
    ================================================================ */
 .hero {
   /* 2026-05-13: text-align center for hero-sektion. Hero-content
@@ -56,9 +61,15 @@
 }
 
 .hero__amount {
-  /* 2026-05-13: fs-80 → fs-100 (25% storre) for mer display-tyngd. */
-  font-size: var(--fs-100);
-  font-weight: var(--fw-medium);
+  /* 2026-05-13: fs-80 → fs-100 (25% storre) for mer display-tyngd.
+     2026-05-14 (ADR 0019): font-size konsumerar --hero-amount-fz-token
+     for app-override-mojlighet. */
+  font-size: var(--hero-amount-fz, var(--fs-100));
+  /* Undantag fran 400/500-policy (regel 5): display-siffra, inte
+     UI-text. 600 ger nodvandig visuell tyngd pa hero-storlekar.
+     Per ADR 0019 garlder weight 600 alla hero__amount-instances
+     (animerade och statiska) for konsekvens. */
+  font-weight: 600;
   letter-spacing: var(--ls-tightest, -0.04em);
   color: var(--text-default);
   line-height: var(--lh-tight);

package/js/hero-roll.js

@@ -1,5 +1,5 @@
 /* Hero Roll Animation - delad komponent
- * Krav: .hero-amount[data-animate-roll] i HTML
+ * Krav: .hero__amount[data-animate-roll] i HTML
  * Krav: font-variant-numeric: tabular-nums pa elementet
  * Krav: --lh-tight definierad i CSS (anvands som rullhojd)
  * Turbo: triggar via turbo:swap-event om Turbo finns, annars fresh-session only
@@ -68,7 +68,7 @@
 	let lastSeenUrl = window.location.href;
 
 	function getHeroEl () {
-		return document.querySelector( '.hero-amount[data-animate-roll]' );
+		return document.querySelector( '.hero__amount[data-animate-roll]' );
 	}
 
 	function prefersReducedMotion () {
@@ -77,10 +77,10 @@
 
 	function buildRoller ( targetDigit ) {
 		const roller = document.createElement( 'span' );
-		roller.className = 'hero-amount__digit-roller';
+		roller.className = 'hero-roll__digit-roller';
 
 		const track = document.createElement( 'span' );
-		track.className = 'hero-amount__digit-track';
+		track.className = 'hero-roll__digit-track';
 
 		const totalSteps = targetDigit + ( EXTRA_ROUNDS * 10 );
 		for ( let i = 0; i <= totalSteps; i++ ) {
@@ -95,7 +95,7 @@
 
 	function buildStaticChar ( text ) {
 		const span = document.createElement( 'span' );
-		span.className = 'hero-amount__static-char';
+		span.className = 'hero-roll__static-char';
 		span.textContent = text;
 		return span;
 	}

package/js/turbo-nav.js

@@ -256,7 +256,7 @@
 				performSwap( doc );
 				// Sprint J.3: dispatcha SYNKRON 'turbo:swap'-event INOM
 				// swap-callback fore VT slut-snapshot tas. Subscribers (hero-
-				// roll.js) kan modifiera nya DOM (t.ex. byta ut hero-amount
+				// roll.js) kan modifiera nya DOM (t.ex. byta ut hero__amount
 				// till digit-rollers) sa VT slut-state inkluderar deras
 				// modifikationer. Forhindrar 0.2s-flash av server-text
 				// under VT-fade vid month-change.

package/package.json

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

package/references/02-components.md

@@ -80,12 +80,13 @@ För varje entry gäller:
 - **Tokens:** `currentColor` - parent-element styr fargen
 
 ### hero-roll (`hero-roll.css`)
-- **Blocks:** `.hero-amount` (definieras aven i `hero.css`)
-- **Element:** `.hero-amount__digit-roller`, `.hero-amount__digit-track`, `.hero-amount__static-char`
-- **States:** `[data-animate-roll]` pa `.hero-amount` (JS triggar animation)
+- **Blocks:** `.hero-roll` (animation-mekanism - bara BEM-children, ingen baseregel; agglomereras inom `.hero__amount[data-animate-roll]`)
+- **Element:** `.hero-roll__digit-roller`, `.hero-roll__digit-track`, `.hero-roll__static-char`
+- **States:** `[data-animate-roll]` pa `.hero__amount` (JS triggar animation, bygger `.hero-roll__*`-children)
 - **Anvand:** Display-siffer-animation pa hero-vyer (kodlas-rullning). `__digit-roller` ar wrapper med ::before/::after-faders, `__digit-track` ar siffran-stack som flyttas vertikalt, `__static-char` ar statiska tecken (kr-suffix, kommatecken) utanfor rullnings-mekaniken.
 - **INTE:** Vanliga numeriska varden (anvand `.hero__amount` utan data-animate-roll)
-- **Tokens:** `--text-default`, `--lh-tight`, `--ls-tightest`, `--fs-80`. **Undantag:** `font-weight: 600` (display-undantaget fran 400/500-policyn).
+- **Tokens:** `--text-default`, `--lh-tight`, `--ls-tightest`. CSS aktiverar `display: inline-flex` pa `.hero__amount[data-animate-roll]:has(.hero-roll__digit-roller)` sa rollerna staplas horizontellt.
+- **Konvention (ADR 0019, v4.0.0):** `.hero-roll` ar separat block fran `.hero__amount` for att undvika 3-niva-BEM-nesting (`.block__elem__sub` ar forbjudet per ADR 0011). JS bygger `.hero-roll__*`-children inom `.hero__amount[data-animate-roll]` vid trigger.
 
 ### divider (`divider.css`)
 - **Blocks:** `.divider`
@@ -194,11 +195,13 @@ För varje entry gäller:
 - **INTE:** Single-bar-progress (anvand `.hbar`)
 
 ### hero (`hero.css`)
-- **Blocks:** `.hero`, `.hero-amount` (sibling, animation-target - definieras aven i `hero-roll.css`)
+- **Blocks:** `.hero`
 - **Element:** `.hero__heading`, `.hero__amount`, `.hero__amount-row`, `.hero__label`, `.hero__meta`, `.hero__actions`
 - **Modifiers:** `.hero__amount--card`, `.hero__amount--fluid`, `.hero__label--muted`
-- **Anvand:** Stora display-rubriker (80px-skala default, 40px card)
+- **Anvand:** Stora display-rubriker. `.hero__amount` ar default 100px (via `--hero-amount-fz`-token), `--card` 40px, `--fluid` clamp(40, 12vw, 80).
 - **INTE:** Vanlig `<h1>` (anvand `.heading-1`)
+- **Animation:** `.hero__amount[data-animate-roll="N"]` triggar digit-roller-animation via hero-roll.js + hero-roll.css. Se `hero-roll`-entry ovan.
+- **Konvention (ADR 0019, v4.0.0):** `.hero__amount` ar canonisk klass for alla hero-display-siffror (animerade och statiska). Tidigare `.hero-amount`-compound-block raderat. `.hero__amount` har `font-weight: 600` som dokumenterat undantag fran 400/500-policyn (regel 5) - display-tyngd.
 
 ### chip (`chip.css`)
 - **Blocks:** `.chip`, `.chip-list` (sibling-wrapper for chips i rad), `.brand-pill`, `.month-pill`

package/references/04-locked-decisions/0019-hero-amount-bem-canonical.md

@@ -0,0 +1,153 @@
+# 0019 - Hero-amount: en BEM-klass + hero-roll som separat block
+
+## Status
+Locked. Major version-bump (4.0.0) - breaking change.
+
+## Context
+
+Designsystemet hade två parallella klasser för samma display-siffer-koncept:
+
+- `.hero-amount` (compound block i `hero-roll.css`, font-weight 600,
+  Tier D-undantag) - target för digit-roller-animation via
+  `[data-animate-roll]`-attribut.
+- `.hero__amount` (BEM-element av `.hero` i `hero.css`, font-weight 500
+  via `--fw-medium`) - statisk display-text utan animation.
+
+Plus modifiers `.hero__amount--card` (fs-40), `.hero__amount--fluid`
+(clamp), `.hero__amount-row` (flex-wrapper) - alla på `.hero__amount`-
+namespacet, inte `.hero-amount`.
+
+Detta gav templates inkonsekvent klassanvändning:
+
+| Template | Klass | Konsekvens |
+|---|---|---|
+| `avstamning.html` | `.hero-amount[data-animate-roll]` | Animerad, fw-600 |
+| `bolan.html:22` | `.hero-amount.hero__amount--fluid` | Modifier på fel block |
+| `bolan.html:130` | `.hero-amount.hero__amount--fluid` | Samma |
+| `var_bostad.html:34` | `.hero-amount` | Statisk men fw-600 |
+| `dashboard.html` (Jubb) | `.hero-amount[data-animate-roll]` | Animerad, fw-600 |
+
+Per ADR 0011 ska modifier sitta på samma block som basklassen.
+`.hero__amount--fluid` på `.hero-amount` är teknisk inkorrekt CSS.
+
+Plus: `.hero-amount__digit-roller`, `.hero-amount__digit-track`,
+`.hero-amount__static-char` är BEM-children med dubbel-segment som
+i praktiken bryter ADR 0011-syntax-regeln (BEM stödjer inte 3-nivå-
+nesting `.block__elem__sub`).
+
+Per Calle 2026-05-14: "Vi kör konsekvent hero__amount. Det ska vara
+samma. Ingen split."
+
+## Decision
+
+### En klass: `.hero__amount`
+
+Alla hero-display-siffror använder `.hero__amount` (BEM-element av
+`.hero`). `.hero-amount`-compound-block raderas helt. Modifiers
+(`--card`, `--fluid`) appliceras på `.hero__amount`.
+
+`.hero__amount` har **font-weight 600** som dokumenterat undantag från
+400/500-policyn (per Calle: behåll display-tyngd från tidigare
+`.hero-amount`-implementation). Detta ärver behovet hero-roll-display-
+siffror har för visuell tyngd.
+
+### Digit-roller children: `.hero-roll`-block
+
+Animation-mekanismen renderar children som JS bygger inom `.hero__amount`.
+Dessa namnges som BEM-children av ett separat block `.hero-roll`:
+
+- `.hero-roll__digit-roller` (var: `.hero-amount__digit-roller`)
+- `.hero-roll__digit-track` (var: `.hero-amount__digit-track`)
+- `.hero-roll__static-char` (var: `.hero-amount__static-char`)
+
+`.hero-roll` är ett separat block (bara children, ingen egen base-rule)
+för att undvika 3-nivå-BEM-nesting (`.block__elem__sub` är förbjudet
+per ADR 0011-syntax-regex).
+
+JS-modulen `hero-roll.js` adresserar `.hero__amount[data-animate-roll]`
+och bygger `.hero-roll__*`-children inom det elementet.
+
+### Filerna efter migration
+
+`hero.css` äger `.hero__amount` baseregeln + alla modifiers
+(`--card`, `--fluid`, samt `.hero__amount-row` wrapper).
+
+`hero-roll.css` äger bara `.hero-roll__*`-children + `:has()`-aktivering
+av `display: inline-flex` på `.hero__amount[data-animate-roll]:has(.hero-roll__digit-roller)`.
+
+### CSS-disciplin
+
+`.hero__amount` font-weight 600-undantaget dokumenteras i `hero.css`-
+JSDoc-header och i regel 5 (font-weight 400/500-policyn).
+
+## Migration
+
+### Klodd-ds (4.0.0)
+
+- `css/components/hero.css` - `.hero__amount` font-weight 500 → 600 +
+  font-size använder `var(--hero-amount-fz, var(--fs-100))` (override-
+  vänligt)
+- `css/components/hero-roll.css`:
+  - Radera `.hero-amount` baseregeln
+  - Rename `.hero-amount__digit-roller` → `.hero-roll__digit-roller`
+  - Rename `.hero-amount__digit-track` → `.hero-roll__digit-track`
+  - Rename `.hero-amount__static-char` → `.hero-roll__static-char`
+  - Update `:has()`-selector
+- `css/base/typography.css` - kommentar uppdateras
+- `js/hero-roll.js`:
+  - Selector `.hero-amount[data-animate-roll]` → `.hero__amount[data-animate-roll]`
+  - Roller-element className → `hero-roll__digit-roller`
+  - Track-element className → `hero-roll__digit-track`
+  - Static-char-element className → `hero-roll__static-char`
+- `js/turbo-nav.js` - kommentar
+- `references/02-components.md` - hero-roll-entry komplett rename
+- `references/DESIGN-LANGUAGE.md` sektion 3 - uppdatera Pattern A
+
+### Ekonom
+
+- 5 templates: `avstamning.html`, `bolan.html` (x2), `installningar/var_bostad.html`,
+  `design.html`. Klass `hero-amount` → `hero__amount`.
+- `ds/base.css` 2 ställen: tabular-nums-selector + user-select-text
+- SW VERSION + static_version bump
+
+### Jubb
+
+- 2 templates med klassanvändning: `dashboard.html`, `design.html` (line 853)
+- Doc-kommentarer i 3 templates uppdateras (base.html, design.html line 859,
+  1336)
+- `ds/base.css` 2 ställen
+- `ds/jubb.css` rad 726-727 (desktop responsive overrides)
+- `pages/design.css` rad 403 (.ds-anim-demo styling)
+- SW VERSION + static_version bump
+
+### Stylelint-regex
+
+Oförändrad - `.hero__amount` (en `__`) + `.hero-roll__digit-roller` (en `__`)
+matchar standard-BEM. Inga undantag behövs i regex.
+
+## Konsekvenser
+
+**Bra:**
+- En klass per koncept - templates har inte längre val mellan
+  `.hero-amount` och `.hero__amount`
+- Modifiers `--card`/`--fluid` används korrekt (på samma block som basklassen)
+- BEM-konsekvens: ingen 3-nivå-nesting (`.block__elem__sub`)
+- Future-CC kan inte introducera mismatch
+- Stylelint fångar nya brott via existerande regex
+
+**Trade-offs:**
+- Major version-bump (4.0.0) - alla apparna måste uppdatera templates
+  + lokala CSS-overrides parallellt
+- Visuell paritet: `.hero__amount` får font-weight 600 (var 500). Statiska
+  hero-vyer (utan digit-roller) kommer rendera tjockare display-text. Per
+  Calle: "konsekvent hero__amount" - ingen split, weight 600 vinner.
+- `.hero-roll`-namn introducerar nytt block-koncept. Dokumentera i 02-components.
+
+## References
+
+- ADR 0011 (strikt-bem-elementsyntax)
+- ADR 0012 (stylelint-bem-enforcement)
+- DESIGN-LANGUAGE.md sektion 3 (page-toppar)
+- Ekonom DECISIONS 2026-05-14 (audit-cykel skip-rationale för Sprint D)
+- Calle's beslut 2026-05-14: "Vi kör konsekvent hero__amount. Det ska
+  vara samma. Ingen split."

package/references/DESIGN-LANGUAGE.md

@@ -82,7 +82,7 @@ För dashboards där primär-data är en STOR siffer-display.
 
 ```html
 <section class="hero">
-  <p class="hero__label">SEKTION-LABEL</p>
+  <p class="hero__label">Sektion-label</p>
   <p class="hero__amount">{stort-värde}</p>
   <p class="hero__meta">{kontextuell-info}</p>
   <div class="hero__actions">
@@ -91,12 +91,19 @@ För dashboards där primär-data är en STOR siffer-display.
 </section>
 ```
 
-`.hero__amount` är fs-80 (siffer-display). `.hero__amount--card`
-(fs-40) för hero inom panel. `.hero__amount--fluid` (clamp 40-80vw)
-för responsiv siffer-display.
+`.hero__amount` är default fs-100 (`--hero-amount-fz`-token, override-vänlig
+per app). `.hero__amount--card` (fs-40) för hero inom panel.
+`.hero__amount--fluid` (clamp 40-80vw) för responsiv siffer-display.
+Font-weight 600 dokumenterat undantag (display-tyngd, ADR 0019).
 
 Hero har `padding: 20px 0 24px` (alignment med övriga container-element).
 
+**Animation:** lägg till `data-animate-roll="N"` på `.hero__amount`
+för digit-roller-animation vid fresh-session eller turbo:swap. JS i
+hero-roll.js bygger `.hero-roll__*`-children inom elementet. Se
+ADR 0019 (`.hero__amount` är canonisk klass - tidigare `.hero-amount`
+raderat i v4.0.0).
+
 ### Pattern B: `.page-header` (utility-page med titel)
 
 För pages utan primär-metric, bara navigation-kontext.