@klodd/ds 3.10.2 → 3.10.4

package/SKILL.md

@@ -63,6 +63,7 @@ En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
 2. `npm install @klodd/ds@X.Y.Z && npm run build:ds` är kört i båda app-repos
    (använd explicit versionsnummer, inte @latest — npm-cache kan ligga efter
    direkt efter publish)
+   Om du får ETARGET vid npm install - lägg till --prefer-online för att bypassa npm-cache.
 3. App-commits är pushade
 
 Ingen CHANGELOG - versionshistorik finns i git log och DESIGN_CHAT.md.

package/css/10-semantic.css

@@ -54,7 +54,7 @@
   --surface-hover:   light-dark(oklch(0.93 0.004 250), var(--gray-4));
 
   /* Active/pressed-state.
-     Anvand for: :active-bakgrund, .nav-pod.active.
+     Anvand for: :active-bakgrund, .bottom-nav__item--active.
      INTE for: hover (anvand --surface-hover). */
   --surface-active:  light-dark(oklch(0.88 0.005 250), var(--gray-5));
 

package/js/nav-optimistic.js

@@ -1,12 +1,12 @@
 /*--------------------------------------------------------------
  Sprint F1 + G4 + I: optimistic active-flytt pa bottom-nav.
 
- Problem (CE 2026-04-27): tap pa bottom-nav-pod tar ~1s innan
+ Problem (CE 2026-04-27): tap pa bottom-nav-item tar ~1s innan
  podden blir visuellt aktiv. Anvandaren ser inaktiv pod tills
  hela nya sidan laddats. Native-appar uppdaterar tab-bar
  omedelbart vid tap, oberoende av content-render.
 
- Losning: vid click pa nav-pod flytta active-class direkt till
+ Losning: vid click pa bottom-nav-item flytta active-class direkt till
  tappad pod. Turbo-fetch (Sprint I) eller cross-document VT
  renderar content parallellt. Failsafe rullar tillbaka active-
  flytt om navigation inte landar (notification, network-stall
@@ -39,11 +39,11 @@
 		if ( e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) return;
 		if ( e.button !== undefined && e.button !== 0 ) return;
 
-		const pod = e.target.closest( '.nav-pod' );
+		const pod = e.target.closest( '.bottom-nav__item' );
 		if ( ! pod || ! nav.contains( pod ) ) return;
 		if ( pod.classList.contains( 'bottom-nav__item--active' ) ) return;
 
-		const previousActive = nav.querySelector( '.nav-pod.active' );
+		const previousActive = nav.querySelector( '.bottom-nav__item--active' );
 		previousActive && previousActive.classList.remove( 'bottom-nav__item--active' );
 		pod.classList.add( 'bottom-nav__item--active' );
 

package/js/turbo-nav.js

@@ -184,8 +184,8 @@
 		const newNav = newDoc.querySelector( '.bottom-nav' );
 		const liveNav = document.querySelector( '.bottom-nav' );
 		if ( newNav && liveNav ) {
-			const newActiveHref = newNav.querySelector( '.nav-pod.active' );
-			const liveActive = liveNav.querySelector( '.nav-pod.active' );
+			const newActiveHref = newNav.querySelector( '.bottom-nav__item--active' );
+			const liveActive = liveNav.querySelector( '.bottom-nav__item--active' );
 			if ( liveActive ) liveActive.classList.remove( 'bottom-nav__item--active' );
 			if ( newActiveHref ) {
 				const target = liveNav.querySelector(
@@ -287,8 +287,16 @@
 
 			try {
 				if ( typeof document.startViewTransition === 'function' && ! skipVT ) {
-					const transition = document.startViewTransition( swap );
-					try { await transition.finished; } catch ( _ ) { /* ignore */ }
+					let swapDone = false;
+					const guardedSwap = () => { swapDone = true; swap(); };
+					try {
+						const transition = document.startViewTransition( guardedSwap );
+						try { await transition.finished; } catch ( _ ) { /* ignore */ }
+					} catch ( _ ) {
+						// startViewTransition() threw synchronously (e.g. InvalidStateError).
+						// Fallback to instant swap without animation.
+						if ( ! swapDone ) swap();
+					}
 				} else {
 					swap();
 				}

package/package.json

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

package/references/05-open-decisions/0014-ekonom-colored-row-migration.md

@@ -0,0 +1,52 @@
+# 0014 - Ekonom colored-row/colored-bar migration
+
+## Status
+Pending.
+
+## Context
+Paketet har .colored-row och .colored-bar med --row-accent/--bar-accent
+token-mekanism (ADR Kategori-monstret i 02-components.md).
+
+Ekonom implementerade ett parallellt system innan eller utan adoption
+av paketets komponenter:
+
+- .cat-list-row (ekonom.css) - flex-container for kategoriserade rader,
+  UTAN border-left och UTAN var(--row-accent). Aktivt anvand i templates.
+- .cat-bar-fill (ekonom.css) - background med cat-X-token, aktivt
+  anvand via .cat-bar-mat/-el/... i templates.
+- 8 .cat-tx-X { --row-accent: ... } bindings i ekonom-domain.css -
+  setter --row-accent men ingen consumer laser tokenet. DEAD.
+
+Jubb har ingen colored-row/colored-bar-bindning alls.
+
+## Considered options
+
+### Option A: Migrera Ekonom till paketets .colored-row + .colored-bar
+
+- Byt .cat-list-row -> .colored-row + cat-tx-X i templates
+- Byt .cat-bar-fill -> .colored-bar + .cat-bar-X i templates
+- Radera parallell implementation i ekonom.css
+- Radera dead --row-accent-bindings i ekonom-domain.css
+
+Pros: riktig paritet med paketet, Kategori-monstret anvands som avsett
+Cons: template-migration i 8-15 filer, visuell verifiering per vy
+
+### Option B: Minimal cleanup - radera dead bindings
+
+- Radera de 8 oanvanda .cat-tx-X { --row-accent: ... } raderna
+  ur ekonom-domain.css
+- Behall .cat-list-row och .cat-bar-fill som Ekonom-specifika
+
+Pros: snabb, lag risk
+Cons: parallellt system lever kvar, paketets .colored-row oanvand
+
+## Pending decision criteria
+
+- Prioritet: ar visuellt rikare kategori-rader (border-left accent)
+  vard template-migrationen?
+- Timing: kan tas i samma sprint som annan Ekonom-template-migration
+  for effektivitet
+
+## Beroenden
+
+Ingen teknisk blockering. CSS-bindningar redo i paketet sedan 3.1.0.