Common incorrect uses of the <mds-price-table> family. 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 Child Components Outside Their Parent

<mds-price-table-features-row> and <mds-price-table-features-cell> communicate with <mds-price-table-features> through the slot mechanism. Placing them in free-form HTML drops the <table> the parent renders around them (fixed layout, collapsed borders) and the cell padding it shares through --mds-price-table-features-padding.

<!-- INCORRECT -->
<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
  <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
</mds-price-table-features-row>

<!-- CORRECT -->
<mds-price-table-features>
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
  </mds-price-table-features-row>
</mds-price-table-features>

Do Not Omit the Slot Name on Plan Card Children

<mds-price-table-list> routes content through named slots: header, price, and action. The component has no default slot: content without a slot attribute is not rendered at all (only <mds-price-table-list-item> assigns itself to the item slot).

<!-- INCORRECT - none of these is rendered -->
<mds-price-table-list>
  <mds-text typography="h5" tag="h4">Piano Base</mds-text>
  <mds-text typography="h2" tag="h4">49 EUR</mds-text>
  <mds-button variant="dark">Inizia</mds-button>
</mds-price-table-list>

<!-- CORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" tag="h4" slot="header">Piano Base</mds-text>
  <mds-text typography="h2" tag="h4" slot="price">49 EUR</mds-text>
  <mds-button slot="action" variant="dark">Inizia</mds-button>
</mds-price-table-list>

Do Not Pass supported="false" as a String on mds-price-table-list-item

supported is a boolean prop: express a missing feature by removing the attribute, 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">Export report</mds-price-table-list-item>

<!-- CORRECT -->
<mds-price-table-list-item>Export report</mds-price-table-list-item>

Do Not Use an Invalid type on mds-price-table-features-cell

type accepts exactly five values: label, text, supported, unsupported, custom. An unrecognised value silently renders nothing because the component matches each value with a conditional render branch.

<!-- INCORRECT (not a valid type value) -->
<mds-price-table-features-cell type="check"></mds-price-table-features-cell>
<mds-price-table-features-cell type="icon"></mds-price-table-features-cell>

<!-- CORRECT -->
<mds-price-table-features-cell type="supported"></mds-price-table-features-cell>

Do Not Place Free-Form HTML Directly Inside mds-price-table

<mds-price-table> is a pure layout host - its slot expects the dedicated compound children. Arbitrary HTML breaks the grid spacing contract and produces unstyled content because the component applies no visual treatment to unknown children.

<!-- INCORRECT -->
<mds-price-table>
  <div class="piano">
    <h3>Piano Base</h3>
    <p>49 EUR/mese</p>
  </div>
</mds-price-table>

<!-- CORRECT -->
<mds-price-table>
  <mds-price-table-list>
    <mds-text typography="h5" tag="h4" slot="header">Piano Base</mds-text>
    <mds-text typography="h2" tag="h4" slot="price">49 EUR/mese</mds-text>
    <mds-button slot="action" variant="dark">Inizia</mds-button>
  </mds-price-table-list>
</mds-price-table>

Do Not Put Slotted Content Inside supported or unsupported Cells

<mds-price-table-features-cell type="supported"> and type="unsupported" render a fixed icon and ignore any slotted content. Only type="text", type="label", and type="custom" project slotted nodes.

<!-- INCORRECT - slotted text is silently ignored -->
<mds-price-table-features-cell type="supported">Si</mds-price-table-features-cell>
<mds-price-table-features-cell type="unsupported">No</mds-price-table-features-cell>

<!-- CORRECT - leave icon cells empty or use text/custom for values -->
<mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
<mds-price-table-features-cell type="text">Non disponibile</mds-price-table-features-cell>

Do Not Pierce Shadow Parts of Child Components to Restyle Cells

<mds-price-table-features-cell> exposes two documented shadow parts: icon (the check or dash icon) and text (the detail text wrapper). Targeting undocumented internals via >>> or unlisted ::part() names couples app code to implementation details that may change.

/* INCORRECT */
mds-price-table-features-cell >>> .icon {
  fill: red;
}
mds-price-table-features-cell::part(cell-wrapper) {
  padding: 1rem;
}

/* CORRECT */
mds-price-table-features-cell::part(icon) {
  fill: rgb(var(--magma-success-fg));
}