Pref language item<mds-pref-language-item>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
selectedselectedbooleanSpecifies if the element is selected
codestringSpecifies the language code based on HTML lang attribute
Overview
The <mds-pref-language-item> web component represents a single selectable language option inside the language-preference picker <mds-pref-language>. It renders one row of the parent’s dropdown and reports the user’s choice up to the parent rather than changing the page language itself.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-pref-language>; it is not used standalone or mixed with other child types.Code validation: code must match an entry in the bundled language dictionary; an unknown code throws Language code not found: <code>. When code is empty the item renders an error-toned fallback button instead of a language label.Label is derived, not authored: The visible language name is looked up from code (e.g. it to Italiano), so consumers supply only the code, not the display text.Selection is parent-driven: The selected prop is owned and toggled by <mds-pref-language>, which clears every sibling and sets only the active item.Click emits, does not commit: Clicking the item emits the bubbling mdsPrefLanguageItemSelect event carrying { language: code }. The parent updates selection state, persists the preference, applies the document language, and emits its own mdsPrefLanguageChange - this child performs none of that.
Properties & Visual Configurations
The only meaningful prop is code: the BCP 47 / RFC 5646 language tag (such as it, en, es) that both keys the label lookup and is the payload emitted on selection. The accepted codes are the keys of the bundled language dictionary: the two-letter ISO 639-1 codes (it, en, fr, de, zh, …) plus ceb, haw and hmn, which the parent cannot apply (its set accepts only xx / xx-XX codes).selected is a state flag managed by the parent rather than a configuration choice. Sizing and styling are fixed by the parent’s layout, so this item exposes no variant / tone of its own; the shared ladders in agents/variants.md are applied internally and are not configurable from the host.