Pref<mds-pref>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
sizeenumSets the size of the component items nested inside it
controllercontrollerbooleanSets if the component works as hidden element controller instead as UI element, visible on the DOM
Overview
The <mds-pref> web component is the accessibility-preferences panel of the Magma Design System: a compound parent that groups user-facing settings (animation, consumption, contrast, theme, language) so people can tune readability, motion, and language for their session. It acts as the coordinator for the mds-pref-* children slotted inside it.
Semantic Behavior
Compound parent: Expects mds-pref-animation, mds-pref-consumption, mds-pref-contrast, mds-pref-mode, mds-pref-theme and/or mds-pref-language children in its default slot; it owns no preference UI of its own beyond coordination (a scheme-constrained mds-pref-theme locks the matching mds-pref-mode item).Size propagation: A change of size after load cascades the value down to every nested mds-pref-* child; the initial value is not forwarded (the watcher does not run on load), so for the first render set size on each child too.Reload notice: The panel has an inline caption prompting the user to refresh the page when a preference that cannot apply live (consumption or language) changes, but it listens for the children’s mdsPrefChange only in controller mode, where the host is hidden: in the visible panel the caption never appears.Document flag: While at least one <mds-pref> is on the page, <html> carries data-magma-pref, which turns off the styles’ fallback to the OS preferences; it is removed only when the last instance leaves the page, so a settings page that unmounts its own panel leaves the app controller in charge. Moving a panel in the DOM (between a sidebar and a menu, or with a client router that keeps it across pages) keeps the flag, the reload notice and the theme lock on the mode control.Live language sync: When a language change is emitted, the panel re-resolves its own locale so the reload notice is shown in the newly selected language.
Properties & Visual Configurations
size is one of the shared tab sizes and is forwarded to children rather than styling the host directly - a change on the parent reaches every child, but the initial value does not, so set it on the children as well.
Other behavioral props
controller switches the component from a visible on-DOM panel into a headless controller that applies and reacts to preferences without rendering UI; in this mode it drives document-level preference state without a visible panel.