@klodd/ds 5.5.0 → 5.6.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.5.0",
+  "version": "5.6.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