Common incorrect uses of <mds-input-tip-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 Slot Text into Auto-Labeled Variants

variant="required", variant="readonly", and variant="disabled" each produce their own localized label from the internal i18n dictionary. Slotted text is silently ignored for these variants, so any copy inside the element is dead markup.

<!-- INCORRECT -->
<mds-input-tip-item variant="required" expanded>Obbligatorio</mds-input-tip-item>

<!-- CORRECT -->
<mds-input-tip-item variant="required" expanded></mds-input-tip-item>

Do Not Slot Content into required-success

variant="required-success" renders a hardcoded checkmark icon (no text). Any slot content is also silently ignored, just like the auto-labeled variants above.

<!-- INCORRECT -->
<mds-input-tip-item variant="required-success" expanded>
  <mds-icon name="mi/baseline/done"></mds-icon>
</mds-input-tip-item>

<!-- CORRECT -->
<mds-input-tip-item variant="required-success" expanded></mds-input-tip-item>

Do Not Set expanded="false" to Hide the Item

expanded is a boolean attribute: remove it entirely to collapse the item. A string value is fragile: "false" is read as false on this component, but the attribute stays on the element until the component renders (attribute selectors and scripts reading it see it set). Never write a boolean as a string.

<!-- INCORRECT -->
<mds-input-tip-item variant="required" expanded="false"></mds-input-tip-item>

<!-- CORRECT -->
<mds-input-tip-item variant="required"></mds-input-tip-item>

Do Not Use Outside <mds-input-tip>

<mds-input-tip-item> is a compound child - it is designed to live as a direct slot child of <mds-input-tip>. Used standalone it renders a loose chip with no input to anchor to and nothing driving its state.

<!-- INCORRECT -->
<div class="hint-area">
  <mds-input-tip-item variant="text" expanded>Suggerimento</mds-input-tip-item>
</div>

<!-- CORRECT -->
<mds-input-tip active>
  <mds-input-tip-item variant="text" expanded>Suggerimento</mds-input-tip-item>
</mds-input-tip>

Do Not Put HTML Elements in the Default Slot

The default slot accepts plain text only (variant="text" and the count-* variants). The chip is a single truncated line of fixed height: nested elements such as <span> or <strong> add nothing and can break it.

<!-- INCORRECT -->
<mds-input-tip-item variant="text" expanded>
  <strong>Nota:</strong> massimo 100 caratteri
</mds-input-tip-item>

<!-- CORRECT -->
<mds-input-tip-item variant="text" expanded>Nota: massimo 100 caratteri</mds-input-tip-item>

Do Not Pierce the Shadow DOM to Change Appearance

The only supported customization surface is the three --mds-input-tip-item-* CSS custom properties. Targeting internal elements with ::part(), >>>, or undocumented selectors will break on future releases.

/* INCORRECT */
mds-input-tip-item >>> .content {
  border-radius: 0;
}
mds-input-tip-item::part(icon) {
  fill: hotpink;
}

/* CORRECT */
mds-input-tip-item {
  --mds-input-tip-item-background: rgb(var(--magma-accent-emphasis));
  --mds-input-tip-item-icon-color: rgb(var(--magma-accent-on-emphasis));
}