fix(fieldlabel): prevent required icon from appearing on its own line (#3652)

Author: cdransf

.changeset/honest-animals-stop.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/fieldlabel": patch
+---
+
+#### Fix fieldlabel required icon wrapping
+
+Addresses case where fieldlabel required icon could appear on its own line when wrapping by applying text-wrap: pretty; to the parent label class and adding a non-breaking space character between the label content and required marker.

components/fieldlabel/index.css

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -85,6 +85,7 @@
 
 .spectrum-FieldLabel {
 	display: block;
+	text-wrap: pretty;
 	box-sizing: border-box;
 	min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
 

components/fieldlabel/stories/fieldlabel.stories.js

@@ -104,6 +104,8 @@ RightAligned.storyName = "Right-aligned";
  * Field labels for required inputs can be marked with an asterisk at the end of the label. Optional inputs would then be understood to not have the asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup. Extra space should not be added in addition to the inline margin.
  *
  * The field label for a required field can display either the text “(required)”, or an asterisk.
+ *
+ * When marking a field as required, a word-joiner character (e.g. `U+2060` or `&#8288;`) should be placed between the label text and the required marker to prevent the marker from appearing on its own line.
  */
 export const Required = Template.bind({});
 Required.args = {

components/fieldlabel/stories/template.js

@@ -60,8 +60,7 @@ export const Template = ({
 			data-testid=${ifDefined(testId)}
 			for=${ifDefined(forInput)}
 		>
-			${label}
-			${when(isRequired, () => icon)}
+			${label?.trim()}${when(isRequired, () => html`⁠${icon}`)}
 		</label>
 	`;
 };