feat(admin): highlight element by URL hash with smooth scroll

• Added a focus-pulse animation and JS logic to highlight form elements referenced by the URL hash and scroll them into view smoothly. Includes reduced motion fallback.
• Bumped csk-common version to `1.3.17`.

Author: bkader

css/admin.css

@@ -2502,7 +2502,7 @@ body.csk-clean .footer .skeleton-footer-logo {
 	background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
 	background-repeat: no-repeat;
 	background-position: left .75rem center;
-	background-size: 16px 12px;
+	background-size: 1rem .75rem;
 	border: var(--bs-border-width) solid var(--bs-border-color);
 	border-radius: var(--bs-border-radius);
 	block-size: calc(1.5em + .75rem + 2px);
@@ -2656,3 +2656,31 @@ caption,
 .scroll-to-top i {
 	font-weight: 800;
 }
+
+@keyframes focus-pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), .35);
+		background-color: rgba(var(--bs-warning-rgb), 0);
+	}
+
+	50% {
+		box-shadow: 0 0 0 .188rem rgba(var(--bs-danger-rgb), .2);
+		background-color: rgba(var(--bs-warning-rgb), .1);
+	}
+
+	100% {
+		box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), .35);
+		background-color: rgba(var(--bs-warning-rgb), 0);
+	}
+}
+
+.highlight-focus {
+	animation: focus-pulse .6s ease-in-out 3;
+	box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), .35);
+	background-color: rgba(var(--bs-warning-rgb), 0);
+}
+
+.highlight-focus:prefers-reduced-motion {
+	animation: none;
+	outline: .188rem solid rgba(var(--bs-danger-rgb), .5);
+}

css/admin.min.css

@@ -338,13 +338,36 @@
 				}]
 			};
 			return $(selector).DataTable($.extend(true, {}, defaults, options));
+		},
+		/**
+		 * Highlights and element referenced by the URL hash (element ID).
+		 * Smooth scroll included. Silently bails if no match.
+		 * @since 3.10.0
+		 */
+		highlightByHash: function() {
+			const hash = window.location.hash;
+			if (!hash) return;
+
+			const el = document.getElementById(hash.substring(1));
+			if (!el) return;
+
+			// Look for best ancestor wrapper
+			const group = el.closest('.form-group, .mb-3, .form-check');
+
+			const target = group || el;
+			target.classList.add('highlight-focus');
+			target.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
+
+			// Remove the class after blink sequence
+			setTimeout(() => target.classList.remove('highlight-focus'), 4000);
 		}
 	};
 
 	/**
 	 * Register our custom Lazy Load function.
 	 * @since 2.0
 	 */
+	csk.ui.highlightByHash();
 	csk.ui.addListener("mousedown", csk.ui.selectOff)
 	csk.ui.addListener("mouseup", csk.ui.selectOn)
 	csk.ui.addListener("load", csk.ui.lazyLoad);
@@ -353,7 +376,7 @@
 	csk.ui.addListener('click', function(e) {
 		if (e.target.closest('.scroll-to-top')) {
 			e.preventDefault();
-			window.scrollTo({ top: 0, behavior: 'smooth' });
+			window.scrollTo({top: 0, behavior: 'smooth'});
 		}
 	});
 
@@ -1148,7 +1171,7 @@
 					url.searchParams.delete(key);
 				}
 			}
-			window.history.pushState({ href: url.href }, "", url.href);
+			window.history.pushState({href: url.href}, "", url.href);
 			$(this).remove();
 		});
 

js/admin.js

@@ -1 +1 @@
-1.3.16
+1.3.17