Radio Group - add vertical stacking, fix margin and separate css

[thrbnhrtmnn]

Description / User Story

The following differences were found when comparing the RadioGroup in Storybook with the RadioGroup in Design:

• Behaviour:
  • In code in the initial state no radio is checked, in design there is a checked radio in the disabled and in the readonly state; in the readonly state this leads in the code to a colored control, when focusing the component
  • In readonly state, the checked radio can be changed by focussing another radio (with arrow keys)
• Layout:
  • Top Padding of FormCaptionGroup is only 8px in code but 16px spacing in design
  • Legend has a 8px top padding in code but no top padding in design
  • Legend has a 8px bottom padding in code but 16px spacing in design
  • Wrapper Element that includes all the radios has no top padding in code but 16px spacing in design
  • Vertical Stacking Variant is missing
  • In error state the margin to the caption is displayed, even if no caption is defined
• Legend:
  • Legend color is not aligned in default and readonly state (hsl220 vs hsl216)
  • Legend color is black in disabled state in code but grey in design
  • It is not defined in design how the Legend needs to look in dark mode, but if it should be the same as the Radio labels, it is also wrong in the disabled state

---

Requirements

• RadioGroup - use slots to have Radios in RadioGroup & add API to change/reset checked values of radios #507

---

Acceptance Criteria

• In disabled state, the legend should consume "Forms.Legend.Disabled"
• In readOnly state, the legend should consume "Forms.Legend.ReadOnly"
• Check whats going on with vertical stacking, this layout variant is not available in SB (already implemented appropriate gap tokens)
• In error state, the whole component does not have a margin to the caption if no caption is defined
• Separate radio group css and move them to their component folders
• In case props were changed: Props Excel has been updated / comments have been resolved and props changed from red to black font color > @thrbnhrtmnn or @angelicahoyss can support here

---

Background information

• The issue with the margin to caption in error state also appears in other input components, these will be fixed within the following issues:
  • Select - fix size of select #602
  • Checkbox - fix size issues #754
  • Input Field Text, Input Field Number, Select & Text Area - remove margin in error state if no caption is defined #945