Take colour off the overshooting spatial spring

Four components animated background-color and color on ease-spatial-fast, whose
fast variant peaks at 1.094 — the one thing tokens/motion.css says a colour must
never do. Tailwind cannot emit two springs on one element, so a small unlayered
file gives shape and size the spatial spring and colour and elevation the
effects one in a single property list. Plan step 18, actions.md ACT-19.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/menu-item.blade.php

@@ -18,7 +18,8 @@
      disabled.
 
      44px tall (SegmentedMenuTokens.Item), body-large label, 20px icons, 4px corners that open to
-     12px at the ends of the list. --}}
+     12px at the ends of the list, the corner on the spatial spring and the colour on the effects
+     one (`state-transition-fast`). --}}
 
 @props([
     'label' => null,
@@ -45,7 +46,7 @@
         ->class([
             'group/item state-layer flex w-full min-h-11 cursor-pointer items-center gap-3 px-3 text-start outline-none',
             'rounded-corner-xs first:rounded-t-corner-md last:rounded-b-corner-md',
-            'transition-[border-radius,background-color] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast',
+            'state-transition-fast',
             'focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-secondary',
             'py-2' => filled($description),
             'rounded-corner-md bg-tertiary-container text-on-tertiary-container' => $selected === true,