feat: Add S2 LabeledValue

[yihuiliao]

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Check docs + new stories

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[yihuiliao]

When LabeledValue is placed in a horizontal row next to components like TextField, Picker, or NumberField, the value needs extra vertical spacing so it aligns with the input text of those components. Standalone, however, LabeledValue should keep tight spacing between label and value. (See the Figma design for the spec)

Right now, the way I'm ensuring that LabeledValue is aligned correctly is by setting the height via controlSize when it is inside a Form (and setting alignItems: center).

However, some other use cases to consider:

1. A user places Picker + LabeledValue side-by-side without a <Form> wrapper → wants alignment, but formContext is null.
2. LabeledValue sits in a single vertical column inside a <Form> → doesn't want the extra spacing, but formContext is set.

Should we expect users to wrap LabeledValue inside <Form> if they want alignment? Do we care if there's extra vertical spacing if it sits in a single vertical column?

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:LabeledValue

+LabeledValue <T extends LabeledValueTypes> {
+  LabeledValue: LabeledValueProps
+}

/@react-spectrum/s2:LabeledValueContext

+LabeledValueContext {
+  UNTYPED
+}

/@react-spectrum/s2:LabeledValueProps

+LabeledValueProps {
+  L: undefined
+}

---

[devongovett]

nit: split this into multiple lines