Common incorrect uses of <mds-separator>. 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 a Raw <hr> Instead of <mds-separator>

Using a plain <hr> bypasses the Magma token system, so the divider will not adapt to dark mode or high-contrast preferences automatically. Use <mds-separator> for any themed divider inside a Magma layout.

<!-- INCORRECT -->
<mds-entity icon="mi/baseline/person">
  <mds-text typography="h6">Mario Rossi</mds-text>
</mds-entity>
<hr>
<mds-entity icon="mi/baseline/person">
  <mds-text typography="h6">Luigi Verdi</mds-text>
</mds-entity>

<!-- CORRECT -->
<mds-entity icon="mi/baseline/person">
  <mds-text typography="h6">Mario Rossi</mds-text>
</mds-entity>
<mds-separator></mds-separator>
<mds-entity icon="mi/baseline/person">
  <mds-text typography="h6">Luigi Verdi</mds-text>
</mds-entity>

Do Not Put Content Inside <mds-separator>

The component defines no slots and accepts no children. Placing text or elements inside it has no effect and may produce unexpected layout behavior.

<!-- INCORRECT -->
<mds-separator>oppure</mds-separator>

<!-- CORRECT -->
<!-- Use a dedicated labeled-divider pattern with a flex row if a label is needed -->
<div class="flex items-center gap-300">
  <mds-separator class="grow"></mds-separator>
  <mds-text typography="caption">oppure</mds-text>
  <mds-separator class="grow"></mds-separator>
</div>

Do Not Override Color with a Raw CSS Value

Setting --mds-separator-background to a literal hex or RGB value without using a semantic color role breaks dark mode and high-contrast adaptation. Always wrap the value in rgb(var(--magma-<role>)).

/* INCORRECT */
mds-separator {
  --mds-separator-background: #cccccc;
}

/* CORRECT */
mds-separator {
  --mds-separator-background: rgb(var(--magma-border-muted));
}

Do Not Pierce Shadow DOM to Style the Separator

There are no documented ::part() names on <mds-separator>. The only supported customization surface is --mds-separator-background. Targeting internal elements via >>> or undocumented selectors will break on future releases.

/* INCORRECT */
mds-separator >>> :host {
  height: 2px;
  border-radius: 0;
}

/* CORRECT */
/* Only --mds-separator-background is the supported override.
   Layout constraints such as height are not part of its styling API. */
mds-separator {
  --mds-separator-background: rgb(var(--magma-accent-border));
}

Do Not Add Semantic Roles to <mds-separator>

<mds-separator> is purely decorative. Adding role="separator" or aria-orientation introduces misleading semantics for assistive technology. <mds-hr> carries no role either: express a meaningful break through the document structure (headings, sections).

<!-- INCORRECT -->
<mds-separator role="separator" aria-orientation="horizontal"></mds-separator>

<!-- CORRECT - decorative divider (no ARIA needed) -->
<mds-separator></mds-separator>