Common incorrect uses of <mds-price-table-list-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-price-table-list>

The component auto-assigns itself to the parent’s item slot and is designed exclusively as a child of <mds-price-table-list>. Standalone it still renders its icon and label, but outside the plan card it loses the card’s background, separator and spacing, and the slot="item" it writes on itself points nowhere.

<!-- INCORRECT -->
<mds-price-table-list-item supported>Funzionalita inclusa</mds-price-table-list-item>

<!-- CORRECT -->
<mds-price-table-list>
  <mds-price-table-list-item supported>Funzionalita inclusa</mds-price-table-list-item>
</mds-price-table-list>

Do Not Pass supported as a String

supported is a boolean prop: remove the attribute to turn the feature off, the convention for every Magma boolean (agents/conventions.md). Stencil does parse "false" as false, but the attribute stays in the markup until the component hydrates and its reflection removes it, so a [supported] selector or any code reading the attribute sees it set in the meantime.

<!-- INCORRECT -->
<mds-price-table-list-item supported="false">Accesso API</mds-price-table-list-item>

<!-- CORRECT -->
<mds-price-table-list-item>Accesso API</mds-price-table-list-item>

Do Not Use an Unsupported typography Value

typography accepts only "caption", "detail", and "paragraph" (the TypographyReadType set). Passing a value outside that set - such as "h4" or "label" - produces no error in HTML: it is forwarded to the inner mds-text, which sets the row in that heading or label scale, out of step with the other rows.

<!-- INCORRECT -->
<mds-price-table-list-item typography="h4" supported>Accesso base</mds-price-table-list-item>
<mds-price-table-list-item typography="label">Analytics</mds-price-table-list-item>

<!-- CORRECT -->
<mds-price-table-list-item typography="paragraph" supported>Accesso base</mds-price-table-list-item>
<mds-price-table-list-item typography="caption">Analytics</mds-price-table-list-item>

Do Not Pierce the Shadow DOM to Restyle the Icon

The only supported customization surface for the icon is the three --mds-price-table-list-item-* CSS custom properties and the documented ::part(icon) shadow part. Targeting internal selectors via >>>, /deep/, or undocumented class names couples your styles to the implementation and will break on minor releases.

/* INCORRECT */
mds-price-table-list-item >>> .icon {
  fill: green;
}

/* CORRECT */
mds-price-table-list-item {
  --mds-price-table-list-item-supported-icon-color: rgb(var(--magma-success-fg));
}
/* or, for targeted SVG fill overrides: */
mds-price-table-list-item::part(icon) {
  fill: rgb(var(--magma-success-fg));
}

Do Not Put Block HTML in the Default Slot to Create Layout

The default slot is for the feature label - plain text plus inline helpers such as <mds-help>. Inserting block elements, additional icons, or wrapper <div> structures breaks the flex row layout that aligns the icon and label.

<!-- INCORRECT -->
<mds-price-table-list-item supported>
  <div class="feature-row">
    <mds-icon name="mi/baseline/star"></mds-icon>
    <span>Analisi avanzata</span>
  </div>
</mds-price-table-list-item>

<!-- CORRECT -->
<mds-price-table-list-item supported>
  Analisi avanzata
  <mds-help>Disponibile solo nei piani premium.</mds-help>
</mds-price-table-list-item>