@klodd/ds 5.8.0 → 5.10.0

package/SKILL.md

@@ -7,10 +7,13 @@ description: Design memory for the @klodd/ds shared design system used by the tw
 
 ## Status
 Designsystem-auditen (2026-05-20, se `audits/00-summary.md`) slutförd -
-alla tre sprintar klara:
+alla sex 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)
+- Sprint 4: JS-extraktion (sheet + toast) + deprecated-selektor-grep i verify (5.7.0 + 5.7.1)
+- Sprint 5: width/height-tokens (--measure-*, --content-max-*) + stylelint-regel no-literal-dimension (5.8.0)
+- Sprint 6: clerk-init-extraktion (waitForClerkBase, clerkLogout, KloddDS.clerkReady, fetchPatch opt-in) + async-progress clerkReady-race-fix (5.9.0)
 
 ## Vad detta är
 Gemensamt designsystem på npm (`@klodd/ds@5.x`). Tre-lagers tokens,

package/css/base/interactions.css

@@ -2,77 +2,19 @@
    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 + html/body-defaults flyttades till base/reset.css 2026-05-22
+   (Åtgärd 1, @layer-fasen). Reset hör i @layer klodd.reset, denna fil
+   i @layer klodd.base.
 
-/* ================================================================
-   ==== RESET
+   Laddas efter base/pwa.css, typography.css, layout.css.
    ================================================================ */
-*, *::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;
-}
 
 
 /* ================================================================

package/css/base/reset.css

@@ -0,0 +1,58 @@
+/* ================================================================
+   base/reset.css
+   Reset-lager: nollstallning + element-defaults. Wrappas i
+   @layer klodd.reset (lagsta cascade-prioritet) av css/index.css.
+
+   Box-sizing samt html/body bas-styling (bakgrund, farg, font,
+   font-smoothing, tap-highlight, text-size-adjust, overscroll-
+   behavior) ags av base/pwa.css och dupliceras medvetet INTE har -
+   pwa.css har identiska varden och tar det ansvaret. Denna fil
+   haller bara de reset-deklarationer som pwa.css inte tacker.
+
+   Lyft ur base/interactions.css 2026-05-22 (Atgard 1, @layer-fasen).
+   ================================================================ */
+
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  /* 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 */
+  font-weight: var(--fw-regular);
+  letter-spacing: var(--ls-base);
+}
+
+/* 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;
+}

package/css/index.css

@@ -1,8 +1,24 @@
 /* ================================================================
    @klodd/ds - convenience-import
-   Importerar hela designsystemet i kanonisk ordning. App-specifika
-   tema-filer (apps/jubb.css, apps/ekonom.css, apps/klodd.css)
-   importeras separat eftersom bara en ar aktiv per pageload.
+   Importerar hela designsystemet i kanonisk ordning, wrappat i en
+   namngiven @layer-hierarki (Atgard 1, 2026-05-22).
+
+   Cascade-lager (lag prioritet -> hog):
+     klodd.reset      - base/reset.css (nollstallning, element-defaults)
+     klodd.tokens     - 00-primitives.css + 10-semantic.css
+     klodd.base       - base/pwa.css, typography.css, layout.css,
+                        interactions.css
+     klodd.components - components/*.css
+     klodd.utilities  - utilities.css
+
+   Per-app-overrides (Jubb/Ekonom ds/<app>.css) wrappas i
+   @layer klodd.theme, som deklareras efter klodd.utilities och
+   darmed vinner over komponenter via cascade-ordning - inte via
+   hogre specificitet.
+
+   App-specifika tema-filer (apps/jubb.css, apps/ekonom.css,
+   apps/klodd.css) importeras separat via base.html eftersom bara
+   en ar aktiv per pageload - de ingar inte i denna fil.
 
    Anvandning:
      <link rel="stylesheet" href="@klodd/ds/css/index.css">
@@ -13,73 +29,72 @@
      @import '@klodd/ds/css/apps/jubb.css';
    ================================================================ */
 
-/* Foundation */
-@import './00-primitives.css';
-@import './10-semantic.css';
-@import './utilities.css';
+/* Layer-ordning deklareras forst sa cascade-prioriteten ar bestamd
+   innan nagon regel laddas. Maste sta fore alla @import. */
+@layer klodd.reset, klodd.tokens, klodd.base,
+       klodd.components, klodd.utilities;
 
-/* Base layer */
-@import './base/pwa.css';
-@import './base/typography.css';
-@import './base/layout.css';
-@import './base/interactions.css';
+/* Reset */
+@import url('base/reset.css') layer(klodd.reset);
 
-/* Komponenter */
-@import './components/button.css';
-@import './components/input.css';
-@import './components/badge.css';
-@import './components/card.css';
-@import './components/nav.css';
-@import './components/feedback.css';
-@import './components/overlay.css';
-@import './components/icon.css';
-@import './components/hero-roll.css';
-@import './components/divider.css';
-@import './components/progress.css';
-@import './components/progress-bar.css';
-@import './components/async-progress.css';
-@import './components/tooltip.css';
-@import './components/dropdown.css';
-
-/* 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';
-@import './components/setting-row.css';
-@import './components/collapsible.css';
-/* hbar.css + split-bar.css RADERADE v5.0.0 (ADR 0022) - .progress
-   med composition-pattern (label utanfor + .progress) ersatter hbar.
-   split-bar ersatt av kv-list (siffror) eller flera .progress
-   side-by-side. */
-@import './components/hero.css';
-@import './components/chip.css';
-@import './components/avatar.css';
-@import './components/list-row.css';
-@import './components/table.css';
-@import './components/auth.css';
-@import './components/swipe-stack.css';
-@import './components/inline-edit.css';
-@import './components/upload-spinner.css';
-@import './components/tab-bar.css';
-@import './components/pill-nav.css';
-@import './components/pwa-avatar.css';
+/* Tokens */
+@import url('00-primitives.css') layer(klodd.tokens);
+@import url('10-semantic.css') layer(klodd.tokens);
 
-/* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
-@import './components/colored-row.css';
-/* colored-bar.css RADERAD v5.0.0 (ADR 0022) - .progress aterkonsolidering
-   ovanfor inkorporerar --bar-accent-binding. */
+/* Base */
+@import url('base/pwa.css') layer(klodd.base);
+@import url('base/typography.css') layer(klodd.base);
+@import url('base/layout.css') layer(klodd.base);
+@import url('base/interactions.css') layer(klodd.base);
 
-/* v3.5.1 - sheet-content (sprint-65 form-monster, generiska BEM-namn) */
-@import './components/sheet-content.css';
+/* Komponenter */
+@import url('components/button.css') layer(klodd.components);
+@import url('components/input.css') layer(klodd.components);
+@import url('components/badge.css') layer(klodd.components);
+@import url('components/card.css') layer(klodd.components);
+@import url('components/nav.css') layer(klodd.components);
+@import url('components/feedback.css') layer(klodd.components);
+@import url('components/overlay.css') layer(klodd.components);
+@import url('components/icon.css') layer(klodd.components);
+@import url('components/hero-roll.css') layer(klodd.components);
+@import url('components/divider.css') layer(klodd.components);
+@import url('components/progress.css') layer(klodd.components);
+@import url('components/progress-bar.css') layer(klodd.components);
+@import url('components/async-progress.css') layer(klodd.components);
+@import url('components/tooltip.css') layer(klodd.components);
+@import url('components/dropdown.css') layer(klodd.components);
+@import url('components/banner.css') layer(klodd.components);
+@import url('components/panel.css') layer(klodd.components);
+@import url('components/profile-panel.css') layer(klodd.components);
+@import url('components/hub-card.css') layer(klodd.components);
+@import url('components/stat.css') layer(klodd.components);
+@import url('components/form.css') layer(klodd.components);
+@import url('components/setting-row.css') layer(klodd.components);
+@import url('components/collapsible.css') layer(klodd.components);
+@import url('components/hero.css') layer(klodd.components);
+@import url('components/chip.css') layer(klodd.components);
+@import url('components/avatar.css') layer(klodd.components);
+@import url('components/list-row.css') layer(klodd.components);
+@import url('components/table.css') layer(klodd.components);
+@import url('components/auth.css') layer(klodd.components);
+@import url('components/swipe-stack.css') layer(klodd.components);
+@import url('components/inline-edit.css') layer(klodd.components);
+@import url('components/upload-spinner.css') layer(klodd.components);
+@import url('components/tab-bar.css') layer(klodd.components);
+@import url('components/pill-nav.css') layer(klodd.components);
+@import url('components/pwa-avatar.css') layer(klodd.components);
+@import url('components/colored-row.css') layer(klodd.components);
+@import url('components/sheet-content.css') layer(klodd.components);
+@import url('components/kv-list.css') layer(klodd.components);
+@import url('components/offline.css') layer(klodd.components);
 
-/* v3.9.0 - lyft fran Ekonoms LEGACY-sektion (Sprint 5 MADR 0009) */
-@import './components/kv-list.css';
-@import './components/offline.css';
+/* Utilities */
+@import url('utilities.css') layer(klodd.utilities);
 
-/* column-bar.css + dual-bar.css RADERADE v5.0.0 (ADR 0022) -
-   amorterings-historik visas som kv-list (siffror) istallet for
-   vertikala staplar; equity-split visas som tva .progress med
-   label-row ovan istallet for dual-bar. */
+/* ----------------------------------------------------------------
+   Raderade komponenter (ater-introducera inte):
+     hbar.css, split-bar.css, colored-bar.css, column-bar.css,
+     dual-bar.css - RADERADE v5.0.0 (ADR 0022). .progress med
+     composition-pattern ersatter hbar/colored-bar; kv-list eller
+     flera .progress side-by-side ersatter split-/column-/dual-bar.
+   ---------------------------------------------------------------- */

package/js/async-progress.js

@@ -91,12 +91,23 @@
       this.failed = false;
       this.consecutiveErrors = 0;
       if (this.pollTimer !== null) return;
-      // Forsta poll efter 100ms sa ev. fetch-patches (auth-tokens etc)
-      // hinner appliceras.
-      setTimeout(() => this._poll(), 100);
+      // Forsta poll vantar in KloddDS.clerkReady (clerk-init.js) sa en
+      // ev. fetch-Bearer-patch ar installerad innan vi traffar /api/.
+      // Ersatter en tidigare blind setTimeout(_poll, 100)-gissning som
+      // tappade racet vid langsam Clerk.load(). Saknas clerkReady
+      // (clerk-init.js ej laddad) pollar _firstPoll direkt - graceful
+      // degradation.
+      this._firstPoll();
       this.pollTimer = setInterval(() => this._poll(), this.cfg.pollInterval);
     }
 
+    async _firstPoll() {
+      if (window.KloddDS && window.KloddDS.clerkReady) {
+        await window.KloddDS.clerkReady;
+      }
+      this._poll();
+    }
+
     stop() {
       if (this.pollTimer !== null) {
         clearInterval(this.pollTimer);

package/js/clerk-init.js

@@ -0,0 +1,109 @@
+/* @klodd/ds - clerk-init
+ *
+ * Delad Clerk-initialisering for apparna som konsumerar @klodd/ds.
+ * Extraherad ur appernas app.js (tidigare byte-identiska kopior med
+ * tva divergenser: fetch-Bearer-patchen och logout-redirecten).
+ *
+ * Exponerar tre globals:
+ *
+ *   window.waitForClerkBase(cb, attempts)
+ *     Pollar window.Clerk var 200ms (max 50 forsok) och kor cb nar
+ *     SDK:n finns. Anvands ocksa av page-login.js.
+ *
+ *   window.clerkLogout()
+ *     Async. signOut() + redirect till config.logoutRedirect. Satts
+ *     upp av initClerk eftersom den behover config-vardet.
+ *
+ *   KloddDS.clerkReady
+ *     Promise som resolvar nar Clerk.load() ar klar. Resolvar i ett
+ *     finally - alltsa aven om Clerk.load() kastar - sa konsumenter
+ *     inte hanger for evigt vid en Clerk-storning. Resolvar oavsett
+ *     fetchPatch-konfiguration. Representerar "Clerk ar redo", inte
+ *     "patchen ar installerad". Tidiga /api/-fetchers (AsyncProgress)
+ *     awaitar den istallet for att gissa en setTimeout-delay.
+ *
+ * KloddDS.initClerk(config) startar allt. config-falt:
+ *
+ *   fetchPatch (default false)
+ *     Om true: patcha window.fetch sa /api/-anrop far en
+ *     Authorization: Bearer-header. Fallback nar cookies inte gar
+ *     igenom (PWA-standalone pa iOS). Opt-in per app.
+ *
+ *   logoutRedirect (default "/")
+ *     Dit clerkLogout navigerar efter signOut().
+ *
+ * initClerk anropas via en liten extern per-app config-fil
+ * (clerk-config.js) - CSP utan 'unsafe-inline' tillater inte
+ * inline-script. defer-ordning garanterar att initClerk finns nar
+ * config-filen kor.
+ */
+(function () {
+  "use strict";
+
+  window.KloddDS = window.KloddDS || {};
+
+  // clerkReady skapas direkt nar denna fil kor, sa konsumenter kan
+  // awaita den aven innan initClerk hunnit anropas. resolve-funktionen
+  // sparas sa initClerk-callbacken kan resolva den.
+  let resolveClerkReady;
+  window.KloddDS.clerkReady = new Promise(function (resolve) {
+    resolveClerkReady = resolve;
+  });
+
+  function waitForClerkBase(cb, attempts) {
+    if (window.Clerk) return cb();
+    if ((attempts || 0) > 50) return console.error("Clerk JS failed to load");
+    setTimeout(function () { waitForClerkBase(cb, (attempts || 0) + 1); }, 200);
+  }
+  window.waitForClerkBase = waitForClerkBase;
+
+  // Patchar window.fetch sa /api/-anrop far Authorization: Bearer som
+  // fallback nar cookies inte gar igenom (PWA-standalone pa iOS).
+  // Oforandrad logik fran Jubbs tidigare app.js-inline-version.
+  function installFetchPatch() {
+    if (!window.Clerk.session) return;
+    const originalFetch = window.fetch.bind(window);
+    window.fetch = async function (input, init) {
+      try {
+        const url = typeof input === "string" ? input : input.url;
+        if (url && (url.startsWith("/api/") || url.startsWith(window.location.origin + "/api/"))) {
+          const token = await window.Clerk.session.getToken();
+          if (token) {
+            init = init || {};
+            init.headers = new Headers(init.headers || {});
+            init.headers.set("Authorization", "Bearer " + token);
+          }
+        }
+      } catch (e) {
+        console.warn("Clerk token fetch failed", e);
+      }
+      return originalFetch(input, init);
+    };
+  }
+
+  function initClerk(config) {
+    const cfg = Object.assign(
+      { fetchPatch: false, logoutRedirect: "/" },
+      config || {}
+    );
+    waitForClerkBase(async function () {
+      try {
+        await window.Clerk.load();
+        if (cfg.fetchPatch) installFetchPatch();
+      } catch (e) {
+        console.log("Clerk init:", e);
+      } finally {
+        // finally: clerkReady resolvar aven om Clerk.load() kastade,
+        // sa await KloddDS.clerkReady aldrig hanger for evigt.
+        resolveClerkReady();
+        window.clerkLogout = async function () {
+          if (window.Clerk) {
+            await window.Clerk.signOut();
+          }
+          window.location.href = cfg.logoutRedirect;
+        };
+      }
+    }, 0);
+  }
+  window.KloddDS.initClerk = initClerk;
+})();

package/package.json

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