@klodd/ds 5.16.0 → 5.16.2

package/css/components/avatar.css

@@ -23,6 +23,9 @@
   line-height: var(--lh-tight);
 }
 
+/* --sm ar dekorativ storlek (28px) - INTE en sjalvstandig tap-target.
+   Wrapper-elementet (<a>, <button>) ansvarar for min 44px klickyta.
+   Anvand aldrig .avatar--sm som ensamt klickbart element. */
 .avatar--sm {
   width: var(--circle-size-sm);
   height: var(--circle-size-sm);

package/css/components/chip.css

@@ -19,10 +19,14 @@
    v3.13.0: .install-chip (PWA install-prompt) borttagen tillsammans
    med tillhörande JS i pwa-register.js.
    ================================================================ */
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Padding/font-size oforandrade - chipset stannar visuellt
+   kompakt men yta blir 44px tall sa klickytan motsvarar standarden. */
 .chip {
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
+  min-height: var(--touch-min);
   font-size: var(--fs-11);
   font-weight: var(--fw-medium);
   padding: var(--space-4) var(--space-10);
@@ -87,12 +91,15 @@
   padding: 0;
 }
 
+/* 2026-05-26: 18x18 -> --touch-min (44x44) for WCAG AA. Den visuella
+   x-ikonen inuti behaller sin smaa storlek (template-SVG-attribut) -
+   bara tap-targeten utokas till 44x44. */
 .chip-list__delete {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-18);
-  height: var(--space-18);
+  width: var(--touch-min);
+  height: var(--touch-min);
   padding: 0;
   background: transparent;
   border: 0;
@@ -127,7 +134,11 @@
   pointer-events: none;
 }
 
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Bredd, padding och font behalls (komposition med .chip-list
+   __item-styling). */
 .chip-list__add {
+  min-height: var(--touch-min);
   background: transparent;
   border-style: dashed;
   color: var(--text-subtle);

package/css/components/dropdown.css

@@ -41,11 +41,15 @@
   display: block;
 }
 
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Text centreras vertikalt via existerande align-items.
+   Padding-inline 12 + fs-14 behalls - menyrad blir luftigare. */
 .dropdown__item {
   display: flex;
   align-items: center;
   gap: var(--space-8);
   width: 100%;
+  min-height: var(--touch-min);
   padding: var(--space-8) var(--space-12);
   font-family: inherit;
   font-size: var(--fs-14);

package/css/components/pill-nav.css

@@ -45,11 +45,14 @@
   display: none;
 }
 
+/* 2026-05-26: height var(--circle-size) (36px) -> min-height
+   var(--touch-min) (44px) for WCAG AA tap-target. Padding och fs-13
+   behalls - pillen vaxer bara vertikalt. */
 .pill-nav__item {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--circle-size);
+  min-height: var(--touch-min);
   padding: 0 var(--space-16);
   background: var(--surface-default);
   border: 1px solid var(--border-subtle);

package/css/components/sheet-content.css

@@ -200,9 +200,13 @@
   gap: var(--space-8);
 }
 
+/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
+   target. Tidigare ~43px (1px under). Padding och centrering
+   oforandrade. */
 .sheet__item {
   display: block;
   width: 100%;
+  min-height: var(--touch-min);
   padding: var(--space-12) var(--space-14);
   background: var(--surface-default);
   border: 1px solid var(--border-default);

package/js/turbo-nav.js

@@ -66,6 +66,15 @@
 	let currentController = null;
 	let inFlightSwap = null; // Promise som resolvar nar pagaende VT/swap ar klar.
 
+	/*--------------------------------------------------------------
+	 Track senaste pathname+search sa popstate-handlern kan skilja
+	 mellan riktig back/forward-nav (path/search andras) och hash-
+	 only-nav (browser default scroll-to-anchor + hashchange). Vid
+	 hash-only ska turbo INTE fetch+swap - det skulle overrida
+	 browser-default-scrollen med scrollTo(0, cachedScroll=0).
+	--------------------------------------------------------------*/
+	let lastPathSearch = window.location.pathname + window.location.search;
+
 	/*--------------------------------------------------------------
 	 Lank-eligibility: ska denna <a> hanteras av Turbo eller browsern?
 	--------------------------------------------------------------*/
@@ -316,6 +325,13 @@
 				history.pushState( mergeState( { scrollY: 0 } ), '', finalUrl );
 			}
 
+			// Spara nya path+search sa popstate-handlern kan upptacka
+			// hash-only-navigations (path/search aterstaller, bara hash byter).
+			try {
+				const parsed = new URL( finalUrl );
+				lastPathSearch = parsed.pathname + parsed.search;
+			} catch ( _ ) { /* ignore */ }
+
 			// Notify subscribers (nav-optimistic.js, hero-roll.js, future modules).
 			document.dispatchEvent( new CustomEvent( 'turbo:navigated', {
 				detail: { url: finalUrl, fromUrl: fromUrl, popstate: !! options.popstate },
@@ -357,8 +373,26 @@
 	 turbo: true via mergeState sa popstate-handling vet att vi ar
 	 i turbo-modell hela vagen. Browser-internals (scroll-cache,
 	 etc.) bevaras eftersom vi merge:ar istallet for replace:ar.
+
+	 Chrome firar popstate aven for hash-only-navs pa samma
+	 dokument (a href="#x"-klick laggs som history-entry + ev.
+	 popstate beroende pa browser-version). Vi vill INTE turbo-
+	 fetch+swap i de fallen - browser default-scroll till anchor
+	 + hashchange-event hanterar det helt natively. Att fetch+swap
+	 trots det leder till scrollTo(0, 0) i swap-callbacken (state
+	 null fran browser-skapad entry), vilket overrider anchor-
+	 scrollen och blir "scrollade tillbaka till toppen"-bugg.
+
+	 Detektion: jamfor nuvarande pathname+search mot lastPathSearch
+	 (updateras vid varje lyckad navigateTo). Identiska = hash-only.
 	--------------------------------------------------------------*/
 	window.addEventListener( 'popstate', function () {
+		const currentPathSearch = window.location.pathname + window.location.search;
+		if ( currentPathSearch === lastPathSearch ) {
+			// Hash-only-nav pa samma dokument - browser default + hashchange
+			// gor jobbet. Inget att swappa.
+			return;
+		}
 		navigateTo( window.location.href, { popstate: true } );
 	} );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.16.0",
+  "version": "5.16.2",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {