@klodd/ds 5.6.0 → 5.7.1

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/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/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/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.6.0",
+  "version": "5.7.1",
   "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/"