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:
co-authored by
Claude Opus 5
parent
4ad257034e
commit
b8c6d411db
@@ -200,7 +200,7 @@ it('offers M3\'s three contrast levels, marking the one in force', function () {
|
||||
->toContain('data-theme-toggle="contrast"')
|
||||
->toContain('aria-label="Contrast"')
|
||||
// A connected button group over native radios, not the deprecated segmented button (N-04).
|
||||
->toContain('data-button-group="connected"')
|
||||
->toContain('data-md-button-group="connected"')
|
||||
->toContain('name="material-contrast"')
|
||||
->toContain('value="standard"')
|
||||
->toContain('value="medium"')
|
||||
@@ -216,7 +216,7 @@ it('names a theme row for a screen reader and legends it on request', function (
|
||||
->not->toContain('<legend')
|
||||
->and((string) $this->blade('<x-theme-toggle mode="picker" label="Appearance" />'))
|
||||
->toContain('aria-label="Appearance"')
|
||||
->toContain('<legend class="mb-2 type-label-lg text-on-surface-variant">Appearance</legend>');
|
||||
->toContain('<legend data-md-group-legend>Appearance</legend>');
|
||||
});
|
||||
|
||||
it('switches the theme through the store in three shapes', function () {
|
||||
|
||||
Reference in New Issue
Block a user