@klodd/ds 4.1.0 → 4.3.0

package/css/utilities.css

@@ -148,6 +148,30 @@
   vertical-align: -2px;
 }
 
+/* Skip-link - a11y-pattern for keyboard-anvandare. Visas vid :focus
+   (top: var(--space-8) overrider top: -100px). HTML: lagg som forsta
+   element i body, target valfri main-content-id.
+     <a href="#main" class="skip-link">Hoppa till innehall</a>
+   Lyft fran Ekonom + Jubb v4.3.0 (identical implementation efter
+   konsekvens-cykel 2026-05-14 Sprint 5). */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: var(--space-8);
+  padding: var(--space-8) var(--space-16);
+  background: var(--accent-9);
+  color: var(--surface-page);
+  border-radius: var(--radius-full);
+  z-index: var(--z-spinner);
+  font-weight: var(--fw-medium);
+}
+
+.skip-link:focus {
+  top: var(--space-8);
+  outline: 2px solid var(--accent-9);
+  outline-offset: 2px;
+}
+
 /* Pre-formatted code/text. Sunken bakgrund, monospace, pre-wrap
    for line-break-preservering med word-wrap pa lang text. */
 .code-block {

package/package.json

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

package/stylelint-plugin/index.js

@@ -0,0 +1,192 @@
+/* @klodd/ds stylelint-plugin
+ *
+ * Custom design-rule-validation som stylelint-config-standard inte
+ * tacker. Tre regler, alla "klodd/"-prefixade:
+ *
+ * - klodd/no-forbidden-radius:
+ *     border-radius maste vara en av {var(--radius-4), var(--radius-14),
+ *     50%, var(--radius-full), 9999px} per ADR 0013 + DESIGN-LANGUAGE
+ *     sektion 1 (BR-skala 4 varden).
+ *
+ * - klodd/no-forbidden-shadow:
+ *     box-shadow maste vara `none`, `inset ...` (focus-rings),
+ *     `0 0 0 Npx var(--accent-aN)` (focus-rings via spread), eller
+ *     `var(--shadow-card)` per regel 10 + DESIGN-LANGUAGE sektion 2.
+ *
+ * - klodd/no-forbidden-padding:
+ *     padding-varden maste anvanda var(--space-N) dar N matchar en
+ *     existerande token i 00-primitives.css. Hardkodade px/em/%-
+ *     varden (utom 0/auto) flaggas. Per-komponent-typ-disciplin
+ *     (list-row 10/0, banner 14/16 etc) ar fortfarande mansklig
+ *     review mot ADR 0017-tabellen - plugin validerar bara token-
+ *     existens, inte semantisk val per komponent.
+ *
+ * Konfiguration i app-repos:
+ *   .stylelintrc.json:
+ *     {
+ *       "plugins": ["@klodd/ds/stylelint-plugin"],
+ *       "rules": {
+ *         "klodd/no-forbidden-radius": true,
+ *         "klodd/no-forbidden-shadow": true,
+ *         "klodd/no-forbidden-padding": true
+ *       }
+ *     }
+ */
+
+const stylelint = require('stylelint');
+
+const ALLOWED_RADIUS = new Set([
+	'0',
+	'50%',
+	'9999px',
+	'var(--radius-4)',
+	'var(--radius-14)',
+	'var(--radius-full)',
+	'inherit',
+	'initial',
+	'unset',
+]);
+
+// Tillatna --space-N tokens enligt 00-primitives.css.
+// Komponent-padding bor halla sig inom 4-24-skalan per ADR 0017 men
+// mini-elements (badge, pill-nav) far anvanda --space-2 och
+// layout-section-padding far anvanda --space-28/-32/-40+. Pluginet
+// validerar bara att tokenen EXISTERAR - per-komponent-typ-disciplin
+// ar fortfarande mansklig review mot ADR 0017-tabellen.
+const ALLOWED_PADDING_TOKENS = new Set([
+	'2', '4', '6', '8', '10', '12', '14', '16', '18', '20',
+	'22', '24', '28', '32', '40', '48', '56', '64', '80',
+]);
+
+const SHADOW_NONE = /^none$/i;
+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;
+
+const RADIUS_RULE = 'klodd/no-forbidden-radius';
+const SHADOW_RULE = 'klodd/no-forbidden-shadow';
+const PADDING_RULE = 'klodd/no-forbidden-padding';
+
+const messages = {
+	radius: stylelint.utils.ruleMessages(RADIUS_RULE, {
+		forbidden: (value) =>
+			`Forbjudet border-radius "${value}" - anvand en av: var(--radius-4) | var(--radius-14) | 50% | var(--radius-full) (ADR 0013 + DESIGN-LANGUAGE 1)`,
+	}),
+	shadow: stylelint.utils.ruleMessages(SHADOW_RULE, {
+		forbidden: (value) =>
+			`Forbjudet box-shadow "${value}" - tillatet: none | inset focus-rings | var(--shadow-card) (DESIGN-LANGUAGE 2 + regel 10)`,
+	}),
+	padding: stylelint.utils.ruleMessages(PADDING_RULE, {
+		forbidden: (value) =>
+			`Forbjudet padding-varde "${value}" - anvand var(--space-N) (existerande token i 00-primitives.css). Hardkodade px-varden inte tillatna.`,
+	}),
+};
+
+function checkRadius (root, result, primary) {
+	if (!primary) return;
+	root.walkDecls(/^border(-(top|right|bottom|left))?-?radius$/, (decl) => {
+		const values = decl.value.split(/\s+/);
+		values.forEach((v) => {
+			const normalized = v.trim();
+			if (!normalized) return;
+			if (ALLOWED_RADIUS.has(normalized)) return;
+			stylelint.utils.report({
+				ruleName: RADIUS_RULE,
+				result,
+				node: decl,
+				message: messages.radius.forbidden(normalized),
+			});
+		});
+	});
+}
+
+function checkShadow (root, result, primary) {
+	if (!primary) return;
+	root.walkDecls(/^box-shadow$/, (decl) => {
+		const value = decl.value.trim();
+		if (SHADOW_NONE.test(value)) return;
+		if (SHADOW_INSET.test(value)) return;
+		if (SHADOW_FOCUS_RING.test(value)) return;
+		if (SHADOW_CARD_TOKEN.test(value)) return;
+		stylelint.utils.report({
+			ruleName: SHADOW_RULE,
+			result,
+			node: decl,
+			message: messages.shadow.forbidden(value),
+		});
+	});
+}
+
+function checkPadding (root, result, primary) {
+	if (!primary) return;
+	root.walkDecls(/^padding(-(top|right|bottom|left))?$/, (decl) => {
+		const values = decl.value.split(/\s+/);
+		values.forEach((v) => {
+			const normalized = v.trim();
+			if (!normalized) return;
+			if (normalized === '0' || normalized === 'auto' || normalized === 'inherit') return;
+			// var(--space-N)?
+			const tokenMatch = normalized.match(/^var\(--space-(\d+)\)$/);
+			if (tokenMatch) {
+				if (ALLOWED_PADDING_TOKENS.has(tokenMatch[1])) return;
+				stylelint.utils.report({
+					ruleName: PADDING_RULE,
+					result,
+					node: decl,
+					message: messages.padding.forbidden(normalized),
+				});
+				return;
+			}
+			// Hardkodad px / em / % - flagga
+			if (/^[\d.]+(px|em|rem|%)$/.test(normalized)) {
+				stylelint.utils.report({
+					ruleName: PADDING_RULE,
+					result,
+					node: decl,
+					message: messages.padding.forbidden(normalized),
+				});
+			}
+		});
+	});
+}
+
+const radiusPlugin = stylelint.createPlugin(RADIUS_RULE, (primary) => {
+	return (root, result) => {
+		const validOptions = stylelint.utils.validateOptions(result, RADIUS_RULE, {
+			actual: primary,
+			possible: [true, false],
+		});
+		if (!validOptions) return;
+		checkRadius(root, result, primary);
+	};
+});
+radiusPlugin.ruleName = RADIUS_RULE;
+radiusPlugin.messages = messages.radius;
+
+const shadowPlugin = stylelint.createPlugin(SHADOW_RULE, (primary) => {
+	return (root, result) => {
+		const validOptions = stylelint.utils.validateOptions(result, SHADOW_RULE, {
+			actual: primary,
+			possible: [true, false],
+		});
+		if (!validOptions) return;
+		checkShadow(root, result, primary);
+	};
+});
+shadowPlugin.ruleName = SHADOW_RULE;
+shadowPlugin.messages = messages.shadow;
+
+const paddingPlugin = stylelint.createPlugin(PADDING_RULE, (primary) => {
+	return (root, result) => {
+		const validOptions = stylelint.utils.validateOptions(result, PADDING_RULE, {
+			actual: primary,
+			possible: [true, false],
+		});
+		if (!validOptions) return;
+		checkPadding(root, result, primary);
+	};
+});
+paddingPlugin.ruleName = PADDING_RULE;
+paddingPlugin.messages = messages.padding;
+
+module.exports = [radiusPlugin, shadowPlugin, paddingPlugin];