Draw the chips without Tailwind

<x-chip> renders data-md-chip with its type and its states and parts as
data-md-* attributes (elevated, disabled, selected, actionable, the
icon, check slot, avatar, action and remove button), and every colour,
size, target and transition moves into components/chip.css on tokens
(plan step 36). Icons take size 18; the filter checkbox is
md-visually-hidden. chips.js follows the renamed chip hooks.

A disabled filter chip drawn as a label no longer shows a hover state
layer, which M3 never gives a disabled control. Browser tests cover the
32px chip and the remove button's 48px target.

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

tests/Browser/ChipsTest.php

@@ -87,7 +87,7 @@ function filterInput(string $value): string
 }
 
 it('toggles a filter chip with a click and with Space, and grows its check in', function () {
-    $check = fn (string $value): string => filterInput($value).".parentElement.querySelector('[data-chip-check]').parentElement.getBoundingClientRect().width";
+    $check = fn (string $value): string => filterInput($value).".parentElement.querySelector('[data-md-chip-check]').parentElement.getBoundingClientRect().width";
 
     $page = chipShowcase()->assertNoJavaScriptErrors();
 
@@ -173,3 +173,40 @@ it('scrolls a chip set sideways, fading the edge it can still scroll towards', f
         ->assertScript("{$row}.hasAttribute('data-scroll-start')")
         ->assertScript("getComputedStyle({$row}).getPropertyValue('--chip-fade-start').trim() === '1.5rem'");
 });
+
+it('draws the chip 32px tall and catches presses over 48px, the chip and its remove button alike', function () {
+    $page = chipProbe();
+
+    $page->assertScript("document.querySelector('[data-md-chip=\"input\"]').getBoundingClientRect().height === 32")
+        // The remove button is an 18px icon whose target reaches 15px past it on every side.
+        ->assertScript("(() => {
+            const button = document.querySelector('button[aria-label=\"Remove css\"]');
+            const box = button.getBoundingClientRect();
+            const after = getComputedStyle(button, '::after');
+
+            return box.width === 18 && box.height === 18 && after.position === 'absolute' && after.top === '-15px' && after.left === '-15px';
+        })()");
+
+    // A press 22px out from the icon's centre, over the chip's 48px strip, still removes the chip.
+    $page->script("(() => {
+        const button = document.querySelector('button[aria-label=\"Remove css\"]');
+        const box = button.getBoundingClientRect();
+
+        document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2 + 22).click();
+    })()");
+
+    $page->assertSeeIn('#tags', 'php,js')
+        ->assertScript("document.querySelector('button[aria-label=\"Remove css\"]') === null");
+});
+
+it('draws a selected filter chip without its outline, and puts an unselected one\'s label 16px in', function () {
+    $input = fn (string $value): string => "document.querySelector('input[value=\"{$value}\"]')";
+
+    $page = chipProbe();
+
+    $page->assertScript("getComputedStyle({$input('photos')}.parentElement).borderTopColor === 'rgba(0, 0, 0, 0)'")
+        ->assertScript("getComputedStyle({$input('documents')}.parentElement).borderTopWidth === '1px'")
+        ->assertScript("getComputedStyle({$input('documents')}.parentElement).borderTopColor !== 'rgba(0, 0, 0, 0)'")
+        // 1px border, 7px padding, the empty check's 8px margin: Compose's 16px before the label.
+        ->assertScript("Math.round({$input('documents')}.parentElement.querySelector('[data-md-chip-label]').getBoundingClientRect().left - {$input('documents')}.parentElement.getBoundingClientRect().left) === 16");
+});