Common incorrect uses of <mds-banner>. 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 an Invalid tone Value

mds-banner.tone is typed as ToneMinimalBoxVariantType, which allows only weak, strong, and box. Values like outline or text are not accepted: no tone style matches them, so the banner renders as with strong, not with the weak default.

<!-- INCORRECT -->
<mds-banner variant="info" tone="outline">
  <mds-text typography="detail">Informazione di sistema.</mds-text>
</mds-banner>

<!-- CORRECT -->
<mds-banner variant="info" tone="weak">
  <mds-text typography="detail">Informazione di sistema.</mds-text>
</mds-banner>

Do Not Override the ARIA Role Manually

The component derives role and aria-live from variant (error/warning assertive, others polite) and writes them on the host when it renders, overwriting a manual value. To change the announcement, change the variant.

<!-- INCORRECT -->
<mds-banner variant="info" role="alert" aria-live="assertive">
  <mds-text typography="detail">Aggiornamento disponibile.</mds-text>
</mds-banner>

<!-- CORRECT - let variant drive the ARIA behavior -->
<mds-banner variant="info">
  <mds-text typography="detail">Aggiornamento disponibile.</mds-text>
</mds-banner>

Do Not Slot an mds-button into the Default Slot to Add Actions

The action named slot is the correct place for inline controls. Placing buttons in the default slot renders them inside the text region, breaks layout, and loses the flex wrapping the action row provides.

<!-- INCORRECT -->
<mds-banner variant="warning">
  <mds-text typography="detail">La licenza sta per scadere.</mds-text>
  <mds-button variant="warning">Rinnova</mds-button>
</mds-banner>

<!-- CORRECT -->
<mds-banner variant="warning">
  <mds-text typography="detail">La licenza sta per scadere.</mds-text>
  <mds-button slot="action" variant="warning" tone="strong">Rinnova</mds-button>
</mds-banner>

Do Not Set deletable="false" to Hide the Close Button

deletable is a boolean prop, and a false boolean is an absent attribute (agents/anti-patterns.md). Stencil reads the string "false" as false here, so the button is hidden, but the attribute stays on the element and any [deletable] selector still matches it. Remove the attribute (or omit it) to hide the button.

<!-- INCORRECT -->
<mds-banner variant="error" deletable="false">
  <mds-text typography="detail">Errore permanente - non dismissibile.</mds-text>
</mds-banner>

<!-- CORRECT -->
<mds-banner variant="error">
  <mds-text typography="detail">Errore permanente - non dismissibile.</mds-text>
</mds-banner>

Do Not Use dark or light for Status Messages

variant="dark" and variant="light" produce role="presentation" with no live region - they are silent to assistive tech. Using them for error, warning, or informational content means screen reader users never receive the announcement.

<!-- INCORRECT - errore silenzioso per tecnologie assistive -->
<mds-banner variant="dark">
  <mds-text typography="detail">Errore: impossibile caricare il documento.</mds-text>
</mds-banner>

<!-- CORRECT -->
<mds-banner variant="error">
  <mds-text typography="detail">Errore: impossibile caricare il documento.</mds-text>
</mds-banner>

Do Not Pierce Shadow DOM to Style Internals

The only supported customization surface is the --mds-banner-* CSS custom properties plus the ::part(text) shadow part. Targeting internal class names with >>> or undocumented ::part() names couples your code to the implementation and breaks on minor releases.

/* INCORRECT */
mds-banner >>> .headline {
  font-size: 1.5rem;
}
mds-banner::part(content) {
  padding: 0;
}

/* CORRECT */
mds-banner {
  --mds-banner-headline-color: rgb(var(--magma-accent-fg));
  --mds-banner-radius: var(--magma-radius-sm);
}
mds-banner::part(text) {
  line-height: 1.6;
}

Do Not Listen to the Native click Event for Dismissal

The component fires mdsBannerClose only when the close button is activated (both pointer and keyboard). A native click listener on the host fires for a click anywhere in the banner, body text and action buttons included.

<!-- INCORRECT -->
<mds-banner variant="info" deletable id="notice">
  <mds-text typography="detail">Avviso temporaneo.</mds-text>
</mds-banner>
<script>
  document.querySelector('#notice').addEventListener('click', () => {
    document.querySelector('#notice').remove();
  });
</script>

<!-- CORRECT -->
<mds-banner variant="info" deletable id="notice">
  <mds-text typography="detail">Avviso temporaneo.</mds-text>
</mds-banner>
<script>
  document.querySelector('#notice').addEventListener('mdsBannerClose', () => {
    document.querySelector('#notice').remove();
  });
</script>