Common incorrect uses of <mds-radial-menu>. 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 Close the Menu by Setting opened="false"

opened is a boolean prop. Stencil reads "false" as false and, since opened is reflected, removes the attribute at the first render, so this happens to work; but the markup says the opposite of what it does, and on a prop that is not reflected the attribute stays in the DOM, where [attr] selectors still match it. Remove the attribute or set the prop to undefined to close the menu.

<!-- INCORRECT -->
<mds-radial-menu opened="false">...</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu>...</mds-radial-menu>

Do Not Place Non-Item Children in the item Slot

Only <mds-radial-menu-item> elements belong in the item slot. Slotting arbitrary HTML or other components breaks the positioning and size-propagation logic.

<!-- INCORRECT -->
<mds-radial-menu>
  <mds-button slot="item" label="Azione" variant="primary"></mds-button>
  <button slot="item">Azione</button>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Azione" variant="primary" tone="weak"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Set Item Size Individually

<mds-radial-menu> propagates its size prop down to every <mds-radial-menu-item> automatically. Setting size on individual items is overridden on the next update and produces inconsistent results.

<!-- INCORRECT -->
<mds-radial-menu size="lg">
  <mds-radial-menu-item slot="item" size="sm" icon="mi/baseline/edit" tooltip="Modifica" variant="dark"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" size="xl" icon="mi/baseline/delete" tooltip="Elimina" variant="error"></mds-radial-menu-item>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu size="lg">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="dark"></mds-radial-menu-item>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina" variant="error"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Listen for Native contextmenu to Drive interaction="rightclick"

When interaction="rightclick" the component registers its own contextmenu listener on document and prevents the default browser menu. Adding a second listener from application code causes both to fire and may reopen the menu after it closes.

// INCORRECT
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  menu.opened = true; // fights the component's own handler
});

// CORRECT - just set the prop and let the component manage it
menu.interaction = 'rightclick';

Do Not Override Geometry via Inline Styles

The arc geometry is driven by angle-start, angle-end, radius, and direction props - not by inline CSS. Applying transform, top, or left directly on the host or items conflicts with the component’s own animation values.

<!-- INCORRECT -->
<mds-radial-menu style="transform: rotate(45deg);">
  <mds-radial-menu-item slot="item" style="transform: translateX(80px);" icon="mi/baseline/edit" tooltip="Modifica" variant="dark"></mds-radial-menu-item>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu angle-start="45" angle-end="315" radius="6" direction="clockwise">
  <mds-radial-menu-item slot="item" icon="mi/baseline/edit" tooltip="Modifica" variant="dark"></mds-radial-menu-item>
</mds-radial-menu>

Do Not Use an Item Without a tooltip

<mds-radial-menu-item> renders icon-only buttons. Without a tooltip there is no visible label and the accessible name falls back to the icon name (delete), which names the icon, not the item’s purpose.

<!-- INCORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" variant="error"></mds-radial-menu-item>
</mds-radial-menu>

<!-- CORRECT -->
<mds-radial-menu>
  <mds-radial-menu-item slot="item" icon="mi/baseline/delete" tooltip="Elimina elemento" variant="error"></mds-radial-menu-item>
</mds-radial-menu>