Draw the chip set without Tailwind

<x-chip-set> renders data-md-chip-set (data-md-scroll), its row, label,
hint, errors and scroll buttons as data-md-* attributes, and its row,
fade mask, scroll padding and pointer-fine buttons move into
components/chip-set.css on tokens (plan step 36). chips.js marks the
row data-md-scroll-start and data-md-scroll-end. Browser tests cover the
scroll buttons in LTR and RTL and the arrow keys with a roving tab stop
that scrolls the focused chip clear of the button.

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

resources/views/components/chip-set.blade.php

@@ -19,7 +19,11 @@
 
      The set is one tab stop and the arrow keys move between the chips inside it, with Home and End
      at the ends — M3's chip keyboard table. Backspace and Delete still remove a focused input
-     chip. --}}
+     chip.
+
+     The root renders `data-md-chip-set` (and `data-md-scroll`), the row `data-md-chip-set-row`, which
+     resources/js/chips.js marks `data-md-scroll-start` and `data-md-scroll-end`; the drawing is
+     resources/css/components/chip-set.css. `class` and every other attribute land on the root. --}}
 
 @props([
     'label' => null,
@@ -37,24 +41,25 @@
 @endphp
 
 <div
+    data-md-chip-set
+    @if ($scroll) data-md-scroll @endif
     role="group"
     @if (filled($label)) aria-labelledby="material-chip-set-{{ $key }}-label" @endif
     @if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
-    {{ $attributes->class('min-w-0') }}
+    {{ $attributes }}
 >
     @if (filled($label))
-        <p id="material-chip-set-{{ $key }}-label" class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</p>
+        <p id="material-chip-set-{{ $key }}-label" data-md-chip-set-label>{{ $label }}</p>
     @endif
 
     @if ($scroll)
-        <div x-data="materialChipSet" class="relative">
+        <div x-data="materialChipSet" data-md-chip-set-scroller>
             <div
-                data-chip-set
+                data-md-chip-set-row
                 x-ref="row"
                 x-on:keydown="key($event)"
                 x-on:focusin="rove($event.target)"
                 wire:ignore.self
-                class="peer -mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 pointer-fine:scroll-px-10 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
             >
                 {{ $slot }}
             </div>
@@ -65,31 +70,26 @@
                     type="button"
                     tabindex="-1"
                     aria-hidden="true"
-                    data-chip-scroll="{{ $edge }}"
+                    data-md-chip-scroll="{{ $edge }}"
                     x-on:click="nudge('{{ $edge }}')"
-                    @class([
-                        'absolute inset-y-0 my-auto hidden size-8 place-items-center rounded-corner-full bg-surface-container-high text-on-surface-variant shadow-elevation-1',
-                        'start-0 peer-data-scroll-start:pointer-fine:grid' => $edge === 'start',
-                        'end-0 peer-data-scroll-end:pointer-fine:grid' => $edge === 'end',
-                    ])
                 >
-                    <x-livewire-material::icon :name="$glyph" class="size-4.5 rtl:-scale-x-100" optical="20" />
+                    <x-livewire-material::icon :name="$glyph" size="18" mirror-rtl />
                 </button>
             @endforeach
         </div>
     @else
-        <div data-chip-set x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)" class="flex flex-wrap gap-2">
+        <div data-md-chip-set-row x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)">
             {{ $slot }}
         </div>
     @endif
 
     @if ($messages !== [])
-        <div id="{{ $describedBy }}">
+        <div id="{{ $describedBy }}" data-md-chip-set-errors>
             @foreach ($messages as $message)
-                <p class="mt-1 type-body-sm text-error">{{ $message }}</p>
+                <p>{{ $message }}</p>
             @endforeach
         </div>
     @elseif (filled($hint))
-        <p id="{{ $describedBy }}" class="mt-1 type-body-sm text-on-surface-variant">{{ $hint }}</p>
+        <p id="{{ $describedBy }}" data-md-chip-set-hint>{{ $hint }}</p>
     @endif
 </div>