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 @@ ## 1. Visual direction
 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 @@ .split-action-caret {
     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 select {
 }
 
 @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 @@
         ->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');
+});