# CMP-11 — A component's own nested interactive child (a focus ring, active-state fill, icon) traces that component's own container edge and radius — not a smaller box floating inside it

L2 · judgment · Components & patterns

**Fails when:** a component's own nested interactive child (a focus ring, active-state fill) does not trace that component's own container edge or radius — it reads as floating inside a smaller box, not outlining the container

## Requirement

A component's own nested interactive child matches that component's own container
geometry. A focus ring, active-state fill, or icon nested inside a card, tile, or
button traces the *container's* true edge and radius (accounting for padding, per
the concentric-radius rule in `implement-craft.md`) — not a smaller box floating
inside it. This is a self-consistency check on one instance, distinct from CMP-7's
default/sibling-page checks: a component can match its own default and every
sibling page and still fail this if its own child's box model doesn't match its
own container.

## Rationale

The triggering incident: a two-independent-run efficacy report on the same issue
(a design-skill report) found a stat-tile's active/focus ring sitting
visibly inside its card rather than flush with the card's edge — the `Card`
primitive's own `py-6` padding was never zeroed to match the inner button's
smaller `rounded-xl`, so the ring traced a box floating inside the card shell.
Both evaluator passes graded the ring's *state-tracking* (A11Y-8) as a pass and
missed the *geometry* mismatch entirely, because CMP-7's guidance is worded only
around component defaults and cross-page consistency — it never named
self-consistency between a component and its own nested child as something to
check. A second, independent implementation of the same component (built with no
shared context) got the geometry right by construction — ring on the `Card`
itself, `Card`'s own padding zeroed, matching radius throughout — which is why
this is filed as a missing check, not a hard problem.

Boundary with [[CMP-7]]: CMP-7 checks a component against its own defaults and its
sibling-page usage; CMP-11 checks a component against itself — does its own nested
interactive child trace its own container's edge and radius.

## Passes when

- A nested interactive child's ring, fill, or highlight traces its own container's
  true edge and radius — no visible gap, no radius mismatch, accounting for
  padding.

## Fails when

- A component's own nested interactive child (a focus ring, active-state fill,
  icon) does not trace that component's own container edge or radius — it reads
  as floating inside a smaller box, not outlining the container.

## Evaluator guidance

Check each interactive component against **its own nested child's geometry**, not
only against defaults and sibling pages: does a focus ring, active-state fill, or
icon trace the component's own edge and radius, or does it float inside a smaller
box than the container it's meant to outline? This is a self-consistency read on
one instance — a component can pass CMP-7 and still fail here. It's easy to miss
from a screenshot alone at a glance; look specifically at the gap (or lack of one)
between the ring/fill and the container's own edge, not just whether the ring is
present and state-tracking correctly (that's A11Y-8, a separate check — don't let
a correct A11Y-8 pass stand in for this).

**This control is proposed, pending design-lead approval** — report a violation as
an advisory suggestion, not a blocking or advisory finding, until approved.

## Do not flag

- A *deliberate, recorded* override — one with a waiver carrying a real reason, or
  a documented decision.