Common incorrect uses of <mds-benchmark-bar>. 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 Put HTML in the Default Slot

The default slot is deprecated and accepts plain text only; HTML elements are unsupported and will not render correctly. Use the label prop for the caption.

<!-- INCORRECT -->
<mds-benchmark-bar value="60">
  <strong>Completamento attivita</strong>
</mds-benchmark-bar>

<!-- CORRECT -->
<mds-benchmark-bar label="Completamento attivita" value="60"></mds-benchmark-bar>

Do Not Set value Outside the 0-100 Range

The component passes value / 100 directly to the inner <mds-progress> fill. Values above 100 just fill the whole bar while the caption shows the raw number; negative values produce no fill and no error. Clamp the value in your data layer before binding.

<!-- INCORRECT -->
<mds-benchmark-bar label="Richieste elaborate" value="1540"></mds-benchmark-bar>

<!-- CORRECT -->
<!-- normalize to 0-100 in your controller before binding -->
<mds-benchmark-bar label="Richieste elaborate" value="100"></mds-benchmark-bar>

Do Not Use alias for Structurally Different Content

alias replaces the numeric value with a plain string in both the visual caption and the accessible aria-valuetext. It is not a slot - do not attempt to bind rich HTML or icon markup to it.

<!-- INCORRECT -->
<mds-benchmark-bar label="Stato" value="80" alias="<mds-badge variant='success'>OK</mds-badge>"></mds-benchmark-bar>

<!-- CORRECT -->
<mds-benchmark-bar label="Stato" value="80" alias="Ottimo"></mds-benchmark-bar>

Do Not Override variant to Express Visual Weight Alone

variant is a semantic role (primary, error, success, warning, etc.). Do not choose it purely for the color it produces - choose it for what the metric means. Mixing semantic values for aesthetic reasons makes the chart misleading.

<!-- INCORRECT: error red chosen because it "looks bold", not because it signals a problem -->
<mds-benchmark-bar label="Popolarita del prodotto" value="88" variant="error"></mds-benchmark-bar>

<!-- CORRECT -->
<mds-benchmark-bar label="Popolarita del prodotto" value="88" variant="success"></mds-benchmark-bar>

Do Not Pierce the Shadow DOM to Style the Progress Bar

Use the documented ::part(progress-bar) surface to style the inner bar. Reaching into the shadow DOM via >>> or undocumented class selectors couples your code to the implementation and will break on minor releases.

/* INCORRECT */
mds-benchmark-bar >>> mds-progress {
  background-color: hotpink;
}

/* CORRECT */
.my-context mds-benchmark-bar::part(progress-bar) {
  --mds-progress-color: rgb(var(--magma-accent-fg));
}