Correct and idiomatic ways to use the <mds-pref-consumption> component, ordered from most common to most specialized. Patterns assume a working knowledge of the preference system documented in agents/theming.md and the shared component rules in agents/conventions.md.

Default Use Inside mds-pref

The canonical form. Place <mds-pref-consumption> as a direct slot child of <mds-pref>. Omit mode so the component restores the persisted user choice automatically; the parent forwards later changes of its own size to every mds-pref-* child.

<mds-pref>
  <mds-pref-consumption></mds-pref-consumption>
</mds-pref>

Forcing an Initial Mode

Set mode explicitly only when the application needs to override the persisted value - for example, when seeding preferences from a server-side profile. All three accepted values are "low", "medium", and "high".

<mds-pref>
  <mds-pref-consumption mode="low"></mds-pref-consumption>
</mds-pref>

Controlling Size

Use the size prop on the control itself: outside <mds-pref>, and inside it too for the first render, since the parent forwards only later changes of its own size. Accepted values are "sm" and "md".

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

Reacting to Mode Changes

Listen for the mdsPrefChange event to detect when the user picks a new consumption level. The event detail always carries { preference: "consumption" }; the event also fires on page load, so do not read each one as a user’s choice.

<mds-pref-consumption id="consumption-pref"></mds-pref-consumption>

<script>
  document
    .querySelector('#consumption-pref')
    .addEventListener('mdsPrefChange', (event) => {
      console.log('Preferenza consumo cambiata:', event.detail.preference);
    });
</script>

Reading the Active Mode After a Change

The mode prop is mutable and reflected as an attribute. The event is emitted before the new mode is stored, so inside the handler the element still holds the previous value: read it once the handler has returned.

<mds-pref-consumption id="consumption-pref"></mds-pref-consumption>

<script>
  const pref = document.querySelector('#consumption-pref');
  pref.addEventListener('mdsPrefChange', () => {
    // the new mode is stored right after the event: read it on the next task
    setTimeout(() => console.log('Modalita attiva:', pref.mode));
  });
</script>