Draw the connected choice group without Tailwind

Plan step 36. <x-group> renders data-md-group with its size, variant,
shape, multiple and inline, a data-md-button-group row and
data-md-group-segment labels over its radios or checkboxes. group.css
draws the segments as M3's buttons with the toggle button's colours
from :has(:checked), the disabled treatment from :has(:disabled), the
focus ring from :has(:focus-visible) and the 48px target at xs and sm.

The connected shapes move into button-group.css (the corner scale,
square ends, the pressed and selected inner corners), which group.css
imports; <x-button-group> adopts them in its own rewrite. The group's
render tests move to GroupTest; AppBarTest (navigation group) follows
the new legend and row hooks of theme-toggle's rows.

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:56:59 +02:00

co-authored by

Claude Opus 5

parent 4ad257034e

commit b8c6d411db

8 changed files with 504 additions and 137 deletions

									
										resources/css/components.css
									
		+2
		
												View File
												
				@@ -16,6 +16,8 @@

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

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

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

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

				@import './components/button-group.css';

				/* Inputs, selection and data */