@hortonstudio/main 1.1.28 → 1.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/styles.css

@@ -16,4 +16,14 @@ body .transition {display: block}
 html, body {
     overscroll-behavior: none;
     scrollbar-gutter: stable;
-  }
+  }
+
+/* TOC focus handling - only show focus outline for keyboard navigation */
+[data-hs-toc] div[id]:focus:not(:focus-visible) {
+    outline: none !important;
+}
+
+[data-hs-toc] div[id]:focus-visible {
+    outline: 2px solid #007bff !important;
+    outline-offset: 2px;
+}

package/utils/toc.js

@@ -44,6 +44,25 @@ export async function init() {
         link.appendChild(number);
         link.appendChild(document.createTextNode(heading.textContent));
 
+        // Add click handler for smooth scrolling
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            const targetSection = document.getElementById(sectionId);
+            if (targetSection) {
+                targetSection.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+        
+        // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
+        const targetSection = document.getElementById(sectionId);
+        if (targetSection) {
+            targetSection.setAttribute('tabindex', '-1');
+            // Use focus-visible to only show outline for keyboard focus
+            targetSection.style.outline = 'none';
+            targetSection.style.setProperty('outline', 'none', 'important');
+        }
+
         // Add item to the TOC list
         tocList.appendChild(tocItem);
     });