@klodd/ds 5.5.0 → 5.7.0

package/SKILL.md

@@ -6,10 +6,11 @@ description: Design memory for the @klodd/ds shared design system used by the tw
 # @klodd/ds — Design Memory
 
 ## Status
-Senast audit: 2026-05-20. Pågående arbete enligt `audits/00-summary.md`:
-- Sprint 1: dead-code-städning + topbar-bump (~435 rader)
-- Sprint 2: component-token-konsolidering, ADR 0024-backfill, light-theme-removal
-- Sprint 3: base.css-extraktion till paketets base-lager
+Designsystem-auditen (2026-05-20, se `audits/00-summary.md`) slutförd -
+alla tre sprintar klara:
+- Sprint 1: dead-code-städning + topbar-bump (5.4.3)
+- Sprint 2: component-token-konsolidering, ADR 0024-backfill, light-theme-removal (5.5.0)
+- Sprint 3: base.css-extraktion till paketets base/interactions.css (5.6.0)
 
 ## Vad detta är
 Gemensamt designsystem på npm (`@klodd/ds@5.x`). Tre-lagers tokens,

package/css/base/interactions.css

@@ -0,0 +1,241 @@
+/* ================================================================
+   base/interactions.css
+   Delade interaktions- och beteendelager, lyfta från appernas
+   byte-identiska ds/base.css i Sprint 3:
+     - Reset + html/body
+     - Touch-cleanup (eliminera webb-tells: tap-callout, 300ms-delay)
+     - Hero-glow (radial gradient, opt-in via .with-hero-glow)
+     - First-load entry animation (hero/stat-cards/bottom-nav)
+     - Press-feedback (asymmetri 80ms in / 160ms out, iOS-feel)
+     - Pull-to-refresh indicator
+     - View transitions (same-document, 160ms snappy)
+   Laddas efter base/pwa.css, typography.css, layout.css.
+   ================================================================ */
+
+
+/* ================================================================
+   ==== RESET
+   ================================================================ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  /* Sprint A4: Touch-cleanup. Eliminera webb-tells. */
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  /* Sprint E4: smooth scroll for hash-anchors. Reduced-motion-safe. */
+  scroll-behavior: smooth;
+}
+
+html, body {
+  min-height: 100vh;        /* fallback */
+  min-height: 100dvh;       /* dynamisk viewport, tar hansyn till iOS-toolbar */
+  background: var(--surface-page);
+  color: var(--text-default);
+  font-family: var(--font-sans);
+  font-size: var(--fs-14);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-base);
+  letter-spacing: var(--ls-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior: none;
+}
+
+/* Sprint G2: reservera utrymme i botten sa sista content inte goms
+   bakom fixed bottom-nav. */
+body {
+  padding-bottom: var(--bottom-nav-clearance);
+}
+
+a {
+  color: var(--accent-9);
+  text-decoration: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  a:hover { text-decoration: underline; }
+}
+
+button { font-family: inherit; }
+
+/* Tabular numerals dar siffror jamfors visuellt. */
+.num,
+.num-display,
+.num-value,
+.num-inline,
+.stat-card__value,
+.list-row__amount,
+.hero__amount,
+.hero__amount--card {
+  font-variant-numeric: tabular-nums;
+}
+
+
+/* ================================================================
+   ==== TOUCH-CLEANUP (Sprint A4)
+   Eliminera webb-tells: ingen tap-callout, ingen 300ms-delay,
+   ingen text-selektion pa chrome. Text-content forblir markerbart.
+   ================================================================ */
+button, a, [role="button"],
+.bottom-nav__item,
+.month-pill,
+.btn, .btn--secondary, .btn--primary,
+.btn--ghost, .btn--danger, .btn--positive, .btn--icon,
+.list-row, .stat-card[onclick] {
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
+}
+
+/* UI-chrome far inte text-selectas (kanns som webb-tell). */
+.bottom-nav, .topbar, .bottom-nav__item, .month-pill,
+.sheet__handle,
+.btn, .btn--secondary, .btn--primary,
+.btn--ghost, .btn--danger, .btn--positive, .btn--icon {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Text-content forblir markerbart (over no-select-containrar). */
+.list-row .list-row__desc, .list-row .list-row__amount,
+.stat-card__value, .hero__amount, .hero__amount--card,
+.panel p, .panel span,
+.collapsible-body p, .collapsible-body span {
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+
+/* ================================================================
+   ==== HERO-GLOW (radial bakgrund pa entry-skarmar)
+   Opt-in via .with-hero-glow pa <main class="main-content">.
+   Visas pa Ekonoms /avstamning och Halsomentorns /dashboard etc.
+   ================================================================ */
+.with-hero-glow::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 420px;
+  background: var(--hero-glow);
+  pointer-events: none;
+  z-index: 0;
+}
+.with-hero-glow > * { position: relative; z-index: 1; }
+
+
+/* ================================================================
+   ==== FIRST-LOAD ENTRY ANIMATION (Sprint D3)
+   Hero glider in, stat-cards spring-up sekventiellt, bottom-nav
+   hoppar in nerifran. Triggas via data-first-load pa body, vilket
+   FastAPI middleware satter vid forsta browser-besoket.
+   ================================================================ */
+body[data-first-load="true"] .hero {
+  animation: hero-arrive 480ms var(--ease-spring-bounce);
+}
+
+body[data-first-load="true"] .stat-card {
+  animation: card-arrive 320ms var(--ease-spring-bounce);
+  animation-fill-mode: backwards;
+}
+body[data-first-load="true"] .stat-card:nth-child(1) { animation-delay: 200ms; }
+body[data-first-load="true"] .stat-card:nth-child(2) { animation-delay: 280ms; }
+body[data-first-load="true"] .stat-card:nth-child(3) { animation-delay: 360ms; }
+body[data-first-load="true"] .stat-card:nth-child(4) { animation-delay: 440ms; }
+
+body[data-first-load="true"] .bottom-nav {
+  animation: nav-arrive 400ms var(--ease-spring-snappy);
+  animation-delay: 100ms;
+  animation-fill-mode: backwards;
+}
+
+@keyframes hero-arrive {
+  0%   { opacity: 0; transform: translateY(-8px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes card-arrive {
+  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes nav-arrive {
+  0%   { opacity: 0; transform: translateY(60px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+
+/* ================================================================
+   ==== PRESS-FEEDBACK (Sprint A3, native iOS-feel)
+   Asymmetri: press in 80ms snappy, release 160ms med spring-bounce.
+   color/border/opacity-transitions tappas medvetet for dessa
+   interaktiva element. Hover-bg-overrides far press-out-timing
+   (kanns smidigt pa desktop ocksa).
+   ================================================================ */
+.btn,
+.bottom-nav__item,
+.month-pill a {
+  transition:
+    transform var(--press-out-duration) var(--press-out-easing),
+    background var(--press-out-duration) var(--press-out-easing);
+}
+
+.btn:active,
+.bottom-nav__item:active,
+.month-pill a:active {
+  transform: scale(0.97);
+  transition:
+    transform var(--press-in-duration) var(--press-in-easing),
+    background var(--press-in-duration) var(--press-in-easing);
+}
+
+
+/* ================================================================
+   ==== PULL-TO-REFRESH (Sprint E1)
+   Indikator visas centrerat ovanfor viewport. Pull-progress styr
+   transform och opacity (sats inline av pull-to-refresh.js).
+   ================================================================ */
+.ptr-indicator {
+  position: fixed;
+  top: calc(var(--safe-top) + 8px);
+  left: 50%;
+  transform: translate(-50%, -40px);
+  z-index: var(--z-overlay);
+  pointer-events: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--surface-strong);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.ptr-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--text-muted);
+  border-top-color: var(--accent-9);
+  border-radius: 50%;
+}
+
+.ptr-indicator--triggered .ptr-spinner {
+  animation: ptr-spin 600ms linear infinite;
+}
+@keyframes ptr-spin { to { transform: rotate(360deg); } }
+
+
+/* ================================================================
+   ==== VIEW TRANSITIONS (Sprint B + I)
+   Same-document VT via document.startViewTransition i turbo-nav.js.
+   Cross-document VT borttagen pga iOS Safari snapshot-bug pa fixed-
+   position-element + dvh-instabilitet.
+   ================================================================ */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 160ms;
+  animation-timing-function: var(--ease-spring-snappy);
+}

package/css/base/pwa.css

@@ -9,8 +9,9 @@
    - Globala fokusringar (:focus-visible)
    - Reduced-motion respekt
 
-   Mer omfattande Jubb-experience (animations, toasts, view transitions,
-   pull-to-refresh, hero-glow) ligger i ds/base.css som laddas darefter.
+   Det fullare interaktionslagret (animations, view transitions,
+   pull-to-refresh, hero-glow, press-feedback) ligger i
+   base/interactions.css som laddas darefter.
    ================================================================ */
 
 *, *::before, *::after {
@@ -33,7 +34,7 @@ html {
 body {
   margin: 0;
   min-height: 100dvh;          /* dynamic viewport - hanterar mobil-browser chrome */
-  overscroll-behavior: contain; /* stoppar pull-to-refresh-konflikter */
+  overscroll-behavior: none; /* stoppar pull-to-refresh-konflikter */
 }
 
 /* iOS PWA cold-start safe-area-fix. .kds-scroll-buffer ar ett block-
@@ -75,8 +76,17 @@ body {
 
 /* Globala fokusringar - alltid synliga vid keyboard-navigation, aldrig vid tap. */
 :focus-visible {
-  outline: 2px solid var(--border-focus);
+  outline: 2px solid var(--accent-9);
   outline-offset: 2px;
+  border-radius: var(--radius-4);
+}
+
+/* <main> undantas fran focus-outline: turbo-nav anropar main.focus()
+   for screen-reader-access efter varje swap, och pa iOS Safari triggar
+   programmatisk focus :focus-visible - vilket gav en synlig outline. */
+#main:focus,
+#main:focus-visible {
+  outline: none;
 }
 
 /* Respektera OS-installningen "Tillganglighet -> Reducera rorelse". */

package/css/components/hero.css

@@ -62,8 +62,8 @@
 
 .hero__amount {
   /* 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. */
+     Sprint 2 (2026-05-21): --hero-amount-fz-token raderad, font-size
+     läser --fs-100 direkt. */
   font-size: var(--fs-100);
   /* Undantag fran 400/500-policy (regel 5): display-siffra, inte
      UI-text. 600 ger nodvandig visuell tyngd pa hero-storlekar.

package/css/index.css

@@ -22,6 +22,7 @@
 @import './base/pwa.css';
 @import './base/typography.css';
 @import './base/layout.css';
+@import './base/interactions.css';
 
 /* Komponenter */
 @import './components/button.css';

package/js/sheet.js

@@ -0,0 +1,96 @@
+/*--------------------------------------------------------------
+ sheet.js - bottom-sheet open/close for <dialog class="sheet">.
+
+ Native <dialog> skoter ESC, focus-trap och inert-bakgrund. Denna
+ modul lagger till:
+   - openSheet(id) / closeSheet(dlg), exponerade som globals
+     window.__sheetOpen / window.__sheetClose
+   - click-delegation: [data-sheet]-trigger oppnar sheet, klick pa
+     backdrop eller [data-sheet-close] stanger
+   - drag-state-reset: nollar inline transform/transition som
+     sheet-drag.js kan lamna kvar om en sheet stangs mitt i en drag
+
+ Laddas fore app-lokal JS som anropar window.__sheetOpen.
+--------------------------------------------------------------*/
+(function () {
+	// Defensiv state-reset mot drag-physics-laeckage. sheet-drag.js
+	// satter inline style.transform + style.transition under drag och
+	// cleanar via transitionend-event. Om dialogen stangs innan
+	// transitionen avslutas (ESC, backdrop-klick, programmatic close
+	// eller form-submit mid-animation) eldas transitionend ALDRIG och
+	// inline-style laecker till nasta showModal() - sheet hamnar dar
+	// drag avbrots (ofta utanfor viewport eller halvvags upp). Reset i
+	// open + close + close-event-listener ger clean state oavsett hur
+	// dialogen stangts.
+	function resetDragState(dlg) {
+		dlg.style.transform = '';
+		dlg.style.transition = '';
+	}
+	function openSheet(id) {
+		const dlg = document.querySelector('dialog.sheet[data-sheet-id="' + id + '"]');
+		if (!dlg) return null;
+		resetDragState(dlg);
+		if (typeof dlg.showModal === 'function' && !dlg.open) {
+			dlg.showModal();
+		} else {
+			// Fallback for browsers utan <dialog>.
+			dlg.setAttribute('open', '');
+		}
+		// Auto-focus + select-all pa input markerad med
+		// data-sheet-autofocus. setTimeout 50ms sa showModal-animationen
+		// hunnit borja innan focus-grabben (annars hoppar caret).
+		const focusEl = dlg.querySelector('[data-sheet-autofocus]');
+		if (focusEl) {
+			setTimeout(function () {
+				try {
+					focusEl.focus({ preventScroll: true });
+					if (typeof focusEl.select === 'function') focusEl.select();
+				} catch (_) { /* ignore */ }
+			}, 50);
+		}
+		return dlg;
+	}
+	function closeSheet(dlg) {
+		if (!dlg) return;
+		resetDragState(dlg);
+		if (typeof dlg.close === 'function' && dlg.open) {
+			dlg.close();
+		} else {
+			dlg.removeAttribute('open');
+		}
+	}
+	// Exponera for andra moduler (sheet-drag, optimistic-UI).
+	window.__sheetOpen = openSheet;
+	window.__sheetClose = closeSheet;
+
+	// ESC-stangning + native dialog.close() gar inte via closeSheet
+	// ovan. Lyssna pa close-event i capture-phase (close-event har
+	// bubbles: false per spec, sa capture ar enda sattet att fanga det
+	// med delegation pa document-niva). Reset drag-geometri sa nasta
+	// open startar med clean inline-style.
+	document.addEventListener('close', function (e) {
+		if (e.target instanceof HTMLDialogElement && e.target.classList.contains('sheet')) {
+			resetDragState(e.target);
+		}
+	}, true);
+
+	document.addEventListener('click', function (e) {
+		const trigger = e.target.closest('[data-sheet]');
+		if (trigger) {
+			openSheet(trigger.dataset.sheet);
+			e.preventDefault();
+			return;
+		}
+		// Backdrop-click: e.target ar dialog-elementet sjalvt (klick
+		// utanfor content-omradet, pa backdrop som <dialog> renderar).
+		if (e.target.tagName === 'DIALOG' && e.target.classList.contains('sheet')) {
+			closeSheet(e.target);
+			return;
+		}
+		// Avbryt-knapp inne i sheet.
+		if (e.target.closest('[data-sheet-close]')) {
+			const dlg = e.target.closest('dialog.sheet');
+			closeSheet(dlg);
+		}
+	});
+})();

package/js/toast.js

@@ -0,0 +1,31 @@
+/*--------------------------------------------------------------
+ toast.js - transient feedback-meddelanden.
+
+ window.showToast(message, type, duration)
+   type     'info' (default) | 'success' | 'error' | 'warning'
+   duration ms innan auto-removal (default 3000)
+
+ Skapar ett .toast-element och stackar det i #toast-region. Kraver:
+   - ett element med id="toast-region" i DOM (mountpoint)
+   - .toast / .toast--out / .toast--{success,error,warning} CSS
+     (paketets components/feedback.css + .toast-region/.toast--out
+     i app-doman-CSS)
+
+ Laddas fore app-lokal JS som anropar window.showToast.
+--------------------------------------------------------------*/
+(function () {
+	window.showToast = function (message, type, duration) {
+		type = type || 'info';
+		duration = duration || 3000;
+		const region = document.getElementById('toast-region');
+		if (!region) return;
+		const el = document.createElement('div');
+		el.className = 'toast' + (type !== 'info' ? ' toast--' + type : '');
+		el.textContent = message;
+		region.appendChild(el);
+		setTimeout(function () {
+			el.classList.add('toast--out');
+			el.addEventListener('animationend', function () { el.remove(); }, { once: true });
+		}, duration);
+	};
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {
@@ -15,7 +15,8 @@
     "references/"
   ],
   "scripts": {
-    "lint:css": "stylelint 'css/**/*.css'"
+    "lint:css": "stylelint 'css/**/*.css'",
+    "verify:docs": "node scripts/verify-docs.js"
   },
   "engines": {
     "node": ">=16.7"

package/references/04-locked-decisions/0010-collapsible-block-rename.md

@@ -33,7 +33,7 @@ Blocket (.collapsible-card) oförändrat.
 ~15 ändringar + 1 JS-ändring (app.js rad 202).
 
 ## Decision
-**Alternativ A.** Elementen är rätt — `.collapsible__` speglar det
+**Alternativ A.** Elementen är rätt - `.collapsible__` speglar det
 semantiska begreppet. Blocket är det som avviker. "-card"-suffixet är
 en implementationsdetalj från ursprunglig skapelse, inte en semantisk
 egenskap. JS-kopplingen via data-attribut gör att rename är renare än

package/references/05-open-decisions/0017-async-progress-pipeline-gaps.md

@@ -13,7 +13,7 @@ migrationen identifierades tre paket-gaps som krävde workarounds i
 wrappern eftersom paketets default-beteende är optimerat för ett-shot-
 flöden (brief-flödet) snarare än kontinuerlig polling (pipeline-flödet).
 
-### Gap 1 — continuousMode
+### Gap 1 - continuousMode
 
 **Behov:** polling fortsätter efter `done`-callback för att detektera
 nya körningar automatiskt. Pipeline-progress visar status på senaste
@@ -30,7 +30,7 @@ internal cleanup) kan restart-pattern brytas. Plus memory-overhead -
 varje ny instans skapar nya closures (acceptabel för once-per-N-minute
 körningar).
 
-### Gap 2 — autoHide: false
+### Gap 2 - autoHide: false
 
 **Behov:** komponenten ska vara hidden tills `data.active === true`.
 Pipeline kan vara inaktiv vid sidladdning (vanligaste fallet eftersom
@@ -46,7 +46,7 @@ i konstruktor-anrop), så pattern fungerar deterministiskt. Om paketet
 ändras till async-init (t.ex. wait för DOM-ready) kan en kort flash
 uppstå mellan start() och första transform.
 
-### Gap 3 — extraRenders
+### Gap 3 - extraRenders
 
 **Behov:** rendera side-elements utanför paketets bar/label/pct-scope.
 Pipeline har `batch_progress_label` som renderas parallellt med