src/lib/components/TimeSpinner.svelte

@@ -247,6 +247,31 @@
   function format(n: number): string {
     return String(n).padStart(2, "0");
   }
+
+  // Keyboard handlers for arrow key operation
+  function handleHoursKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      displayHours = wrapValue(displayHours + 1, 24);
+      emitValue(displayHours, displayMinutes);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      displayHours = wrapValue(displayHours - 1, 24);
+      emitValue(displayHours, displayMinutes);
+    }
+  }
+
+  function handleMinutesKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      displayMinutes = wrapValue(displayMinutes + 1, 60);
+      emitValue(displayHours, displayMinutes);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      displayMinutes = wrapValue(displayMinutes - 1, 60);
+      emitValue(displayHours, displayMinutes);
+    }
+  }
 </script>
 
 <div class="time-spinner" style="font-family: {countdownFont ? `'${countdownFont}', monospace` : 'monospace'};">
@@ -265,6 +290,7 @@
     onpointermove={handleHoursPointerMove}
     onpointerup={handleHoursPointerUp}
     onpointercancel={handleHoursPointerUp}
+    onkeydown={handleHoursKeydown}
   >
     <div class="wheel-viewport">
       <div class="wheel-cylinder">
@@ -300,6 +326,7 @@
     onpointermove={handleMinutesPointerMove}
     onpointerup={handleMinutesPointerUp}
     onpointercancel={handleMinutesPointerUp}
+    onkeydown={handleMinutesKeydown}
   >
     <div class="wheel-viewport">
       <div class="wheel-cylinder">