Draw the group segment's state layer from the foundation class

Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
A segment's hover and press opacities were group.css's own copy of
md-state-layer's declarations; the label now renders md-state-layer
(and, below medium's two smallest sizes, md-touch-target) and the
stylesheet keeps only what the class cannot draw: focus and disabled read
off the real radio or checkbox inside with :has(), not the label itself,
so the focus ring's layer tint and the disabled hide are kept as a
refinement (the latter a real gap the old rule left open). button-group.css,
which only shapes corners and spacing, needed no change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/group.css

@@ -13,8 +13,14 @@
  * secondary), `filled` (surface-container behind on-surface-variant, chosen in primary) or
  * `outlined` (an outline-variant edge, chosen in inverse-surface). A checked input picks the
  * chosen colours (`:has(:checked)`), a disabled one the disabled treatment — on-surface at 10%
- * behind 38% text — and keyboard focus on the input draws M3's focus ring around its segment.
- * Corners move on the fast spatial spring and colours on the fast effects spring beside it.
+ * behind 38% text. Corners move on the fast spatial spring and colours on the fast effects spring
+ * beside it.
+ *
+ * A segment renders the foundation's `md-state-layer` (foundation/interaction.css) on the label
+ * itself, which reaches the same `:hover`/`:active` as the class expects; below `medium`'s smallest
+ * two sizes it renders `md-touch-target` too. The real control is the `<input>` inside, not the
+ * label, so keyboard focus and the disabled state are read off it with `:has()` — the one
+ * difference the class cannot draw, kept here as a refinement.
  *
  * The legend is label-large and the hint body-small, both in on-surface-variant; a validation
  * message takes the hint's place in error. `hint-class` lands on the hint, where a caller's class
@@ -53,8 +59,6 @@
         --md-group-container: var(--md-sys-color-secondary-container);
         --md-group-label: var(--md-sys-color-on-secondary-container);
 
-        position: relative;
-        isolation: isolate;
         display: flex;
         flex: 1 1 0%;
         align-items: center;
@@ -76,31 +80,21 @@
             var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
             var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
 
-        &::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            z-index: -1;
-            border-radius: inherit;
-            background-color: currentColor;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
-        }
-
-        @media (hover: hover) {
-            &:hover::before {
-                opacity: var(--md-sys-state-hover-state-layer-opacity);
-            }
-        }
-
+        /* Focus lands on the input inside, not the label, so it is read with :has(); the state
+           layer's own opacity joins the ring, as the foundation class draws for a focused control. */
         &:has(:focus-visible) {
             outline: 3px solid var(--md-sys-color-secondary);
             outline-offset: 2px;
+
+            &::before {
+                opacity: var(--md-sys-state-focus-state-layer-opacity);
+            }
         }
 
-        &:active::before {
-            opacity: var(--md-sys-state-pressed-state-layer-opacity);
+        /* Disabled is read off the input too: the class's own :disabled/aria-disabled rule never
+           fires on the label it never reaches. */
+        &:has(:disabled)::before {
+            display: none;
         }
 
         /* The radio or checkbox stays in the page, for the form, the keyboard and a screen reader. */
@@ -123,18 +117,6 @@
 
     [data-md-group]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-group-segment] {
         min-inline-size: var(--md-sys-measurement-space600);
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            height: 100%;
-            min-width: var(--md-sys-measurement-space600);
-            min-height: var(--md-sys-measurement-space600);
-            transform: translate(-50%, -50%);
-        }
     }
 
     [data-md-group][data-md-size='xs'] [data-md-group-segment] {