feat(ui): capitalize button labels and speed depth transitions

Standard buttons now capitalize each word in their labels. Movement and
depth-shadow changes use an 80ms duration while color transitions stay
at 120ms.

DESIGN.md

@@ -56,6 +56,9 @@ button face by 1px and increases the visible depth to 3px. Pressing moves the
 face down 2px into the edge and removes the depth until release, keeping the
 overall bottom position stable. Disabled controls stay flat,
 and focus-visible controls retain the accent ring alongside the depth.
+Movement and depth-shadow changes transition over 80ms; color transitions keep
+the shared 120ms duration.
+Standard button labels use `capitalize`, giving each word an initial capital.
 Highlighted buttons mix the accent equally with black for a pronounced bottom
 edge, so custom theme colors produce a matching edge instead of a generic one.
 Dark mode matches the depth edge of neutral buttons to their regular border

resources/css/app.css

@@ -130,6 +130,10 @@
     transition-duration: 120ms;
 }
 
+.button {
+    transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms;
+}
+
 .icon-button:not(:disabled):active,
 .app-tab:active,
 .split-action-main:not(:disabled):active,

resources/css/utilities.css

@@ -126,7 +126,7 @@
 }
 
 @utility button {
-    @apply inline-flex shrink-0 gap-1.5 justify-center items-center whitespace-nowrap px-2.5 h-8 min-h-8 text-[13px] text-black normal-case rounded-md border outline-0 cursor-pointer font-medium transition-colors bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-white/[0.06] dark:text-fg dark:hover:text-fg dark:hover:bg-white/[0.1] dark:border-white/[0.08] hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-fg-faint disabled:border-neutral-200 dark:disabled:border-white/[0.06] disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent;
+    @apply inline-flex shrink-0 gap-1.5 justify-center items-center whitespace-nowrap px-2.5 h-8 min-h-8 text-[13px] text-black capitalize rounded-md border outline-0 cursor-pointer font-medium transition-colors bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-white/[0.06] dark:text-fg dark:hover:text-fg dark:hover:bg-white/[0.1] dark:border-white/[0.08] hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-fg-faint disabled:border-neutral-200 dark:disabled:border-white/[0.06] disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent;
 }
 
 @utility button-highlighted {

tests/Feature/ButtonDepthInteractionTest.php

@@ -14,6 +14,7 @@ test('standard buttons use raised hover and pressed depth states', function () {
         ->not->toContain('.dark .button.button-highlighted:not(:disabled)')
         ->toContain('.button:not(:disabled):hover')
         ->toContain('transform: translateY(-1px);')
+        ->toContain('transition-duration: 120ms, 120ms, 120ms, 80ms, 80ms;')
         ->toContain('.button:not(:disabled):active')
         ->toContain('transform: translateY(2px);')
         ->not->toContain('transform: translateY(1px);')

tests/Feature/ButtonTextCapitalizationTest.php

@@ -0,0 +1,11 @@
+<?php
+
+test('standard buttons capitalize each word in their labels', function () {
+    $utilities = file_get_contents(resource_path('css/utilities.css'));
+
+    preg_match('/@utility button \{(?<styles>[\s\S]*?)\n\}/', $utilities, $matches);
+
+    expect($matches['styles'] ?? '')
+        ->toContain('capitalize')
+        ->not->toContain('normal-case');
+});