@klodd/ds 5.6.0 → 5.7.0

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