@klodd/ds 5.7.1 → 5.9.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/00-primitives.css

@@ -415,6 +415,14 @@
   --max-w-nav-desktop:          720px;
 
   --content-max-width: 640px;
+  --content-max-narrow:  480px;  /* .main-content--narrow */
+  --content-max-default: 600px;  /* .main-content (default) */
+  --content-max-wide:    800px;  /* .main-content--wide */
+
+  /* Matt-constraints for komponenters width/height. */
+  --measure-text:    320px;  /* max-width for brodtext */
+  --measure-ui-sm:   160px;  /* min-width dropdown/input */
+  --measure-overlay: 480px;  /* max-width overlay/dialog */
 }
 
 

package/css/base/interactions.css

@@ -120,6 +120,7 @@ button, a, [role="button"],
   top: 0;
   left: 0;
   right: 0;
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- dekorativ hero-glow-gradienthojd, en-off */
   height: 420px;
   background: var(--hero-glow);
   pointer-events: none;
@@ -204,8 +205,8 @@ body[data-first-load="true"] .bottom-nav {
   transform: translate(-50%, -40px);
   z-index: var(--z-overlay);
   pointer-events: none;
-  width: 36px;
-  height: 36px;
+  width: var(--circle-size);
+  height: var(--circle-size);
   border-radius: 50%;
   background: var(--surface-strong);
   display: flex;
@@ -215,8 +216,8 @@ body[data-first-load="true"] .bottom-nav {
 }
 
 .ptr-spinner {
-  width: 18px;
-  height: 18px;
+  width: var(--space-18);
+  height: var(--space-18);
   border: 2px solid var(--text-muted);
   border-top-color: var(--accent-9);
   border-radius: 50%;

package/css/base/layout.css

@@ -4,15 +4,15 @@
    Anvands som default-skelett pa varje vy.
    ================================================================ */
 .main-content {
-  max-width: var(--content-max-default, 600px);
+  max-width: var(--content-max-default);
   margin: 0 auto;
   padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) var(--bottom-nav-clearance);
   position: relative;
   min-height: calc(100dvh - var(--bottom-nav-clearance));
 }
 
-.main-content--narrow { max-width: var(--content-max-narrow, 480px); }
-.main-content--wide   { max-width: var(--content-max-wide, 800px); }
+.main-content--narrow { max-width: var(--content-max-narrow); }
+.main-content--wide   { max-width: var(--content-max-wide); }
 
 .page-header {
   display: flex;

package/css/base/pwa.css

@@ -62,7 +62,7 @@ body {
 
 .kds-scroll-buffer {
   display: block;
-  height: 4px;
+  height: var(--space-4);
   pointer-events: none;
 }
 

package/css/components/async-progress.css

@@ -50,7 +50,7 @@
 }
 
 .async-progress__bar-track {
-  height: 6px;
+  height: var(--space-6);
   background: var(--surface-sunken);
   border-radius: var(--radius-full);
   overflow: hidden;

package/css/components/auth.css

@@ -29,7 +29,7 @@
 
 .auth-container--narrow {
   min-height: auto;
-  max-width: 480px;
+  max-width: var(--measure-overlay);
   margin-left: auto;
   margin-right: auto;
 }

package/css/components/button.css

@@ -239,8 +239,8 @@
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
-  width: 16px;
-  height: 16px;
+  width: var(--space-16);
+  height: var(--space-16);
   margin: -8px 0 0 -8px;
   border: 2px solid currentColor;
   border-top-color: transparent;

package/css/components/chip.css

@@ -35,8 +35,8 @@
 
 .chip::before {
   content: '';
-  width: 6px;
-  height: 6px;
+  width: var(--space-6);
+  height: var(--space-6);
   border-radius: var(--radius-full);
   background: currentColor;
   display: inline-block;
@@ -62,7 +62,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
-  height: 32px;
+  height: var(--space-32);
   padding: 0 var(--space-12);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);
@@ -91,8 +91,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: var(--space-18);
+  height: var(--space-18);
   padding: 0;
   background: transparent;
   border: 0;
@@ -192,7 +192,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-4);
-  height: 36px;
+  height: var(--circle-size);
   padding: 0 var(--space-6);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);

package/css/components/dropdown.css

@@ -25,7 +25,7 @@
   position: absolute;
   top: calc(100% + var(--space-4));
   left: 0;
-  min-width: 160px;
+  min-width: var(--measure-ui-sm);
   background: var(--surface-overlay);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-14);

package/css/components/feedback.css

@@ -122,7 +122,7 @@
   font-size: var(--fs-14);
   line-height: var(--lh-base);
   color: var(--text-subtle);
-  max-width: 320px;
+  max-width: var(--measure-text);
   margin: 0;
 }
 
@@ -158,7 +158,7 @@
 }
 
 .skeleton--card {
-  height: 80px;
+  height: var(--space-80);
   border-radius: var(--radius-14);
 }
 
@@ -182,8 +182,8 @@
    ================================================================ */
 .spinner {
   display: inline-block;
-  width: 24px;
-  height: 24px;
+  width: var(--space-24);
+  height: var(--space-24);
   border: 2px solid currentColor;
   border-top-color: transparent;
   border-radius: var(--radius-full);
@@ -193,14 +193,14 @@
 }
 
 .spinner--sm {
-  width: 16px;
-  height: 16px;
+  width: var(--space-16);
+  height: var(--space-16);
   border-width: 2px;
 }
 
 .spinner--lg {
-  width: 40px;
-  height: 40px;
+  width: var(--space-40);
+  height: var(--space-40);
   border-width: 3px;
 }
 

package/css/components/form.css

@@ -24,7 +24,7 @@
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-14);
   padding: var(--space-20);
-  max-width: 480px;
+  max-width: var(--measure-overlay);
   margin-bottom: var(--space-14);
 }
 

package/css/components/hero-roll.css

@@ -62,7 +62,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  height: 14px;
+  height: var(--space-14);
   pointer-events: none;
   z-index: 1;
   background: transparent;

package/css/components/inline-edit.css

@@ -62,7 +62,7 @@
 
 .inline-edit__input {
   display: inline-block;
-  height: 32px;
+  height: var(--space-32);
   padding: 0 var(--space-10);
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);

package/css/components/input.css

@@ -55,6 +55,7 @@
 }
 
 .textarea {
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- textarea min-height, dokumenterat en-off */
   min-height: 96px;
   padding: var(--space-12) var(--space-14);
   line-height: var(--lh-base);
@@ -136,7 +137,7 @@
 .select.input--compact {
   min-height: auto;
   width: auto;
-  max-width: 160px;
+  max-width: var(--measure-ui-sm);
   padding: var(--space-6) var(--space-10);
   font-size: var(--fs-16);
 }

package/css/components/list-row.css

@@ -36,7 +36,7 @@
   gap: var(--space-12);
   padding: var(--space-10) 0;
   border-bottom: 1px solid var(--border-subtle);
-  min-height: 56px;
+  min-height: var(--space-56);
 }
 
 .list-row:last-child { border-bottom: none; }
@@ -54,8 +54,8 @@
 }
 
 .list-row__icon svg {
-  width: 18px;
-  height: 18px;
+  width: var(--space-18);
+  height: var(--space-18);
   stroke: currentColor;
   fill: none;
   stroke-width: 2;

package/css/components/offline.css

@@ -25,8 +25,8 @@
 }
 
 .offline-icon {
-  width: 64px;
-  height: 64px;
+  width: var(--space-64);
+  height: var(--space-64);
   background: var(--surface-raised);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-14);
@@ -47,7 +47,7 @@
 .offline-text {
   font-size: var(--fs-14);
   color: var(--text-subtle);
-  max-width: 320px;
+  max-width: var(--measure-text);
   line-height: var(--lh-base);
   margin-bottom: var(--space-8);
 }

package/css/components/overlay.css

@@ -40,7 +40,7 @@ dialog.sheet::backdrop {
   transform: translate(-50%, -50%);
   z-index: var(--z-overlay);
   width: calc(100vw - 2 * var(--space-20));
-  max-width: 480px;
+  max-width: var(--measure-overlay);
   max-height: calc(100dvh - 2 * var(--space-40));
   margin: 0;
   padding: 0;
@@ -117,7 +117,7 @@ dialog.dialog:modal {
   top: auto;
   z-index: var(--z-overlay);
   width: 100%;
-  max-width: 600px;
+  max-width: var(--content-max-default);
   max-height: 90svh;
   margin: 0 auto;
   padding: var(--space-8) var(--space-20) calc(var(--space-28) + var(--safe-bottom));
@@ -136,8 +136,8 @@ dialog.dialog:modal {
 }
 
 .sheet__handle {
-  width: 32px;
-  height: 4px;
+  width: var(--space-32);
+  height: var(--space-4);
   margin: 0 auto var(--space-16);
   background: var(--text-disabled);
   border-radius: var(--radius-full);

package/css/components/panel.css

@@ -90,7 +90,7 @@
 .panel__pill {
   display: inline-flex;
   align-items: center;
-  height: 24px;
+  height: var(--space-24);
   padding: 0 var(--space-10);
   background: var(--surface-default);
   color: var(--text-muted);
@@ -119,7 +119,7 @@
 .panel__step-badge {
   display: inline-flex;
   align-items: center;
-  height: 20px;
+  height: var(--space-20);
   padding: 0 var(--space-8);
   background: var(--surface-active);
   color: var(--accent-text);

package/css/components/pill-nav.css

@@ -49,7 +49,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
+  height: var(--circle-size);
   padding: 0 var(--space-16);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);

package/css/components/progress-bar.css

@@ -45,7 +45,7 @@
 }
 
 .pipeline-progress__bar-track {
-  height: 6px;
+  height: var(--space-6);
   background: var(--surface-sunken);
   border-radius: var(--radius-full);
   overflow: hidden;

package/css/components/progress.css

@@ -64,7 +64,7 @@
 }
 
 .progress--thin  { height: var(--space-4); }
-.progress--thick { height: 12px; }
+.progress--thick { height: var(--space-12); }
 
 .progress__bar {
   height: 100%;

package/css/components/setting-row.css

@@ -133,7 +133,7 @@
 .setting-row__pill {
   display: inline-flex;
   align-items: center;
-  height: 28px;
+  height: var(--space-28);
   padding: 0 var(--space-12);
   background: var(--accent-9);
   color: var(--text-on-accent);
@@ -158,7 +158,8 @@
 .setting-toggle {
   position: relative;
   display: inline-block;
-  width: 44px;
+  width: var(--touch-min);
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- toggle-track 26px (22px thumb + 2x2px inset), dokumenterat en-off */
   height: 26px;
   flex-shrink: 0;
 }
@@ -185,8 +186,8 @@
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 22px;
-  height: 22px;
+  width: var(--space-22);
+  height: var(--space-22);
   background: var(--surface-page);
   border-radius: 50%;
   transition: transform var(--dur-medium) var(--ease-spring-snappy);

package/css/components/sheet-content.css

@@ -92,7 +92,7 @@
   background: var(--surface-sunken);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-14);
-  height: 48px;
+  height: var(--space-48);
   transition: background var(--dur-fast) var(--ease-spring-snappy);
 }
 
@@ -309,8 +309,8 @@
 }
 
 .sheet__toggle-input {
-  width: 22px;
-  height: 22px;
+  width: var(--space-22);
+  height: var(--space-22);
   accent-color: var(--accent-9);
   cursor: pointer;
   flex-shrink: 0;
@@ -338,7 +338,7 @@
 .sheet__btn--save {
   display: block;
   width: 100%;
-  height: 48px;
+  height: var(--space-48);
   margin: var(--space-8) 0 0;
   background: var(--accent-9);
   color: var(--text-on-accent);
@@ -372,7 +372,7 @@
 .sheet__btn--delete {
   display: block;
   width: 100%;
-  height: 44px;
+  height: var(--touch-min);
   margin: var(--space-8) 0 0;
   background: transparent;
   color: var(--accent-danger);

package/css/components/swipe-stack.css

@@ -41,8 +41,10 @@
 .swipe-stack {
   position: relative;
   width: 100%;
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- swipe-stack-bredd, dokumenterat en-off */
   max-width: 480px;
   margin: 0 auto;
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- swipe-stack-hojd, dokumenterat en-off */
   height: 480px;
   isolation: isolate;
 }

package/css/components/tab-bar.css

@@ -20,7 +20,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 44px;
+  min-height: var(--touch-min);
   padding: 0 var(--space-12);
   background: transparent;
   border: 0;

package/css/components/upload-spinner.css

@@ -57,6 +57,7 @@
 .upload-spinner-overlay__hint {
   font-size: var(--fs-12);
   color: var(--text-muted);
+  /* stylelint-disable-next-line klodd/no-literal-dimension -- spinner-hint textbredd 280px, dokumenterat en-off */
   max-width: 280px;
 }
 

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.7.1",
+  "version": "5.9.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/05-open-decisions/0025-content-max-token-konsolidering.md

@@ -0,0 +1,43 @@
+# 0025 - content-max token-konsolidering
+
+## Status
+
+Pending.
+
+## Context
+
+Tre överlappande page-width-tokenfamiljer finns i paketet efter
+width/height-arbetet (5.8.0):
+
+1. `--content-max-*` (`-narrow` 480px, `-default` 600px, `-wide`
+   800px) - definierade i 00-primitives.css, konsumeras av
+   base/layout.css (`.main-content`-varianterna).
+2. `--content-max-width: 640px` - orphan i 00-primitives.css, noll
+   användning i paketet eller apparna.
+3. `--max-w-*` (sex tokens: `-mobile` 600, `-tablet` 680, `-desktop`
+   1280, `-form` 560, `-bottom-nav` 572, `-nav-desktop` 720) i
+   00-primitives.css. `--max-w-mobile: 600px` överlappar exakt
+   `--content-max-default: 600px`.
+
+## Decision needed
+
+Konsolidera till en page-width-tokenfamilj: behåll sannolikt
+`--content-max-*`, radera orphan `--content-max-width`, mappa eller
+radera `--max-w-*`-familjen.
+
+## Considered options
+
+### A. Konsolidera nu
+Risk: `--max-w-*` och `--content-max-width` har okänd konsument-yta.
+Apparnas domain-CSS och templates greppades inte. Att radera eller
+mappa dem kan ge visuell drift på okänt antal vyer.
+
+### B. Skjut till separat sprint (vald interim)
+Lämna alla tre familjer orörda i 5.8.0. Konsolidera när
+konsument-ytan kartlagts.
+
+## Pending decision criteria
+
+Kräver en survey av `--max-w-*`- och `--content-max-width`-användning
+i båda app-repona (CSS + templates) innan konsolidering. Tas i egen
+sprint.

package/stylelint-plugin/index.js

@@ -1,7 +1,7 @@
 /* @klodd/ds stylelint-plugin
  *
  * Custom design-rule-validation som stylelint-config-standard inte
- * tacker. Tre regler, alla "klodd/"-prefixade:
+ * tacker. Fyra regler, alla "klodd/"-prefixade:
  *
  * - klodd/no-forbidden-radius:
  *     border-radius maste vara en av {var(--radius-4), var(--radius-14),
@@ -21,6 +21,11 @@
  *     review mot ADR 0017-tabellen - plugin validerar bara token-
  *     existens, inte semantisk val per komponent.
  *
+ * - klodd/no-literal-dimension:
+ *     width/height/min/max-width/height maste anvanda token (var--*)
+ *     eller relativ enhet. Hardkodad px flaggas, utom 1px/3px
+ *     (hairlines + dekorativ dot). utilities.css exkluderas helt.
+ *
  * Konfiguration i app-repos:
  *   .stylelintrc.json:
  *     {
@@ -28,7 +33,8 @@
  *       "rules": {
  *         "klodd/no-forbidden-radius": true,
  *         "klodd/no-forbidden-shadow": true,
- *         "klodd/no-forbidden-padding": true
+ *         "klodd/no-forbidden-padding": true,
+ *         "klodd/no-literal-dimension": true
  *       }
  *     }
  */
@@ -66,9 +72,17 @@ const SHADOW_INSET = /\binset\b/i;
 const SHADOW_FOCUS_RING = /^0\s+0\s+0\s+\d+px\s+(var\(--accent-a\d+\)|color-mix\(.+\))/i;
 const SHADOW_CARD_TOKEN = /^var\(--shadow-card\)$/i;
 
+// no-literal-dimension: width/height-varden som INTE ar hardkodad px.
+const DIMENSION_PROPS = /^(min-|max-)?(width|height)$/;
+const DIMENSION_KEYWORD = /^(0|auto|none|inherit|initial|unset|fit-content|min-content|max-content)$/i;
+const DIMENSION_REL_UNIT = /^[\d.]+(%|vw|vh|dvh|svh|vmin|vmax|rem)$/i;
+const DIMENSION_PX = /^[\d.]+px$/i;
+const DIMENSION_PX_OK = /^(1|3)px$/;
+
 const RADIUS_RULE = 'klodd/no-forbidden-radius';
 const SHADOW_RULE = 'klodd/no-forbidden-shadow';
 const PADDING_RULE = 'klodd/no-forbidden-padding';
+const DIMENSION_RULE = 'klodd/no-literal-dimension';
 
 const messages = {
 	radius: stylelint.utils.ruleMessages(RADIUS_RULE, {
@@ -83,6 +97,10 @@ const messages = {
 		forbidden: (value) =>
 			`Forbjudet padding-varde "${value}" - anvand var(--space-N) (existerande token i 00-primitives.css). Hardkodade px-varden inte tillatna.`,
 	}),
+	dimension: stylelint.utils.ruleMessages(DIMENSION_RULE, {
+		forbidden: (value) =>
+			`Forbjudet width/height-varde "${value}" - anvand var(--space-N) | var(--measure-*) | var(--circle-size*) | var(--touch-*). Hardkodad px inte tillaten (undantag: 1px/3px).`,
+	}),
 };
 
 function checkRadius (root, result, primary) {
@@ -153,6 +171,30 @@ function checkPadding (root, result, primary) {
 	});
 }
 
+function checkDimension (root, result, primary) {
+	if (!primary) return;
+	// utilities.css ar fixed-dimension-utility-lagret - exkluderas helt.
+	const file = root.source && root.source.input && root.source.input.file;
+	if (file && (file.endsWith('/utilities.css') || file.endsWith('\\utilities.css'))) return;
+	root.walkDecls(DIMENSION_PROPS, (decl) => {
+		const value = decl.value.trim();
+		if (!value) return;
+		if (DIMENSION_KEYWORD.test(value)) return;
+		if (/^var\(/i.test(value)) return;
+		if (/^calc\(/i.test(value)) return;
+		if (DIMENSION_REL_UNIT.test(value)) return;
+		if (DIMENSION_PX_OK.test(value)) return;
+		if (DIMENSION_PX.test(value)) {
+			stylelint.utils.report({
+				ruleName: DIMENSION_RULE,
+				result,
+				node: decl,
+				message: messages.dimension.forbidden(value),
+			});
+		}
+	});
+}
+
 const radiusPlugin = stylelint.createPlugin(RADIUS_RULE, (primary) => {
 	return (root, result) => {
 		const validOptions = stylelint.utils.validateOptions(result, RADIUS_RULE, {
@@ -192,4 +234,17 @@ const paddingPlugin = stylelint.createPlugin(PADDING_RULE, (primary) => {
 paddingPlugin.ruleName = PADDING_RULE;
 paddingPlugin.messages = messages.padding;
 
-module.exports = [radiusPlugin, shadowPlugin, paddingPlugin];
+const dimensionPlugin = stylelint.createPlugin(DIMENSION_RULE, (primary) => {
+	return (root, result) => {
+		const validOptions = stylelint.utils.validateOptions(result, DIMENSION_RULE, {
+			actual: primary,
+			possible: [true, false],
+		});
+		if (!validOptions) return;
+		checkDimension(root, result, primary);
+	};
+});
+dimensionPlugin.ruleName = DIMENSION_RULE;
+dimensionPlugin.messages = messages.dimension;
+
+module.exports = [radiusPlugin, shadowPlugin, paddingPlugin, dimensionPlugin];