@klodd/ds 3.3.0 → 3.4.0

package/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: klodd-ds
+description: Design memory for the @klodd/ds shared design system across all Klodd apps (Jubb, Ekonom, future apps). Use this skill whenever working on UI components, design tokens, theming, CSS class names, spacing, color, typography, accessibility, or any visual or interaction decision in an app that imports @klodd/ds. Also use when questions arise about component APIs, token architecture, BEM naming, whether to add new tokens vs reuse existing, or how to theme a new app. Contains locked architectural decisions (do not re-litigate without explicit instruction) and open migration items (still under discussion).
+---
+
+# @klodd/ds — Design Memory
+
+## Vad detta är
+Gemensamt designsystem på npm (`@klodd/ds@3.x`). Tre-lagers tokens,
+33+ komponenter, konsumeras av Jubb och Ekonom. Fler appar planerade.
+Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
+
+## Läs i denna ordning
+1. `references/01-tokens.md` — token-arkitektur (primitives → semantic → per-app)
+2. `references/02-components.md` — komponentkatalog med anti-patterns
+3. `references/03-quality-bar.md` — icke-förhandlingsbara krav
+
+<locked_rules>
+- ALDRIG hårdkoda färg, spacing, radius eller font-size. Alltid semantic token.
+- BEM-namngivning för alla CSS-klasser (.block__element--modifier).
+- WCAG AA minimum på alla interaktiva komponenter.
+- Spacing är pixel-numerisk: --space-N där N = exakt antal pixlar (4, 8, 12, 16...).
+- Per-app token-lager overridar bara semantic — aldrig primitives direkt.
+- Font-weight: bara --fw-regular (400) eller --fw-medium (500).
+  Undantag: display-siffror (hero-roll) explicit font-weight: 600.
+- Komponenter refererar ALDRIG --gray-N, --blue-N, --plum-N direkt.
+</locked_rules>
+
+## Apps och theming
+- `data-app="jubb"` → Blue accent (Radix Blue Dark), Mauve neutral
+- `data-app="ekonom"` → Plum accent (Radix Plum Dark), Plum-tonad bakgrund
+- Ny app: lägg till ramp i 00-primitives.css + 5-raders apps/foo.css
+
+## Besluts-records
+- `references/04-locked-decisions/` — låsta beslut. Förklara, ändra inte.
+- `references/05-open-decisions/` — öppna punkter. Presentera alternativen.
+
+## Komponent-val
+1. Kolla `references/02-components.md` för befintlig komponent
+2. Föredra komposition över fork
+3. Saknas den genuint — föreslå var den passar i token-modellen FÖRST
+
+## Uppdatera paketet
+```bash
+cd ~/dev/klodd-ds
+npm version patch|minor|major
+npm publish --access public
+cd ~/dev/Jubb && npm install @klodd/ds@latest && npm run build:ds
+cd ~/dev/Ekonom && npm install @klodd/ds@latest && npm run build:ds
+```
+
+## När du är osäker
+Läs relevant ADR. Täcks frågan inte av något ADR — flagga det explicit:
+"Jag ser inget beslut på detta — ska vi skapa ett i references/05-open-decisions/?"
+
+Updated: 2026-05-07 (matchar @klodd/ds 3.2.0)

package/bin/klodd-ds.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+/* @klodd/ds CLI-dispatcher.
+ *
+ * Anvandning fran ett app-repo (Jubb, Ekonom, framtida appar):
+ *   npx @klodd/ds sync       - kopiera paketets CSS/JS till app-repots ds-mapp
+ *   npx @klodd/ds verify     - diff:a committade DS-filer mot paketet (CI-gate)
+ *   npx @klodd/ds precache   - generera PRECACHE_URLS fran main.css + base.html
+ *
+ * Konfiguration: klodd-ds.json i app-repots rot.
+ *   { "cssTarget": "app/static/css/ds", "jsTarget": "app/static/js/ds" } */
+'use strict';
+
+const cmd = process.argv[2];
+const valid = new Set(['sync', 'verify', 'precache']);
+
+if (!valid.has(cmd)) {
+  console.error('Anvandning: npx @klodd/ds <sync|verify|precache>');
+  console.error('');
+  console.error('  sync      Kopiera paketets CSS/JS till app-repots ds-mapp.');
+  console.error('  verify    Diff:a committade DS-filer mot paketet (CI-gate).');
+  console.error('  precache  Generera PRECACHE_URLS fran main.css + base.html.');
+  process.exit(1);
+}
+
+require('./' + cmd + '.js');

package/bin/precache.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/* @klodd/ds precache - genererar PRECACHE_URLS fran main.css @imports
+ * och base.html <link>-taggar.
+ * Kor: npx @klodd/ds precache
+ * Output: lista av URL:er att klistra in i sw.js
+ *
+ * Notera: hanterar bara direkta @import i main.css (inte nested).
+ * Ekonom har bundles/ekonom.css som importerar nestat - kompletterar
+ * manuellt vid jamforelse mot befintlig PRECACHE_URLS. */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const cssPath = path.join(process.cwd(), 'app/static/css/main.css');
+const htmlPath = path.join(process.cwd(), 'app/templates/base.html');
+
+if (!fs.existsSync(cssPath)) {
+  console.error(`Saknas: ${cssPath}`);
+  process.exit(1);
+}
+if (!fs.existsSync(htmlPath)) {
+  console.error(`Saknas: ${htmlPath}`);
+  process.exit(1);
+}
+
+const mainCss = fs.readFileSync(cssPath, 'utf8');
+const baseHtml = fs.readFileSync(htmlPath, 'utf8');
+
+const cssImports = [...mainCss.matchAll(/@import url\(['"]?(.+?)['"]?\)/g)]
+  .map((m) => '/static/css/' + m[1].replace(/^\.\//, ''));
+
+const htmlLinks = [...baseHtml.matchAll(/<link[^>]+rel=["']stylesheet["'][^>]+href=["']([^"'?]+)/g)]
+  .map((m) => m[1]);
+
+const allUrls = [...new Set([...cssImports, ...htmlLinks])].sort();
+
+console.log('// Auto-genererat av npx @klodd/ds precache');
+console.log('// Kor kommandot igen om main.css eller base.html andras.');
+console.log('// Hanterar bara direkta @imports - jamfor mot befintlig SW-lista.');
+console.log('const PRECACHE_URLS = [');
+allUrls.forEach((url) => console.log(`  '${url}',`));
+console.log('];');

package/bin/sync.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+/* @klodd/ds sync - kopierar paketets CSS och JS till app-repot.
+ * Kor: npx @klodd/ds sync
+ * Forutsatter att CWD ar app-repots rot.
+ * Laser cssTarget/jsTarget fran klodd-ds.json i CWD, eller anvander default.
+ *
+ * Cross-platform via fs.cpSync (Node 16.7+) - inte POSIX cp -r. */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const pkgDir = path.dirname(require.resolve('@klodd/ds/package.json'));
+const cssSource = path.join(pkgDir, 'css');
+const jsSource = path.join(pkgDir, 'js');
+
+const configPath = path.join(process.cwd(), 'klodd-ds.json');
+const config = fs.existsSync(configPath)
+  ? JSON.parse(fs.readFileSync(configPath, 'utf8'))
+  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds' };
+
+const cssTarget = path.join(process.cwd(), config.cssTarget);
+const jsTarget = path.join(process.cwd(), config.jsTarget);
+
+fs.mkdirSync(cssTarget, { recursive: true });
+fs.mkdirSync(jsTarget, { recursive: true });
+
+fs.cpSync(cssSource, cssTarget, { recursive: true });
+if (fs.existsSync(jsSource)) {
+  fs.cpSync(jsSource, jsTarget, { recursive: true });
+}
+
+console.log(`OK @klodd/ds synkad till ${config.cssTarget} och ${config.jsTarget}`);

package/bin/verify.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+/* @klodd/ds verify - diff:ar committade DS-filer mot paket-kallan.
+ * Kor i CI: npx @klodd/ds verify
+ * Fail:ar med exit code 1 om drift detekteras. */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const pkgDir = path.dirname(require.resolve('@klodd/ds/package.json'));
+const configPath = path.join(process.cwd(), 'klodd-ds.json');
+const config = fs.existsSync(configPath)
+  ? JSON.parse(fs.readFileSync(configPath, 'utf8'))
+  : { cssTarget: 'app/static/css/ds', jsTarget: 'app/static/js/ds' };
+
+function hashFile(filePath) {
+  return crypto.createHash('sha256')
+    .update(fs.readFileSync(filePath))
+    .digest('hex');
+}
+
+function listFilesRec(dir) {
+  const out = [];
+  const stack = [{ abs: dir, rel: '' }];
+  while (stack.length) {
+    const { abs, rel } = stack.pop();
+    for (const entry of fs.readdirSync(abs, { withFileTypes: true })) {
+      const childAbs = path.join(abs, entry.name);
+      const childRel = rel ? path.join(rel, entry.name) : entry.name;
+      if (entry.isDirectory()) stack.push({ abs: childAbs, rel: childRel });
+      else if (entry.isFile()) out.push(childRel);
+    }
+  }
+  return out;
+}
+
+function diffDirs(sourceDir, targetRel) {
+  const drifted = [];
+  if (!fs.existsSync(sourceDir)) return drifted;
+  const targetAbs = path.join(process.cwd(), targetRel);
+  for (const file of listFilesRec(sourceDir)) {
+    const src = path.join(sourceDir, file);
+    const tgt = path.join(targetAbs, file);
+    if (!fs.existsSync(tgt)) {
+      drifted.push(`SAKNAS: ${targetRel}/${file}`);
+    } else if (hashFile(src) !== hashFile(tgt)) {
+      drifted.push(`DRIFT:  ${targetRel}/${file}`);
+    }
+  }
+  return drifted;
+}
+
+const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget);
+const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget);
+const allDrift = [...cssDrift, ...jsDrift];
+
+if (allDrift.length > 0) {
+  console.error('FAIL: @klodd/ds drift detekterad:');
+  allDrift.forEach((d) => console.error('  ' + d));
+  console.error('\nKor `npm run build:ds` for att synka.');
+  process.exit(1);
+}
+
+console.log('OK: alla DS-filer matchar @klodd/ds-paketet.');
+process.exit(0);

package/css/00-primitives.css

@@ -272,7 +272,6 @@
     "Inter", "SF Pro Display", -apple-system,
     system-ui, "Segoe UI", Roboto, "Helvetica Neue",
     Arial, sans-serif;
-  --font-numeric: var(--font-sans);
   --font-mono:
     "SF Mono", "Geist Mono", ui-monospace,
     SFMono-Regular, Menlo, Monaco, "Cascadia Code",
@@ -350,11 +349,21 @@
 
 /* ================================================================
    ==== Z-INDEX
+   Hierarki (lagst forst):
+   - tooltip:  hover-popups, ovanpa allt vanligt content
+   - dropdown: dropdown-menyer, autocomplete, kontextmenyer
+   - sticky:   sticky-headers, fixed bottom-nav
+   - modal:    overlays, sheets, modals
+   - spinner:  upload-spinner, blockerar interaktion
    ================================================================ */
 :root {
-  --z-nav:     100;
-  --z-overlay: 200;
-  --z-spinner: 9999;
+  --z-tooltip:  50;
+  --z-dropdown: 100;
+  --z-nav:      100;   /* alias for --z-dropdown - bottom-nav-niva */
+  --z-sticky:   150;
+  --z-modal:    200;
+  --z-overlay:  200;   /* alias for --z-modal - bibehalls bakat-kompat */
+  --z-spinner:  9999;
 }
 
 

package/css/10-semantic.css

@@ -208,7 +208,7 @@
   /* Danger (rod, separat fran negative). Anvand for: delete-knappar,
      destructive bekraftelser. Skiljer sig fran --negative for att markera
      IRREVERSIBEL aktion vs faktiskt negativt belopp. */
-  --accent-danger:        oklch(0.62 0.215 25);
+  --accent-danger:        var(--red-9);
   --accent-danger-dim:    color-mix(in oklch, var(--accent-danger) 8%, transparent);
   --accent-danger-border: color-mix(in oklch, var(--accent-danger) 35%, transparent);
 
@@ -473,8 +473,8 @@
   --radius-4xl:  var(--radius-24);
   --radius-pill: var(--radius-full);
 
-  /* Font-weight - --fw-semibold mappas till --fw-medium per 400/500-policy. */
-  --fw-semibold: var(--fw-medium);
+  /* Font-weight: --fw-semibold borttagen 2026-05-07 per 400/500-policy.
+     Aktiva call-sites bytte till var(--fw-medium) explicit. Se DECISIONS.md. */
 
   /* Kategori-paletter (Ekonom-only). Behalls for shared-tokens-paritet
      med Ekonom-repot, oanvanda i Jubb. */

package/css/components/dropdown.css

@@ -31,7 +31,7 @@
   border-radius: var(--radius-10);
   padding: var(--space-4) 0;
   box-shadow: 0 4px 16px color-mix(in oklch, black 40%, transparent);
-  z-index: var(--z-dropdown, 100);
+  z-index: var(--z-dropdown);
   display: none;
 }
 

package/css/components/setting-row.css

@@ -172,7 +172,7 @@
   background: var(--surface-page);
   border-radius: 50%;
   transition: transform var(--dur-medium) var(--ease-spring-snappy);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-card);
 }
 .setting-toggle input:checked + .setting-toggle__track {
   background: var(--accent-9);

package/css/components/tab-bar.css

@@ -42,7 +42,7 @@
   background: var(--surface-raised);
   color: var(--text-default);
   font-weight: var(--fw-medium);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-card);
 }
 
 @media (hover: hover) and (pointer: fine) {

package/css/components/tooltip.css

@@ -35,7 +35,7 @@
   pointer-events: none;
   opacity: 0;
   transition: opacity var(--dur-fast) var(--ease-out);
-  z-index: var(--z-tooltip, 50);
+  z-index: var(--z-tooltip);
 }
 
 .tooltip-wrapper:hover .tooltip,

package/css/utilities.css

@@ -1,81 +1,115 @@
 /* ================================================================
-   utilities.css
-   Single-purpose helper-classes for sma layout-detaljer.
-   Bygger pa pixel-numerisk konvention (.m-0, .mt-12, .gap-8).
-
-   Ingen styling-logik - bara en CSS-property per klass.
+   ds/utilities.css
+   Single-purpose helpers. Anvands sparsamt for layout-tweaks som
+   inte motiverar en namngiven komponentklass. Inte Tailwind-style
+   explosion, utan ett medvetet litet set.
    ================================================================ */
 
-/* Margin */
+
+/* Display ------------------------------------------------------- */
+.flex          { display: flex; }
+.flex-col      { display: flex; flex-direction: column; }
+.inline        { display: inline; }
+.inline-block  { display: inline-block; }
+.inline-flex   { display: inline-flex; }
+.block         { display: block; }
+.is-hidden     { display: none; }
+
+/* Text wrapping (Sprint 50/CSP A+: ersatter inline word-break-style) */
+.break-word    { word-break: break-word; }
+
+
+/* Flex --------------------------------------------------------- */
+.items-center    { align-items: center; }
+.items-baseline  { align-items: baseline; }
+.items-start     { align-items: flex-start; }
+.items-end       { align-items: flex-end; }
+.justify-between { justify-content: space-between; }
+.flex-wrap       { flex-wrap: wrap; }
+.flex-1          { flex: 1; }
+.flex-2          { flex: 2; }
+
+
+/* Gaps --------------------------------------------------------- */
+.gap-sm { gap: var(--space-8); }
+.gap-md { gap: var(--space-12); }
+.gap-lg { gap: var(--space-20); }
+.gap-14 { gap: var(--space-14); }
+
+
+/* Margins (numerisk pixel-skala + namnvarianter) ---------------- */
 .m-0   { margin: 0; }
 .mt-0  { margin-top: 0; }
+.mt-2  { margin-top: var(--space-2); }
 .mt-4  { margin-top: var(--space-4); }
-.mt-8  { margin-top: var(--space-8); }
+.mt-6  { margin-top: var(--space-6); }
+.mt-8, .mt-sm { margin-top: var(--space-8); }
 .mt-12 { margin-top: var(--space-12); }
-.mt-16 { margin-top: var(--space-16); }
-.mt-20 { margin-top: var(--space-20); }
-.mt-24 { margin-top: var(--space-24); }
+.mt-16, .mt-md { margin-top: var(--space-16); }
+.mt-24, .mt-lg { margin-top: var(--space-24); }
+
 .mb-0  { margin-bottom: 0; }
+.mb-2  { margin-bottom: var(--space-2); }
 .mb-4  { margin-bottom: var(--space-4); }
-.mb-8  { margin-bottom: var(--space-8); }
+.mb-6  { margin-bottom: var(--space-6); }
+.mb-8, .mb-sm  { margin-bottom: var(--space-8); }
+.mb-10 { margin-bottom: var(--space-10); }
 .mb-12 { margin-bottom: var(--space-12); }
-.mb-16 { margin-bottom: var(--space-16); }
-.mb-20 { margin-bottom: var(--space-20); }
-.mb-24 { margin-bottom: var(--space-24); }
-
-/* Padding */
-.p-0   { padding: 0; }
-.pt-0  { padding-top: 0; }
-.pb-0  { padding-bottom: 0; }
-
-/* Display */
-.is-hidden { display: none !important; }
-.flex      { display: flex; }
-.inline-flex { display: inline-flex; }
-
-/* Width */
-.w-full { width: 100%; }
-
-/* Flex */
-.gap-4  { gap: var(--space-4); }
-.gap-8  { gap: var(--space-8); }
-.gap-12 { gap: var(--space-12); }
-.gap-16 { gap: var(--space-16); }
-.flex-column { flex-direction: column; }
-.align-center { align-items: center; }
-.align-self-start { align-self: flex-start; }
-.justify-between { justify-content: space-between; }
+.mb-14 { margin-bottom: var(--space-14); }
+.mb-16, .mb-md { margin-bottom: var(--space-16); }
+.mb-24, .mb-lg { margin-bottom: var(--space-24); }
+
+.mr-sm { margin-right: var(--space-8); }
+.ml-auto { margin-left: auto; }
+
+
+/* Padding ------------------------------------------------------- */
+.py-sm { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+
+
+/* Width / max-width -------------------------------------------- */
+.w-full   { width: 100%; }
+.w-auto   { width: auto; }
+.w-100    { width: 100px; }
+.max-w-narrow { max-width: 120px; }
+.max-w-200    { max-width: 200px; }
+.max-w-medium { max-width: 220px; }
+
 
-/* Position (CSP-migration: ersatter style="position: ...") */
+/* Min-width (for flex-form-rows) ------------------------------- */
+.min-w-140 { min-width: 140px; }
+.min-w-180 { min-width: 180px; }
+
+
+/* Text helpers ------------------------------------------------- */
+.text-right  { text-align: right; }
+.text-center { text-align: center; }
+
+
+/* Cursors ------------------------------------------------------ */
+.cursor-pointer { cursor: pointer; }
+
+
+/* Position (CSP-migration: ersatter style="position: ..."-attribut) */
 .absolute      { position: absolute; }
 .absolute-fill { position: absolute; inset: 0; }
-.relative      { position: relative; }
 
-/* Text */
-.text-center { text-align: center; }
-.text-right  { text-align: right; }
-.break-word  { word-break: break-word; overflow-wrap: anywhere; }
-.tabular-nums { font-variant-numeric: tabular-nums; }
-
-/* Text-color (semantic shortcuts) */
-.text-default  { color: var(--text-default); }
-.text-subtle   { color: var(--text-subtle); }
-.text-muted    { color: var(--text-muted); }
-.text-disabled { color: var(--text-disabled); }
-.text-positive { color: var(--positive); }
-.text-negative { color: var(--negative); }
-.text-warning  { color: var(--warning); }
-.text-accent   { color: var(--accent-text); }
-
-/* Visibility */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+
+/* Self-alignment (flex-children) */
+.align-self-start { align-self: flex-start; }
+
+
+/* Composite flex (vanlig kombination i demos och paneler) */
+.flex-col-gap { display: flex; flex-direction: column; gap: var(--space-8); }
+
+
+/* Status-color shortcuts (legacy aliases). */
+.positive { color: var(--positive); }
+.negative { color: var(--negative); }
+.accent   { color: var(--accent); }
+.warning  { color: var(--warning); }
+
+
+/* Text-color utilities (CSP-migration: ersatter style="color: var(--text-X)") */
+.text-subtle { color: var(--text-subtle); }
+.text-muted  { color: var(--text-muted); }

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@klodd/ds",
-  "version": "3.3.0",
-  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v2.0 inkluderar all komponentkod och delad JS - app-repona haller bara data och affarslogik.",
+  "version": "3.4.0",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.4 inkluderar sync/verify/precache CLI sa app-repona inte langre handhaller egna build-script.",
   "main": "css/index.css",
+  "bin": {
+    "klodd-ds": "./bin/klodd-ds.js"
+  },
   "files": [
     "css/",
-    "js/"
+    "js/",
+    "bin/",
+    "SKILL.md",
+    "references/"
   ],
+  "engines": {
+    "node": ">=16.7"
+  },
   "keywords": [
     "design-system",
     "css",