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

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 14:50:29 +02:00

co-authored by

Claude Opus 5

parent b42069503d

commit d8072d878a

6 changed files with 606 additions and 176 deletions

									
										resources/css/components.css
									
		+1
		
												View File
												
				@@ -24,6 +24,7 @@

				@import './components/checkbox.css';

				@import './components/radio.css';

				@import './components/toggle.css';

				@import './components/chip.css';

				/* Containment */