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

resources/css/components/groups.css

@@ -47,6 +47,18 @@
     padding-inline-start: calc(var(--group-pad) - var(--group-grow));
 }
 
+/*
+ * A connected segment at the two smallest sizes is 32px or 40px tall, and an icon-only one is as
+ * narrow as it is tall. M3 names both numbers and tells you not to reduce them: "XS and S
+ * connected button groups have a 48dp target area and a 48dp minimum width". The target is the
+ * `touch-target` utility on the segment itself; the width is here, where a group can reach the
+ * `<x-button>`s a caller put inside it.
+ */
+[data-button-group='connected'][data-size='xs'] > *,
+[data-button-group='connected'][data-size='sm'] > * {
+    min-inline-size: 3rem;
+}
+
 /*
  * Connected segments and split halves take their inner corner from `--group-corner`, so pressing
  * or selecting changes one variable and the rounded outer corners stay put.