Common incorrect uses of <mds-radial-menu-item>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use Outside <mds-radial-menu>

<mds-radial-menu-item> is a compound child; it relies on its parent to set angular position, size, and open/close animation. Rendering it standalone leaves it permanently hidden and incorrectly positioned.

<!-- INCORRECT -->
<mds-radial-menu-item icon="mi/baseline/edit" tooltip="Modifica"></mds-radial-menu-item>

<!-- CORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/edit" tooltip="Modifica"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Wrap Items in a Container Element

The parent queries direct slot children ([slot="item"]) to assign positions and sizes. An intermediate wrapper breaks parent-child communication and the item never receives its angular placement.

<!-- INCORRECT -->
<mds-radial-menu>
  <div>
    <mds-radial-menu-item icon="mi/baseline/share" tooltip="Condividi"></mds-radial-menu-item>
  </div>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/share" tooltip="Condividi"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Put Text or HTML in a Slot

<mds-radial-menu-item> has no default slot - any slotted content is ignored. The visible label lives exclusively in the tooltip prop.

<!-- INCORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/edit">Modifica</mds-radial-menu-item>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/edit" tooltip="Modifica"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Omit tooltip for an Icon-Only Item Without Another Label

Omitting tooltip leaves the inner <mds-button> with no hover description and an accessible name that falls back to the icon name (send), which names the icon, not the action. Provide tooltip unless the icon’s purpose is unambiguous and the action is described by a surrounding landmark or heading.

<!-- INCORRECT: accessible name is just the icon name, no hover hint -->
<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/send"></mds-radial-menu-item>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item icon="mi/baseline/send" tooltip="Invia messaggio"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Force size When the Parent Controls It

<mds-radial-menu> overrides each item’s size to match its own size prop. Setting size on the item is redundant: the parent overwrites it when it loads and whenever its own size changes.

<!-- INCORRECT: size will be overridden by the parent anyway -->
<mds-radial-menu size="md">
  <mds-radial-menu-item icon="mi/baseline/edit" tooltip="Modifica" size="xl"></mds-radial-menu-item>
</mds-radial-menu>

<!-- CORRECT: let the parent drive size for all spokes -->
<mds-radial-menu size="md">
  <mds-radial-menu-item icon="mi/baseline/edit" tooltip="Modifica"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Style via Undocumented Shadow Internals

The only supported customization surface is --mds-radial-menu-item-transition-duration and --mds-radial-menu-item-transition-timing-function. Targeting shadow-internal classes or undocumented ::part() names couples code to the implementation and breaks on minor releases.

/* INCORRECT */
mds-radial-menu-item >>> .button {
  border-radius: 0;
}

/* CORRECT: use the documented CSS custom properties */
mds-radial-menu-item {
  --mds-radial-menu-item-transition-duration: 300ms;
}