spectrum-web-components feat: style field label mixin for textfield, textarea

Description

This PR updates the new FieldLabelMixin to use new styles.

The CSS styling for the slotted label in the shadow DOM now matches the appearance of the standalone <sp-field-label> component for textfield and textarea components.

All textfield and textarea VRTs are now passing, confirming visual parity between slotted labels and standalone field label components.

Motivation and context

Styles the form field mixin to look like sp-field-label. Previously, the FormFieldMixin component was created to standardize form field behavior across Spectrum Web Components.

Issue 1: Field label wrapping

This does change the behavior of the field label. Before, sp-field-label was independent and its width was bound to the width of its container, so it could extend beyond the width of the textfield input. You can see this behavior in the Textfield Grows Only story:

Now, the label's container is sp-textfield and therefore its width is restricted to the width of the textfield by default, forcing a longer label to wrap:

This is probably the ideal behavior because it's seen in CSS, React, Figma, and the design guidelines.

It might also be worth noting that help text also behaves this way, where its width is restricted to the width of the input.

If we're worried about how restricting field label's width affects consumers, there are a few possible options that I see to get around this behavior:

(This one has been implemented for now:) Offer --mod-field-label-width to allow a way to modify the default width. (Is this a great time to introduce another mod though?) This is what the Textfield Grows Only story is doing by setting the field label width to 400px so it won't wrap in VRTs, but I'm not sure there's a way to scope the width to be 100% of textfield's container. Also worth noting that some of the large VRTs aren't passing because of the same wrapping issue.
We could provide a --mod to adjust the textfield input instead. A user could adjust the width of sp-textfield with the existing --mod-textfield-width. As an example, let's say they want it to be 400px. This expands the width of the field label, input, and help text to 400px. If a user wanted the input to be smaller, we could add a mod that only affects the input, like --mod-textfield-input-width, but the help text would be longer than the input, so we'd want a mod for the help text width as well. This feels a bit messy.
We could absolutely position the label and adjust textfield styling around it, but that feels precarious to me and seems like it could potentially create many bugs. I'm happy to look into it if we decide this is a good direction though!

Issue 2: Side label styling

We're not currently using the mixin with any textfield variants that use the side label, but these would break. The spectrum-css styles for textfield are designed to work with a textfield that includes field label and help text, so bringing some of those in seems like the best approach. No blockers here currently, but noting that this variant won't work in this branch as it is right now.

Changes

Architectural CSS changes:

Created new field-label-mixin.css file that adapts field label styles for use in other components' shadow DOM
Custom property definitions remain on :host (referencing the host component's size, disabled, etc. attributes)
Style applications target the label selector instead of :host, allowing the mixin to style <label> elements within other components
This contrasts with spectrum-field-label.css which applies styles to :host for the standalone <sp-field-label> component
Both files share the same custom property tokens, ensuring visual parity

Related issue(s)

fixes SWC-1316

Screenshots (if appropriate)

Author's checklist

[ ] I have read the CONTRIBUTING and PULL_REQUESTS documents.
[ ] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
[ ] I have added automated tests to cover my changes.
[ ] I have included a well-written changeset if my change needs to be published.
[ ] I have included updated documentation if my change required it.

Reviewer's checklist

[ ] Includes a Github Issue with appropriate flag or Jira ticket number without a link
[ ] Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
[ ] Automated tests cover all use cases and follow best practices for writing
[ ] Validated on all supported browsers
[ ] All VRTs are approved before the author can update Golden Hash

Manual review test cases

[ ] Descriptive Test Statement
1. Go here
2. Do this action
3. Expect this result
[ ] Descriptive Test Statement
1. Go here
2. Do this action
3. Expect this result

Device review

[ ] Did it pass in Desktop?
[ ] Did it pass in (emulated) Mobile?
[ ] Did it pass in (emulated) iPad?

Nov 18 '25 21:11 rise-erpelding

⚠️ No Changeset found

Latest commit: dfa846e9ca9357d044cbbaadceb8427cd76eea14

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Nov 18 '25 21:11 changeset-bot[bot]

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5898

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file. If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Nov 18 '25 21:11 github-actions[bot]