Common incorrect uses of <mds-radial-progress>. 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 Pass progress Outside the 0-1 Range

progress is a 0-1 fraction, not a 0-100 percentage. Values outside the range are silently clamped, so progress="75" displays “100%” rather than “75%”.

<!-- INCORRECT -->
<mds-radial-progress progress="75"></mds-radial-progress>

<!-- CORRECT -->
<mds-radial-progress progress="0.75"></mds-radial-progress>

Do Not Use Slots to Add Content

<mds-radial-progress> has no slots - neither a default slot nor any named slot. Placing child elements inside the tag has no effect; they are not rendered.

<!-- INCORRECT -->
<mds-radial-progress progress="0.5">
  <mds-icon name="mi/baseline/check"></mds-icon>
</mds-radial-progress>

<!-- CORRECT -->
<mds-radial-progress progress="0.5" icon="mi/baseline/check"></mds-radial-progress>

Do Not Set Both width and height

The component enforces a 1:1 aspect-ratio internally. Setting both dimensions independently can distort the circular ring into an ellipse.

/* INCORRECT */
mds-radial-progress {
  width: 80px;
  height: 60px;
}

/* CORRECT */
mds-radial-progress {
  width: 80px;
}

Do Not Hard-Code Colors with Inline Styles

Inline style bypasses variant and the Magma color roles, breaking dark-mode and high-contrast adaptations.

<!-- INCORRECT -->
<mds-radial-progress
  progress="0.6"
  style="color: #FF5500; background: #eee;"
></mds-radial-progress>

<!-- CORRECT -->
<mds-radial-progress progress="0.6" variant="warning"></mds-radial-progress>

Do Not Use variant Values Not Accepted by the Component

<mds-radial-progress> accepts ThemeVariantType (primary, ai, dark, light, error, warning, success, info). Decorative label variants ('red', 'blue', 'orchid', etc.) defined in ThemeFullVariantType are not wired in this component and silently fall back to the default styling.

<!-- INCORRECT -->
<mds-radial-progress progress="0.4" variant="red"></mds-radial-progress>

<!-- CORRECT - use a semantic status variant for color emphasis -->
<mds-radial-progress progress="0.4" variant="error"></mds-radial-progress>

Do Not Pierce the Shadow DOM

Targeting internal class names via >>> or undocumented ::part() selectors couples your code to the component’s implementation and breaks on future releases. Use variant and the documented value-container / icon shadow parts only.

/* INCORRECT */
mds-radial-progress >>> .value {
  font-size: 20px;
}
mds-radial-progress::part(value-container__text) {
  display: none;
}

/* CORRECT */
mds-radial-progress::part(value-container) {
  box-shadow: none;
}