@klodd/ds 5.7.0 → 5.8.0

package/bin/verify.js

@@ -1,9 +1,14 @@
 #!/usr/bin/env node
-/* @klodd/ds verify - diff:ar committade DS-filer mot paket-källan.
- * Kör i CI: npx @klodd/ds verify
- * Fail:ar med exit code 1 om drift detekteras.
+/* @klodd/ds verify - validerar att en app stammer mot paketet.
+ * Kör i CI: npx @klodd/ds verify. Exit 1 vid problem.
  *
- * exclude-fältet (v3.5.0+) i klodd-ds.json hoppas över vid diff. */
+ * Check 1 - fil-drift: diffar committade DS-filer mot paket-källan.
+ *   exclude-fältet (v3.5.0+) i klodd-ds.json hoppas över.
+ * Check 2 - deprecade selektorer: letar i app-ägd kod (app/templates/
+ *   + app/static/, exkl. synkade paket-filer i ds/) efter klass-
+ *   ANVANDNING av namn listade i paketets deprecated-classes.txt.
+ *   Kommentarer ignoreras - bara riktiga class=""/selektor/JS-strang-
+ *   referenser flaggas. */
 'use strict';
 
 const fs = require('fs');
@@ -26,6 +31,7 @@ function hashFile(filePath) {
 
 function listFilesRec(dir) {
   const out = [];
+  if (!fs.existsSync(dir)) return out;
   const stack = [{ abs: dir, rel: '' }];
   while (stack.length) {
     const { abs, rel } = stack.pop();
@@ -57,17 +63,151 @@ function diffDirs(sourceDir, targetRel, kind) {
   return drifted;
 }
 
+// --- Deprecated-class-check ---
+
+function escapeRe(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// deprecated-classes.txt: en CSS-klass per rad (utan punkt). Allt efter
+// klassnamnet pa raden ar fri kommentar. Tomma rader + #-rader hoppas.
+function loadDeprecatedClasses() {
+  const file = path.join(pkgDir, 'deprecated-classes.txt');
+  if (!fs.existsSync(file)) return [];
+  return fs.readFileSync(file, 'utf8')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line && !line.startsWith('#'))
+    .map((line) => line.split(/\s+/)[0]);
+}
+
+// Returnerar varje rads kod med kommentarer borttagna. Flerrads
+// /* */ (css/js), <!-- --> + {# #} (html) och radslut // (js).
+function stripComments(content, lang) {
+  const blocks = {
+    css: [['/*', '*/']],
+    js: [['/*', '*/']],
+    html: [['<!--', '-->'], ['{#', '#}']],
+  }[lang] || [];
+  const lineMarker = lang === 'js' ? '//' : null;
+  const out = [];
+  let close = null;
+  for (const raw of content.split('\n')) {
+    let code = '';
+    let i = 0;
+    while (i < raw.length) {
+      if (close) {
+        const end = raw.indexOf(close, i);
+        if (end === -1) { i = raw.length; }
+        else { i = end + close.length; close = null; }
+        continue;
+      }
+      let bestPos = -1;
+      let bestOpenLen = 0;
+      let bestClose = null;
+      for (const [open, cl] of blocks) {
+        const p = raw.indexOf(open, i);
+        if (p !== -1 && (bestPos === -1 || p < bestPos)) {
+          bestPos = p;
+          bestOpenLen = open.length;
+          bestClose = cl;
+        }
+      }
+      const lc = lineMarker ? raw.indexOf(lineMarker, i) : -1;
+      if (lc !== -1 && (bestPos === -1 || lc < bestPos)) {
+        code += raw.slice(i, lc);
+        i = raw.length;
+      } else if (bestPos !== -1) {
+        code += raw.slice(i, bestPos);
+        i = bestPos + bestOpenLen;
+        close = bestClose;
+      } else {
+        code += raw.slice(i);
+        i = raw.length;
+      }
+    }
+    out.push(code);
+  }
+  return out;
+}
+
+// Sann om raden (kommentarsbefriad) ANVANDER klassen: class=""-attribut
+// (html), .selektor (css) eller klass-strang i JS.
+function usesClass(code, cls, lang) {
+  const c = escapeRe(cls);
+  if (lang === 'css') {
+    return new RegExp('\\.' + c + '(?![\\w-])').test(code);
+  }
+  if (lang === 'js') {
+    return new RegExp("['\"`](?:[^'\"`]*\\.)?" + c + '(?![\\w-])').test(code);
+  }
+  if (lang === 'html') {
+    const attrs = code.match(/class\s*=\s*("[^"]*"|'[^']*')/gi) || [];
+    return attrs.some((a) => new RegExp('(^|[^\\w-])' + c + '(?![\\w-])').test(a));
+  }
+  return false;
+}
+
+// Synkade paket-filer (css/ds/<X>, js/ds/<X> dar <X> finns i paketet)
+// hoppas - checken galler app-agd kod. App-agda domain-filer i ds/
+// (ekonom.css, jubb.css, bundles/ osv.) behalls i kontrollen.
+function grepDeprecated(classNames) {
+  const hits = [];
+  if (classNames.length === 0) return hits;
+  const LANG = { '.html': 'html', '.css': 'css', '.js': 'js' };
+  const pkgCss = new Set(listFilesRec(path.join(pkgDir, 'css')));
+  const pkgJs = new Set(listFilesRec(path.join(pkgDir, 'js')));
+  function isSyncedPackageFile(rel) {
+    if (rel.startsWith('css/ds/')) return pkgCss.has(rel.slice('css/ds/'.length));
+    if (rel.startsWith('js/ds/')) return pkgJs.has(rel.slice('js/ds/'.length));
+    return false;
+  }
+  for (const dir of ['app/templates', 'app/static']) {
+    const abs = path.join(process.cwd(), dir);
+    if (!fs.existsSync(abs)) continue;
+    for (const rel of listFilesRec(abs)) {
+      const lang = LANG[path.extname(rel)];
+      if (!lang) continue;
+      if (dir === 'app/static' && isSyncedPackageFile(rel)) continue;
+      const code = stripComments(fs.readFileSync(path.join(abs, rel), 'utf8'), lang);
+      code.forEach((line, idx) => {
+        for (const cls of classNames) {
+          if (usesClass(line, cls, lang)) {
+            hits.push(`${dir}/${rel}:${idx + 1}  ${cls}`);
+          }
+        }
+      });
+    }
+  }
+  return hits;
+}
+
+// --- Check 1: fil-drift mot paket-kallan ---
 const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget, 'css');
 const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget, 'js');
 const allDrift = [...cssDrift, ...jsDrift];
 
+// --- Check 2: deprecade selektorer i app-koden ---
+const deprecatedHits = grepDeprecated(loadDeprecatedClasses());
+
+let failed = false;
+
 if (allDrift.length > 0) {
+  failed = true;
   console.error('FAIL: @klodd/ds drift detekterad:');
   allDrift.forEach((d) => console.error('  ' + d));
-  console.error('\nKör `npm run build:ds` för att synka.');
-  process.exit(1);
+  console.error('Kör `npm run build:ds` för att synka.\n');
 }
 
+if (deprecatedHits.length > 0) {
+  failed = true;
+  console.error(`FAIL: ${deprecatedHits.length} referens(er) till deprecade klasser:`);
+  deprecatedHits.forEach((h) => console.error('  ' + h));
+  console.error('Se @klodd/ds deprecated-classes.txt för ersättningar.\n');
+}
+
+if (failed) process.exit(1);
+
 const excludedCount = exclude.size > 0 ? ` (${exclude.size} excluderade fran kontroll)` : '';
-console.log(`OK: alla DS-filer matchar @klodd/ds-paketet${excludedCount}.`);
+console.log(`OK: alla DS-filer matchar @klodd/ds-paketet${excludedCount}, 0 deprecade selektorer.`);
 process.exit(0);

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/deprecated-classes.txt

@@ -0,0 +1,10 @@
+# @klodd/ds deprecated-classes.txt
+# En CSS-klass per rad (utan punkt). Text efter klassnamnet på raden
+# är fri kommentar. Tomma rader och #-rader hoppas över.
+# npx @klodd/ds verify greppar app/templates/ + app/static/ efter
+# varje klassnamn och exit 1 vid träff.
+
+sub-row        (→ expandable-row__item matched-row, ADR 0002)
+hero-amount    (→ hero__amount, ADR 0019. /design-demon fixad, 0 träffar - kvar som påminnelse)
+btn--negative  (raderad, ingen ersättning)
+tx-row         (→ list-row)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {
@@ -10,6 +10,7 @@
     "css/",
     "js/",
     "bin/",
+    "deprecated-classes.txt",
     "stylelint-plugin/",
     "SKILL.md",
     "references/"

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];