Pref contrast<mds-pref-contrast>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
modeenumSpecifies the preference mode
sizeenumSets the size of the component items nested inside it
Overview
The <mds-pref-contrast> web component is a preference control that lets users switch the application’s contrast mode (more, system, or no-preference). It is usually a child of the <mds-pref> panel and renders as a segmented tab of icon options rather than any single native HTML primitive.
Semantic Behavior
Usually inside <mds-pref>: It is designed to be placed as a direct slot child of <mds-pref> alongside the other preference children (mds-pref-animation, mds-pref-consumption, mds-pref-language, mds-pref-mode, mds-pref-theme); it also works on its own, since it applies and stores the preference by itself.Mode resolution on load: The active mode is resolved once, on load, in order from the mode prop, the persisted value, then the system default, and applied immediately - so it acts on the document even before any user interaction.Applies the preference globally: Selecting a mode applies it across the whole document and persists the choice.System resolution: With system the component writes pref-contrast-system on <html>, and the styles follow the OS prefers-contrast setting through their own media query; the component does not map the OS value itself.Change event: Every mode change emits mdsPrefChange with { preference: 'contrast' }, and so does the page load; <mds-pref> listens for it only in controller mode.Instances stay in sync: Instances mounted together (a hidden <mds-pref controller> and a visible settings panel) share the applied contrast: a pick in one is mirrored by the others, which neither apply it again nor emit mdsPrefChange. A pref-contrast-* class written on <html> by other code is mirrored the same way.
Properties & Visual Configurations
mode - the active contrast preference. Leave it unset to let the component restore the last persisted choice or fall back to system; set it explicitly (more, system, no-preference) only when the host wants to force a contrast level. Pick more for high-contrast output, no-preference for the default theme, and system to defer to the OS prefers-contrast setting.size - sizes the nested tab items (sm / md). The parent <mds-pref> forwards a later change of its own size to every mds-pref-* child, but not the initial value, so set it on this component as well.The component does not use the shared variant / tone ladders documented in agents/variants.md; its visual states are driven entirely by the resolved mode.