Common incorrect uses of <mds-hr>. 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 the Raw <hr> Element

The native <hr> element does not pick up Magma tokens, so it renders with browser-default styling that does not adapt to themes or high-contrast preferences. Replace it with <mds-hr> inside any Magma-themed page.

<!-- INCORRECT -->
<hr />

<!-- CORRECT -->
<mds-hr></mds-hr>

Do Not Set width or height Directly on the Component

<mds-hr> manages its own width: 100% and height: 1px internally. Overriding these via inline styles or CSS produces inconsistent results across layouts and breaks the visual system contract. Use parent padding to create inset rules instead.

<!-- INCORRECT -->
<mds-hr style="width: 50%; height: 2px;"></mds-hr>

<!-- CORRECT -->
<div style="padding-inline: 2rem;">
  <mds-hr></mds-hr>
</div>

Do Not Pierce Shadow DOM to Change the Line Color

<mds-hr> exposes no ::part() surface and no --mds-hr-* CSS custom properties. Targeting its :host internals via >>> or /deep/ will break on updates. Apply a semantic color utility class (bg-<role>) on the host element instead.

/* INCORRECT */
mds-hr >>> :host {
  background-color: red;
}

/* CORRECT */

<mds-hr class="bg-border-default"></mds-hr>

Do Not Slot Content Into <mds-hr>

<mds-hr> is an empty presentational rule with no slot. Any children placed inside the tags are silently ignored and do not render.

<!-- INCORRECT -->
<mds-hr>
  <span>oppure</span>
</mds-hr>

<!-- CORRECT -->
<mds-text typography="caption" class="text-center">oppure</mds-text>
<mds-hr></mds-hr>

Do Not Use <mds-separator> as a Horizontal Rule

mds-separator is a vertical divider intended for inline or flex contexts such as toolbars and breadcrumbs. Using it to separate stacked content blocks produces incorrect orientation and layout.

<!-- INCORRECT -->
<section>Sezione A</section>
<mds-separator></mds-separator>
<section>Sezione B</section>

<!-- CORRECT -->
<section>Sezione A</section>
<mds-hr></mds-hr>
<section>Sezione B</section>