This example is rendered from the same package consumed by UJ applications.
Settings
Appearance
Design
Contract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
usage
Use one settings control per public header
Pass the server-normalized initialDesignPreference to avoid a first-render mismatch
Offer only UJ Standard, Editorial, Contemporary and Compact
Keep appearance and design as independent preferences
Keep content, meaning, semantics, brand identity and accessibility unchanged across presets
Pass only locale routes authorized by the owning published projection
Keep routing, translation lookup and content fallback outside @uj/design
Do not add application-specific skins or ungoverned preset names
states
closed
open
system appearance
light appearance
dark appearance
UJ Standard design
Editorial design
Contemporary design
Compact design
current locale
available translation
unavailable translation
keyboard focus
narrow viewport
forced colours
print hidden
purpose
Keep language, appearance and curated UJ design-preset preferences in one compact, accessible site-settings menu.
responsive
Single 40px header control
Viewport-bounded and vertically scrollable menu
Logical end alignment
320px
200% text resize
accessibility
Settings icon has a complete accessible name
Native details disclosure
Appearance choices use a labelled radio group
Design choices use a separate labelled radio group
The selected appearance and design are included in the settings label
Locale choices remain ordinary language links
Unavailable translations are not links
Visible keyboard focus
WCAG 2.2 AA
runtime Boundary
The component writes only the governed appearance and design preference cookies; it performs no fetching, routing, translation lookup or content fallback.
source Authority
Corporate Identity presentation contract, governed appearance and design preference cookies, and owning CMS publication projections
