Give a connected segment M3's 48px target and width

An <x-group> segment is a plain label, 32px or 40px tall, with nothing reaching
past it, and nothing gave a connected <x-button-group> its 48dp minimum width
either — both numbers M3 names and tells you not to reduce. The segment now
carries the shared `touch-target` utility and a 48px floor, and groups.css puts
the floor on the buttons a caller nests in a connected group. <x-button> drops
its hand-rolled ::after for the same utility. Plan step 11, actions.md ACT-05.

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
2026-09-14 05:56:52 +02:00
co-authored by Claude Opus 5
parent c1ca157341
commit e4de067350
5 changed files with 34 additions and 6 deletions
+2 -2
View File
@@ -63,8 +63,8 @@ it('rounds by default, squares on request, and squares off further while pressed
});
it('reaches a 48px touch target below the medium size', function () {
expect(buttonClasses('<x-button label="Go" size="sm" />'))->toContain('after:min-h-12')
->and(buttonClasses('<x-button label="Go" size="md" />'))->not->toContain('after:min-h-12');
expect(buttonClasses('<x-button label="Go" size="sm" />'))->toContain('touch-target')
->and(buttonClasses('<x-button label="Go" size="md" />'))->not->toContain('touch-target');
});
it('is an icon button named by its tooltip when it has no label', function () {