Pref animation<mds-pref-animation>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-animation> web component is a preference control that lets users choose how animations are presented (reduced, system-driven, or fully enabled). It is usually a child of <mds-pref> and renders a labelled three-option tab group rather than any native HTML primitive.
Semantic Behavior
Usually inside <mds-pref>: Placed as a direct default-slot child of <mds-pref>, which groups the preference controls in one panel; it also works on its own, since it applies and stores the preference by itself.Tab-group selection: Renders three options (reduce / system / no-preference); the active one is driven by the mode value, and clicking an option sets that mode.Applies the preference globally: Choosing a mode applies it across the whole document and persists the choice, so it is restored on later visits.Initial mode resolution: The effective mode is resolved in order from the mode prop, then the persisted value, then the system default.Change event: mdsPrefChange (detail { preference: 'animation' }) fires on every selection and also on page load; the parent <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 animation: a pick in one is mirrored by the others, which neither apply it again nor emit mdsPrefChange. A pref-animation-* class written on <html> by other code is mirrored the same way.
Properties & Visual Configurations
mode: Sets which animation preference is active - reduce to suppress motion, no-preference to fully enable animations, or system to defer to the user’s OS setting. Leave unset to fall back to the persisted or default (system) value.size: Sizes the nested tab items (sm or 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.