Give a scrolling chip set a scroll button at each edge

M3 § Chips, Accessibility asks that a row which overflows horizontally carry a
visible affordance; `<x-chip-set scroll>` faded its edges and left it there
(plan step 24, audit docs/audits/m3-alignment/inputs.md § Missing). Where the
pointer is fine, and so there is no swipe to reach for, a button now sits over
each fading edge and scrolls the row by most of its width. They are pointer
affordances only — no tab stops, since the arrow keys already walk every chip —
and the row's scroll padding grows on a fine pointer so a chip the keyboard
reaches clears the buttons as well as the fade. The scroller became a ref,
because the buttons stand outside it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/chips.blade.php

@@ -52,8 +52,9 @@
             </x-chip-set>
             BLADE,
         'A set that scrolls' => <<<'BLADE'
+            {{-- M3 asks an overflowing chip row for a visible affordance: the edge it can still scroll towards fades, and on a mouse a button sits over it. --}}
             <div class="w-full max-w-sm">
-                <x-chip-set label="Sort and filter" scroll>
+                <x-chip-set label="Sort and filter" hint="Drag, or use the arrow keys" scroll>
                     <x-chip type="filter" label="Newest" name="sort[]" value="newest" :selected="true" />
                     <x-chip type="filter" label="Largest" name="sort[]" value="largest" />
                     <x-chip type="filter" label="Expiring soon" name="sort[]" value="expiring" />