Common incorrect uses of <mds-pref-consumption>. 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 Outside mds-pref Without Acknowledging the Side Effects

<mds-pref-consumption> applies its mode globally by adding a class to <html> and writing to localStorage, even when used standalone. Wrapping it in <mds-pref> does not change that: use the control only where the user is meant to set the document-wide preference (the preferences panel), never as a local toggle for one widget or in a test harness.

<!-- INCORRECT - a local toggle for one widget: it still changes the whole document -->
<div class="settings-widget">
  <mds-pref-consumption></mds-pref-consumption>
</div>

<!-- CORRECT - in the preferences panel, where a document-wide choice is meant -->
<mds-pref>
  <mds-pref-consumption></mds-pref-consumption>
</mds-pref>

Do Not Pass an Invalid mode Value

mode is typed as "low" | "medium" | "high". Any other string has no entry in the component’s mode table: applying it fails with an error, after the value has already been stored in localStorage (later loads fail too), and no consumption level is activated.

<!-- INCORRECT -->
<mds-pref-consumption mode="auto"></mds-pref-consumption>
<mds-pref-consumption mode="none"></mds-pref-consumption>

<!-- CORRECT -->
<mds-pref-consumption mode="low"></mds-pref-consumption>
<mds-pref-consumption mode="medium"></mds-pref-consumption>
<mds-pref-consumption mode="high"></mds-pref-consumption>

Do Not Disable the Mode by Setting mode="false" or mode=""

The mode prop is not boolean. Setting it to an empty string or to the literal "false" does not clear or unset the preference - it corrupts the stored value. To defer mode resolution to the persisted value, leave the attribute absent entirely.

<!-- INCORRECT -->
<mds-pref-consumption mode="false"></mds-pref-consumption>
<mds-pref-consumption mode=""></mds-pref-consumption>

<!-- CORRECT - omit the attribute to restore the persisted value or fall back to "high" -->
<mds-pref-consumption></mds-pref-consumption>

Do Not Listen for Native change or input Events

<mds-pref-consumption> does not emit change or input. The documented event is mdsPrefChange.

<!-- INCORRECT -->
<mds-pref-consumption id="pref"></mds-pref-consumption>
<script>
  document.querySelector('#pref').addEventListener('change', handler);
</script>

<!-- CORRECT -->
<mds-pref-consumption id="pref"></mds-pref-consumption>
<script>
  document.querySelector('#pref').addEventListener('mdsPrefChange', handler);
</script>

Do Not Override Size via CSS Width or Height

The size prop controls the dimensions of the nested tab items. Overriding them with inline styles or external CSS breaks the internal layout and visual consistency of the preference group.

<!-- INCORRECT -->
<mds-pref-consumption style="width: 300px;"></mds-pref-consumption>

<!-- CORRECT -->
<mds-pref-consumption size="sm"></mds-pref-consumption>