From 12f2fc94c979de21d0bfbbe1ec1de384ed3e7a7a Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Wed, 24 Sep 2025 15:35:24 -0400
Subject: [PATCH 01/39] feat(label): init field label mixin

feat(label): init field label mixin
---
 packages/field-label/src/FieldLabelMixin.ts | 75 +++++++++++++++++++++
 packages/textfield/package.json             |  1 +
 packages/textfield/src/Textfield.ts         | 25 ++++---
 yarn.lock                                   |  1 +
 4 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 packages/field-label/src/FieldLabelMixin.ts

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
new file mode 100644
index 00000000000..0377beead17
--- /dev/null
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -0,0 +1,75 @@
+/**
+ * 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
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+    CSSResultArray,
+    html,
+    nothing,
+    SpectrumElement,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
+
+import styles from './field-label.css.js';
+import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Constructor<T> = new (...args: any[]) => T;
+
+export declare class FieldLabelMixinInterface {
+    disabled: boolean;
+    required: boolean;
+    sideAligned: 'start' | 'end';
+    protected renderFieldLabel(fieldId: string): TemplateResult;
+}
+
+/**
+ * @mixin FieldLabelMixin
+ *
+ * @slot field-label - Text content of the label.
+ */
+export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
+    superClass: T
+) => {
+    class FieldLabelMixinClass extends superClass {
+        static styles(): CSSResultArray {
+            return [styles, asteriskIconStyles];
+        }
+
+        @property({ type: Boolean, reflect: true })
+        public disabled = false;
+
+        @property({ type: Boolean, reflect: true })
+        public required = false;
+
+        @property({ type: String, reflect: true, attribute: 'side-aligned' })
+        public sideAligned?: 'start' | 'end';
+
+        protected renderFieldLabel(fieldId: string = ''): TemplateResult {
+            return html`
+                <label for="${fieldId}">
+                    <slot name="field-label"></slot>
+                    ${this.required
+                        ? html`
+                              <sp-icon-asterisk100
+                                  class="required-icon spectrum-UIIcon-Asterisk100"
+                              ></sp-icon-asterisk100>
+                          `
+                        : nothing}
+                </label>
+            `;
+        }
+    }
+    return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> &
+        T;
+};
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
index 42fd8eaebf8..970a42805ff 100644
--- a/packages/textfield/package.json
+++ b/packages/textfield/package.json
@@ -65,6 +65,7 @@
     ],
     "dependencies": {
         "@spectrum-web-components/base": "1.8.0",
+        "@spectrum-web-components/field-label": "1.8.0",
         "@spectrum-web-components/help-text": "1.8.0",
         "@spectrum-web-components/icon": "1.8.0",
         "@spectrum-web-components/icons-ui": "1.8.0",
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index 7983c9b1b6a..e668d8d39b5 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -29,6 +29,7 @@ import {
 } from '@spectrum-web-components/base/src/decorators.js';
 
 import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
+import { FieldLabelMixin } from '@spectrum-web-components/field-label/src/FieldLabelMixin.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
@@ -43,13 +44,20 @@ export type TextfieldType = (typeof textfieldTypes)[number];
  * @fires input - The value of the element has changed.
  * @fires change - An alteration to the value of the element has been committed by the user.
  */
-export class TextfieldBase extends ManageHelpText(
-    SizedMixin(Focusable, {
-        noDefaultSize: true,
-    })
+export class TextfieldBase extends FieldLabelMixin(
+    ManageHelpText(
+        SizedMixin(Focusable, {
+            noDefaultSize: true,
+        })
+    )
 ) {
     public static override get styles(): CSSResultArray {
-        return [textfieldStyles, checkmarkStyles];
+        const superStyles = Array.isArray(super.styles)
+            ? super.styles
+            : super.styles
+              ? [super.styles]
+              : [];
+        return [...superStyles, textfieldStyles, checkmarkStyles];
     }
 
     @state()
@@ -186,12 +194,6 @@ export class TextfieldBase extends ManageHelpText(
     @property({ type: Boolean, reflect: true })
     public quiet = false;
 
-    /**
-     * Whether the form control will be found to be invalid when it holds no `value`
-     */
-    @property({ type: Boolean, reflect: true })
-    public required = false;
-
     /**
      * What form of assistance should be provided when attempting to supply a value to the form control
      */
@@ -377,6 +379,7 @@ export class TextfieldBase extends ManageHelpText(
 
     protected override render(): TemplateResult {
         return html`
+            ${this.renderFieldLabel('textfield')}
             <div id="textfield">${this.renderField()}</div>
             ${this.renderHelpText(this.invalid)}
         `;
diff --git a/yarn.lock b/yarn.lock
index 1f17ecf1cad..9ab29d8fb50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4871,6 +4871,7 @@ __metadata:
   resolution: "@spectrum-web-components/textfield@workspace:packages/textfield"
   dependencies:
     "@spectrum-web-components/base": "npm:1.8.0"
+    "@spectrum-web-components/field-label": "npm:1.8.0"
     "@spectrum-web-components/help-text": "npm:1.8.0"
     "@spectrum-web-components/icon": "npm:1.8.0"
     "@spectrum-web-components/icons-ui": "npm:1.8.0"

From b6ea53b56855d3388c83c9b0d6711a8ad66bc8b7 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Wed, 24 Sep 2025 16:46:04 -0400
Subject: [PATCH 02/39] feat(textfield): updated textfiled docs to use label
 mixin

---
 packages/textfield/README.md | 70 +++++++++++-------------------------
 1 file changed, 21 insertions(+), 49 deletions(-)

diff --git a/packages/textfield/README.md b/packages/textfield/README.md
index 1a9ea8ebf7a..c788c08a571 100644
--- a/packages/textfield/README.md
+++ b/packages/textfield/README.md
@@ -27,16 +27,16 @@ import { Textfield } from '@spectrum-web-components/textfield';
 ### Anatomy
 
 ```html
-<sp-textfield id="basic" label="Name"></sp-textfield>
+<sp-textfield label="Name"></sp-textfield>
 ```
 
 #### Label
 
-A text field must have a label in order to be accessible. A label can be provided either via the `label` attribute, like the previous example or with an `<sp-field-label>` element.
+A text field must have a label in order to be accessible. A label can be provided either via the default slot, or via the `label` attribute, for a hidden label that can be read by assistive technology.
 
 ```html
-<sp-field-label for="with-field-label">Name</sp-field-label>
-<sp-textfield id="with-field-label"></sp-textfield>
+<sp-textfield>Name</sp-textfield>
+<sp-textfield label="Name"></sp-textfield>
 ```
 
 #### Placeholder
@@ -44,8 +44,7 @@ A text field must have a label in order to be accessible. A label can be provide
 Use the `placeholder` attribute to include placeholder text. **Note**: Placeholder text should not be used as a replacement for a label or help help text.
 
 ```html
-<sp-field-label for="has-placeholder">Name</sp-field-label>
-<sp-textfield id="has-placeholder" placeholder="ex., John Doe"></sp-textfield>
+<sp-textfield placeholder="ex., John Doe">Name</sp-textfield>
 ```
 
 #### Help text
@@ -59,8 +58,8 @@ See [help text](../help-text) for more information.
 <sp-tab-panel value="self">
 
 ```html
-<sp-field-label for="self">Stay "Positive"</sp-field-label>
-<sp-textfield id="self" pattern="[P][o][s][i][t][i][v][e]" value="Positive">
+<sp-textfield pattern="[P][o][s][i][t][i][v][e]" value="Positive">
+    Stay "Positive"
     <sp-help-text slot="help-text">
         Tell us how you are feeling today.
     </sp-help-text>
@@ -73,9 +72,7 @@ See [help text](../help-text) for more information.
 <sp-tab-panel value="above">
 
 ```html
-<sp-field-label for="managed">Stay "Positive"</sp-field-label>
 <sp-textfield
-    id="managed"
     pattern="[P][o][s][i][t][i][v][e]"
     value="Positive"
     oninput='
@@ -84,6 +81,7 @@ See [help text](../help-text) for more information.
         helpText.variant = this.invalid ? `negative` : `neutral`;
     '
 >
+    Stay "Positive"
     <sp-help-text slot="neutral-text">
         Tell us how you're feeling today.
     </sp-help-text>
@@ -103,12 +101,7 @@ See [help text](../help-text) for more information.
 <sp-tab-panel value="s">
 
 ```html
-<sp-field-label size="s" for="name-0-s">Name</sp-field-label>
-<sp-textfield
-    size="s"
-    id="name-0-s"
-    placeholder="Enter your name"
-></sp-textfield>
+<sp-textfield size="s" placeholder="Enter your name">Name</sp-textfield>
 ```
 
 </sp-tab-panel>
@@ -116,8 +109,7 @@ See [help text](../help-text) for more information.
 <sp-tab-panel value="m">
 
 ```html
-<sp-field-label for="name-0-m">Name</sp-field-label>
-<sp-textfield id="name-0-m" placeholder="Enter your name"></sp-textfield>
+<sp-textfield placeholder="Enter your name">Name</sp-textfield>
 ```
 
 </sp-tab-panel>
@@ -125,12 +117,7 @@ See [help text](../help-text) for more information.
 <sp-tab-panel value="l">
 
 ```html
-<sp-field-label size="l" for="name-0-l">Name</sp-field-label>
-<sp-textfield
-    size="l"
-    id="name-0-l"
-    placeholder="Enter your name"
-></sp-textfield>
+<sp-textfield size="l" placeholder="Enter your name">Name</sp-textfield>
 ```
 
 </sp-tab-panel>
@@ -138,12 +125,7 @@ See [help text](../help-text) for more information.
 <sp-tab-panel value="xl">
 
 ```html
-<sp-field-label size="xl" for="name-0-xl">Name</sp-field-label>
-<sp-textfield
-    size="xl"
-    id="name-0-xl"
-    placeholder="Enter your name"
-></sp-textfield>
+<sp-textfield size="xl" placeholder="Enter your name">Name</sp-textfield>
 ```
 
 </sp-tab-panel>
@@ -161,14 +143,10 @@ user affordances like mobile keyboards and obscured characters:
 - `text` (default)
 
 ```html
-<sp-field-label for="tel-1">Telephone</sp-field-label>
-<sp-textfield
-    id="tel-1"
-    type="tel"
-    placeholder="Enter your phone number"
-></sp-textfield>
-<sp-field-label for="password-1">Password</sp-field-label>
-<sp-textfield id="password-1" type="password"></sp-textfield>
+<sp-textfield type="tel" placeholder="Enter your phone number">
+    Telephone
+</sp-textfield>
+<sp-textfield type="password">Password</sp-textfield>
 ```
 
 If the `type` attribute is not specified, or if it does not match any of these values, the default type adopted is "text."
@@ -178,8 +156,7 @@ If the `type` attribute is not specified, or if it does not match any of these v
 The quiet style works best when a clear layout (vertical stack, table, grid) assists in a user's ability to parse the element. Too many quiet components in a small space can be hard to read.
 
 ```html
-<sp-field-label for="name-3">Name (quietly)</sp-field-label>
-<sp-textfield id="name-3" placeholder="Enter your name" quiet></sp-textfield>
+<sp-textfield placeholder="Enter your name" quiet>Name (quietly)</sp-textfield>
 ```
 
 ### States
@@ -187,16 +164,11 @@ The quiet style works best when a clear layout (vertical stack, table, grid) ass
 Use the `required` attribute to indicate a textfield value is required. Dictate the validity or invalidity state of the text entry with the `valid` or `invalid` attributes.
 
 ```html
-<sp-field-label for="name-1" required>Name</sp-field-label>
-<sp-textfield
-    id="name-1"
-    placeholder="Enter your name"
-    valid
-    value="My Name"
-></sp-textfield>
+<sp-textfield placeholder="Enter your name" valid value="My Name">
+    Name
+</sp-textfield>
 <br />
-<sp-field-label for="name-2" required>Name</sp-field-label>
-<sp-textfield id="name-2" invalid placeholder="Enter your name"></sp-textfield>
+<sp-textfield invalid placeholder="Enter your name">Name</sp-textfield>
 ```
 
 ### Accessibility

From 6117e6bacb6846eb0518938e1ab043915f4a15eb Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 25 Sep 2025 15:43:42 -0400
Subject: [PATCH 03/39] feat(field-label): added mixin to package exports

---
 packages/field-label/package.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/field-label/package.json b/packages/field-label/package.json
index d96616551b7..481e9bb4e0f 100644
--- a/packages/field-label/package.json
+++ b/packages/field-label/package.json
@@ -29,6 +29,10 @@
             "development": "./src/FieldLabel.dev.js",
             "default": "./src/FieldLabel.js"
         },
+        "./src/FieldLabelMixin.js": {
+            "development": "./src/FieldLabelMixin.dev.js",
+            "default": "./src/FieldLabelMixin.js"
+        },
         "./src/field-label-overrides.css.js": "./src/field-label-overrides.css.js",
         "./src/field-label.css.js": "./src/field-label.css.js",
         "./src/index.js": {
@@ -38,6 +42,10 @@
         "./sp-field-label.js": {
             "development": "./sp-field-label.dev.js",
             "default": "./sp-field-label.js"
+        },
+        "./sp-field-label-mixin.js": {
+            "development": "./sp-field-label-mixin.dev.js",
+            "default": "./sp-field-label-mixin.js"
         }
     },
     "scripts": {

From d5448f1df630a8f40e5ce1df87f10cb85b37a34e Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 25 Sep 2025 15:45:19 -0400
Subject: [PATCH 04/39] feat(field-label): added optional slot name for
 rendering label slot

---
 packages/field-label/src/FieldLabelMixin.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 0377beead17..8482115bfbd 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -22,6 +22,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 
 import styles from './field-label.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = new (...args: any[]) => T;
@@ -42,7 +43,7 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
     superClass: T
 ) => {
     class FieldLabelMixinClass extends superClass {
-        static styles(): CSSResultArray {
+        public static get styles(): CSSResultArray {
             return [styles, asteriskIconStyles];
         }
 
@@ -55,10 +56,13 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         @property({ type: String, reflect: true, attribute: 'side-aligned' })
         public sideAligned?: 'start' | 'end';
 
-        protected renderFieldLabel(fieldId: string = ''): TemplateResult {
+        protected renderFieldLabel(
+            fieldId: string = '',
+            slotName?: string
+        ): TemplateResult {
             return html`
                 <label for="${fieldId}">
-                    <slot name="field-label"></slot>
+                    <slot name="${ifDefined(slotName)}"></slot>
                     ${this.required
                         ? html`
                               <sp-icon-asterisk100

From cf1c9d7fed015afb727693ed7a31563aab8c246c Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 25 Sep 2025 15:57:49 -0400
Subject: [PATCH 05/39] docs(textfield): implemented label mixin in stories

---
 .../stories/textarea-sizes.stories.ts         |  4 +-
 .../textfield/stories/textarea.stories.ts     | 61 +++++++++----------
 .../stories/textfield-sizes.stories.ts        |  4 +-
 .../textfield/stories/textfield.stories.ts    | 46 ++++++++------
 4 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/packages/textfield/stories/textarea-sizes.stories.ts b/packages/textfield/stories/textarea-sizes.stories.ts
index e2a5ae0e120..f082a2f64ed 100644
--- a/packages/textfield/stories/textarea-sizes.stories.ts
+++ b/packages/textfield/stories/textarea-sizes.stories.ts
@@ -27,15 +27,13 @@ const template = ({
     size?: 's' | 'm' | 'l' | 'xl';
 } = {}): TemplateResult => {
     return html`
-        <sp-field-label for="name" size=${ifDefined(size)}>
-            Enter your life story
-        </sp-field-label>
         <sp-textfield
             id="name"
             multiline
             size=${ifDefined(size)}
             value="Sized Textarea"
         >
+            Enter your life story
             <sp-help-text size=${ifDefined(size)} slot="help-text">
                 Spare no expense.
             </sp-help-text>
diff --git a/packages/textfield/stories/textarea.stories.ts b/packages/textfield/stories/textarea.stories.ts
index 74ee199151f..c1fd40cc573 100644
--- a/packages/textfield/stories/textarea.stories.ts
+++ b/packages/textfield/stories/textarea.stories.ts
@@ -73,49 +73,52 @@ export const Default = (): TemplateResult => {
 };
 
 export const quiet = (): TemplateResult => html`
-    <sp-field-label for="story">Enter your life story...</sp-field-label>
     <sp-textfield
         multiline
         id="story"
         quiet
         placeholder="Enter your life story"
-    ></sp-textfield>
+    >
+        Enter your life story...
+    </sp-textfield>
 `;
 
 export const defaultAutofocus = (): TemplateResult => html`
-    <sp-field-label for="story">Enter your life story...</sp-field-label>
     <sp-textfield
         multiline
         id="story"
         autofocus
         placeholder="Enter your life story"
-    ></sp-textfield>
+    >
+        Enter your life story...
+    </sp-textfield>
 `;
 
 export const quietAutofocus = (): TemplateResult => html`
-    <sp-field-label for="story">Enter your life story...</sp-field-label>
     <sp-textfield
         multiline
         id="story"
         autofocus
         quiet
         placeholder="Enter your life story"
-    ></sp-textfield>
+    >
+        Enter your life story...
+    </sp-textfield>
 `;
 
 export const grows = (): TemplateResult => html`
-    <sp-field-label for="story">Enter your life story...</sp-field-label>
     <sp-textfield
         multiline
         id="story"
         value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
         grows
         placeholder="Enter your life story"
-    ></sp-textfield>
+    >
+        Enter your life story...
+    </sp-textfield>
 `;
 
 export const growsQuiet = (): TemplateResult => html`
-    <sp-field-label for="story">Enter your life story...</sp-field-label>
     <sp-textfield
         multiline
         id="story"
@@ -123,14 +126,14 @@ export const growsQuiet = (): TemplateResult => html`
         grows
         quiet
         placeholder="Enter your life story"
-    ></sp-textfield>
+    >
+        Enter your life story...
+    </sp-textfield>
 `;
 
 export const growsEmpty = (): TemplateResult => html`
-    <sp-field-label for="empty">
-        This textfield hasn't been used yet
-    </sp-field-label>
     <sp-textfield multiline id="empty" grows placeholder="You can type here">
+        This textfield hasn't been used yet
         <sp-help-text slot="help-text">
             Even empty Textfield display correctly while waiting for content.
         </sp-help-text>
@@ -138,16 +141,15 @@ export const growsEmpty = (): TemplateResult => html`
 `;
 
 export const growsWithLargeWords = (): TemplateResult => html`
-    <sp-field-label for="story">
-        Enter your life story with very long words...
-    </sp-field-label>
     <sp-textfield
         multiline
         id="story"
         value="Sed utperspiciatisundeomnisistenatuserrorsitvoluptatemaccusantiumdoloremquelaudantium,totamemaperiam, eaque ipsa quae ab illo inventore veritatis etquasiarchitectobeataevitaedictasuntexplicabo. Nemo enimipsamvoluptatemquiavoluptassitaspernaturautoditautfugitsedquiaconsequunturmagnidoloreseosquirationevoluptatemsequinesciunt."
         grows
         placeholder="Enter your life story"
-    ></sp-textfield>
+    >
+        Enter your life story with very long words...
+    </sp-textfield>
 `;
 
 export const readonly = (): TemplateResult => html`
@@ -184,15 +186,13 @@ export const resizeControls = (): TemplateResult => html`
 `;
 
 export const sized = (): TemplateResult => html`
-    <sp-field-label for="sized">
-        This textfield hasn't been used yet
-    </sp-field-label>
     <sp-textfield
         multiline
         id="sized"
         placeholder="You can type here"
         style="width: 400px"
     >
+        This textfield hasn't been used yet
         <sp-help-text slot="help-text">
             Even empty Textfield display correctly while waiting for content.
         </sp-help-text>
@@ -200,9 +200,6 @@ export const sized = (): TemplateResult => html`
 `;
 
 export const with5Rows = (): TemplateResult => html`
-    <sp-field-label for="predefinedRows">
-        Enter your life story with very long words...
-    </sp-field-label>
     <sp-textfield
         multiline
         id="predefinedRows"
@@ -213,13 +210,12 @@ Line 4
 Line 5"
         placeholder="Enter your life story"
         rows="5"
-    ></sp-textfield>
+    >
+        Enter your life story with very long words...
+    </sp-textfield>
 `;
 
 export const rowsDefeatsGrows = (): TemplateResult => html`
-    <sp-field-label for="predefinedRows">
-        Enter your life story with very long words...
-    </sp-field-label>
     <sp-textfield
         multiline
         grows
@@ -231,18 +227,19 @@ Line 4
 Line 5"
         placeholder="Enter your life story"
         rows="3"
-    ></sp-textfield>
+    >
+        Enter your life story...
+    </sp-textfield>
 `;
 
 export const with1Row = (): TemplateResult => html`
-    <sp-field-label for="predefinedRows">
-        Enter your life story with very long words...
-    </sp-field-label>
     <sp-textfield
         multiline
         id="predefinedRows"
         value="Line 1"
         placeholder="Enter your life story"
         rows="1"
-    ></sp-textfield>
+    >
+        Enter your life story... Enter your life story with very long words...
+    </sp-textfield>
 `;
diff --git a/packages/textfield/stories/textfield-sizes.stories.ts b/packages/textfield/stories/textfield-sizes.stories.ts
index 0180013de5e..9eaa998c753 100644
--- a/packages/textfield/stories/textfield-sizes.stories.ts
+++ b/packages/textfield/stories/textfield-sizes.stories.ts
@@ -27,10 +27,8 @@ const template = ({
     size?: 's' | 'm' | 'l' | 'xl';
 } = {}): TemplateResult => {
     return html`
-        <sp-field-label for="name" size=${ifDefined(size)}>
-            Enter your name
-        </sp-field-label>
         <sp-textfield id="name" size=${ifDefined(size)} value="Sized Textfield">
+            Enter your name
             <sp-help-text size=${ifDefined(size)} slot="help-text">
                 This is for the whole enchilada.
             </sp-help-text>
diff --git a/packages/textfield/stories/textfield.stories.ts b/packages/textfield/stories/textfield.stories.ts
index 8a8c525e917..c3ff59e0388 100644
--- a/packages/textfield/stories/textfield.stories.ts
+++ b/packages/textfield/stories/textfield.stories.ts
@@ -22,15 +22,21 @@ export default {
 
 export const Default = (): TemplateResult => {
     return html`
-        <sp-textfield placeholder="Enter your name"></sp-textfield>
-        <sp-textfield placeholder="Enter your name" disabled></sp-textfield>
+        <sp-textfield label="Name" placeholder="Enter your name"></sp-textfield>
         <sp-textfield
+            label="Name"
+            placeholder="Enter your name"
+            disabled
+        ></sp-textfield>
+        <sp-textfield
+            label="Name"
             placeholder="Enter your name"
             pattern="[\\w\\s]*"
             required
             value="A valid input"
         ></sp-textfield>
         <sp-textfield
+            label="Name"
             placeholder="Enter your name"
             pattern="[\\w\\s]*"
             required
@@ -38,11 +44,13 @@ export const Default = (): TemplateResult => {
             disabled
         ></sp-textfield>
         <sp-textfield
+            label="Name"
             placeholder="Enter your name"
             pattern="[\\d]*"
             value="Not a valid input"
         ></sp-textfield>
         <sp-textfield
+            label="Name"
             placeholder="Enter your name"
             pattern="^[\\d]$"
             required
@@ -54,55 +62,58 @@ export const Default = (): TemplateResult => {
 
 export const growsOnly = (): TemplateResult => {
     return html`
-        <sp-field-label for="grows-only">
-            This Textfield has the "grows" attribute without the "multiline"
-            attribute
-        </sp-field-label>
         <sp-textfield
             grows
             id="grows-only"
             placeholder="Does not grow or display incorrectly"
-        ></sp-textfield>
+        >
+            This Textfield has the "grows" attribute without the "multiline"
+            attribute
+        </sp-textfield>
     `;
 };
 
 export const quiet = (): TemplateResult => {
     return html`
-        <sp-field-label for="name">Enter your name</sp-field-label>
         <sp-textfield
             id="name"
             placeholder="This Text Field doesn't make much noise"
             quiet
-        ></sp-textfield>
+        >
+            Enter your name
+        </sp-textfield>
     `;
 };
 
 export const defaultAutofocus = (): TemplateResult => {
     return html`
-        <sp-field-label for="name">Enter your name</sp-field-label>
         <sp-textfield
             id="name"
             placeholder="Include your first and last name"
             autofocus
-        ></sp-textfield>
+        >
+            Enter your name
+        </sp-textfield>
     `;
 };
 
 export const quietAutofocus = (): TemplateResult => {
     return html`
-        <sp-field-label for="name">Enter your name</sp-field-label>
         <sp-textfield
             id="name"
             placeholder="Include your first and last name"
             autofocus
             quiet
-        ></sp-textfield>
+        >
+            Enter your name
+        </sp-textfield>
     `;
 };
 
 export const notRequiredWithPattern = (): TemplateResult => {
     return html`
         <sp-textfield
+            label="Letter z, x, c, or v"
             placeholder="Enter z, x, c, or v"
             pattern="[zxcv]+"
         ></sp-textfield>
@@ -112,6 +123,7 @@ export const notRequiredWithPattern = (): TemplateResult => {
 export const allowedKeys = (): TemplateResult => {
     return html`
         <sp-textfield
+            label="Name"
             placeholder="Enter your name"
             allowed-keys="a-z"
         ></sp-textfield>
@@ -155,10 +167,8 @@ export const types = (): TemplateResult => html`
 `;
 
 export const empty = (): TemplateResult => html`
-    <sp-field-label for="empty">
-        This textfield hasn't been used yet
-    </sp-field-label>
     <sp-textfield id="empty" placeholder="You can type here">
+        This textfield hasn't been used yet
         <sp-help-text slot="help-text">
             Even empty Textfield display correctly while waiting for content.
         </sp-help-text>
@@ -166,14 +176,12 @@ export const empty = (): TemplateResult => html`
 `;
 
 export const sized = (): TemplateResult => html`
-    <sp-field-label for="sized">
-        This textfield hasn't been used yet
-    </sp-field-label>
     <sp-textfield
         id="sized"
         placeholder="You can type here"
         style="width: 400px"
     >
+        This textfield hasn't been used yet
         <sp-help-text slot="help-text">
             Even empty Textfield display correctly while waiting for content.
         </sp-help-text>

From 743d553853417ab1f249b12e5616f8417e3b632f Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 25 Sep 2025 16:51:36 -0400
Subject: [PATCH 06/39] test(textfield): added test for slotted label

---
 packages/textfield/test/textfield.test.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
index 324ea1ea6d5..3ec9d8d329d 100644
--- a/packages/textfield/test/textfield.test.ts
+++ b/packages/textfield/test/textfield.test.ts
@@ -51,6 +51,21 @@ describe('Textfield', () => {
 
         await expect(el).to.be.accessible();
     });
+    testForLitDevWarnings(
+        async () =>
+            await litFixture<Textfield>(html`
+                <sp-textfield label="Enter Your Name"></sp-textfield>
+            `)
+    );
+    it('loads textfield with slotted label accessibly', async () => {
+        const el = await litFixture<Textfield>(html`
+            <sp-textfield>Enter Your Name</sp-textfield>
+        `);
+
+        await elementUpdated(el);
+
+        await expect(el).to.be.accessible();
+    });
 
     it('manages tabIndex while disabled', async () => {
         const el = await litFixture<Textfield>(html`

From c386f09a55a594fde9c7728b6b716e04b7bb7785 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 13:58:15 -0400
Subject: [PATCH 07/39] feat(textfield): added default slot observer for label
 changes

---
 packages/textfield/src/Textfield.ts | 61 ++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 15 deletions(-)

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index e668d8d39b5..a6310b8d731 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -34,6 +34,8 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 
+import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+
 import textfieldStyles from './textfield.css.js';
 import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
 
@@ -44,12 +46,15 @@ export type TextfieldType = (typeof textfieldTypes)[number];
  * @fires input - The value of the element has changed.
  * @fires change - An alteration to the value of the element has been committed by the user.
  */
-export class TextfieldBase extends FieldLabelMixin(
-    ManageHelpText(
-        SizedMixin(Focusable, {
-            noDefaultSize: true,
-        })
-    )
+export class TextfieldBase extends ObserveSlotText(
+    FieldLabelMixin(
+        ManageHelpText(
+            SizedMixin(Focusable, {
+                noDefaultSize: true,
+            })
+        )
+    ),
+    ''
 ) {
     public static override get styles(): CSSResultArray {
         const superStyles = Array.isArray(super.styles)
@@ -294,6 +299,32 @@ export class TextfieldBase extends FieldLabelMixin(
         return this.value.toString();
     }
 
+    protected get _ariaLabel(): string | undefined {
+        if (this.label && this.label.length > 0) {
+            return this.label;
+        } else if (this.appliedLabel && this.appliedLabel.length > 0) {
+            return this.appliedLabel;
+        } else if (this.slotHasContent) {
+            return undefined;
+        } else if (this.placeholder && this.placeholder.length > 0) {
+            return this.placeholder;
+        } else {
+            window.__swc.warn(
+                this,
+                '<sp-textfield> elements needs a label:',
+                'https://opensource.adobe.com/spectrum-web-components/components/textfield/#accessibility',
+                {
+                    type: 'accessibility',
+                    issues: [
+                        'value supplied to the default slot, which will be displayed visually as part of the element, or',
+                        'value supplied to the "label" attribute, which will read by assistive technologies',
+                    ],
+                }
+            );
+            return undefined;
+        }
+    }
+
     // prettier-ignore
     private get renderMultiline(): TemplateResult {
         return html`
@@ -305,11 +336,10 @@ export class TextfieldBase extends FieldLabelMixin(
                 : nothing}
             <!-- @ts-ignore -->
             <textarea
+                id="field"
                 name=${ifDefined(this.name || undefined)}
                 aria-describedby=${this.helpTextId}
-                aria-label=${this.label ||
-                this.appliedLabel ||
-                this.placeholder}
+                aria-label=${ifDefined(this._ariaLabel)}
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 class="input"
                 maxlength=${ifDefined(
@@ -320,7 +350,7 @@ export class TextfieldBase extends FieldLabelMixin(
                 )}
                 title=${this.invalid ? '' : nothing}
                 pattern=${ifDefined(this.pattern)}
-                placeholder=${this.placeholder}
+                placeholder=${ifDefined(this.placeholder?.length > 0 ? this.placeholder : undefined)}
                 .value=${this.displayValue}
                 @change=${this.handleChange}
                 @input=${this.handleInput}
@@ -339,12 +369,11 @@ export class TextfieldBase extends FieldLabelMixin(
         return html`
             <!-- @ts-ignore -->
             <input
+                id="field"
                 name=${ifDefined(this.name || undefined)}
                 type=${this.type}
                 aria-describedby=${this.helpTextId}
-                aria-label=${this.label ||
-                this.appliedLabel ||
-                this.placeholder}
+                aria-label=${ifDefined(this._ariaLabel)}
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 class="input"
                 title=${this.invalid ? '' : nothing}
@@ -355,7 +384,9 @@ export class TextfieldBase extends FieldLabelMixin(
                     this.minlength > -1 ? this.minlength : undefined
                 )}
                 pattern=${ifDefined(this.pattern)}
-                placeholder=${this.placeholder}
+                placeholder=${ifDefined(
+                    this.placeholder?.length > 0 ? this.placeholder : undefined
+                )}
                 .value=${live(this.displayValue)}
                 @change=${this.handleChange}
                 @input=${this.handleInput}
@@ -379,7 +410,7 @@ export class TextfieldBase extends FieldLabelMixin(
 
     protected override render(): TemplateResult {
         return html`
-            ${this.renderFieldLabel('textfield')}
+            ${this.renderFieldLabel('field')}
             <div id="textfield">${this.renderField()}</div>
             ${this.renderHelpText(this.invalid)}
         `;

From e8127213f7c842901037d5b919064769e34651cb Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 14:05:47 -0400
Subject: [PATCH 08/39] test(textfield): added tests for slotted label

---
 packages/textfield/test/textfield.test.ts | 34 +++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
index 3ec9d8d329d..4626952dfdd 100644
--- a/packages/textfield/test/textfield.test.ts
+++ b/packages/textfield/test/textfield.test.ts
@@ -26,6 +26,8 @@ import {
     testForLitDevWarnings,
 } from '../../../test/testing-helpers.js';
 
+import { spy } from 'sinon';
+
 describe('Textfield', () => {
     testForLitDevWarnings(
         async () =>
@@ -66,6 +68,38 @@ describe('Textfield', () => {
 
         await expect(el).to.be.accessible();
     });
+    it('labels textfield with slotted label correctly', async () => {
+        const el = await litFixture<Textfield>(html`
+            <sp-textfield id="textfield" placeholder="Enter Your Name">
+                Name
+            </sp-textfield>
+        `);
+
+        await elementUpdated(el);
+        const ariaLabel = el.focusElement?.getAttribute('aria-label');
+
+        expect(ariaLabel).not.to.equal('Enter Your Name');
+    });
+
+    it('warns when no accessible label is provided', async () => {
+        const warnSpy: sinon.SinonSpy = spy();
+        window.__swc = window.__swc || { warn: () => {} };
+        const originalWarn = window.__swc.warn;
+        window.__swc.warn = warnSpy;
+
+        const el = await litFixture<Textfield>(html`
+            <sp-textfield></sp-textfield>
+        `);
+
+        await elementUpdated(el);
+
+        expect(warnSpy.called).to.be.true;
+        expect(warnSpy.firstCall.args[0]).to.equal(el);
+        expect(warnSpy.firstCall.args[1]).to.equal(
+            '<sp-textfield> elements needs a label:'
+        );
+        window.__swc.warn = originalWarn;
+    });
 
     it('manages tabIndex while disabled', async () => {
         const el = await litFixture<Textfield>(html`

From 5be17151cfa822b08e55bea0945d286e88161999 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 14:21:36 -0400
Subject: [PATCH 09/39] docs(number-field): updated number field docs based on
 text field label changes

---
 packages/number-field/README.md | 115 ++++++++++++--------------------
 1 file changed, 42 insertions(+), 73 deletions(-)

diff --git a/packages/number-field/README.md b/packages/number-field/README.md
index 87b56d1c206..84f23fa80fc 100644
--- a/packages/number-field/README.md
+++ b/packages/number-field/README.md
@@ -29,17 +29,15 @@ import { NumberField } from '@spectrum-web-components/number-field';
 A number field consists of an input field for numeric values and optional stepper buttons for incrementing and decrementing the value. The stepper UI can be hidden using the `hide-stepper` attribute.
 
 ```html
-<sp-field-label>
-    What is the air-speed velocity of an unladen swallow?
-</sp-field-label>
 <sp-number-field
-    id="anatomy"
     format-options='{
         "style": "unit",
         "unit": "MPH",
         "unitDisplay": "long"
     }'
-></sp-number-field>
+>
+    What is the air-speed velocity of an unladen swallow?
+</sp-number-field>
 ```
 
 ### Options
@@ -94,16 +92,16 @@ An `<sp-number-field>` element will process its numeric value with `new Intl.Num
 The following example uses the `signDisplay` option to include the plus sign for positive numbers, for example to display an offset from some value. In addition, it always displays a minimum of 1 digit after the decimal point, and allows up to 2 fraction digits. If the user enters more than 2 fraction digits, the result will be rounded.
 
 ```html
-<sp-field-label for="decimals">Adjust exposure</sp-field-label>
 <sp-number-field
-    id="decimals"
     value="0"
     format-options='{
         "signDisplay": "exceptZero",
         "minimumFractionDigits": 1,
         "maximumFractionDigits": 2
     }'
-></sp-number-field>
+>
+    Adjust exposure
+</sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -113,14 +111,14 @@ The following example uses the `signDisplay` option to include the plus sign for
 The `style: 'percent'` option can be passed to the `formatOptions` property to treat the value as a percentage. In this mode, the value is multiplied by 100 before it is displayed, i.e. `0.45` is displayed as "45%". The reverse is also true: when the user enters a value, the `change` event will be triggered with the entered value divided by 100. When the percent option is enabled, the default step automatically changes to 0.01 such that incrementing and decrementing occurs by 1%. This can be overridden with the step property.
 
 ```html
-<sp-field-label for="percents">Sales tax</sp-field-label>
 <sp-number-field
-    id="percents"
     value="0.05"
     format-options='{
         "style": "percent"
     }'
-></sp-number-field>
+>
+    Sales tax
+</sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -132,9 +130,7 @@ The `style: 'currency'` option can be passed to the `formatOptions` property to
 If you need to allow the user to change the currency, you should include a separate dropdown next to the `sp-number-field`. The `sp-number-field` itself will not determine the currency from the user input.
 
 ```html
-<sp-field-label for="currency">Transaction amount</sp-field-label>
 <sp-number-field
-    id="currency"
     value="45"
     format-options='{
         "style": "currency",
@@ -142,7 +138,9 @@ If you need to allow the user to change the currency, you should include a separ
         "currencyDisplay": "code",
         "currencySign": "accounting"
     }'
-></sp-number-field>
+>
+    Transaction amount
+</sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -156,16 +154,16 @@ If you need to allow the user to change the unit, you should include a separate
 Note: The unit style is not currently supported in Safari. A [polyfill](https://formatjs.io/docs/polyfills/intl-numberformat/) may be necessary.
 
 ```html
-<sp-field-label for="units">Package width</sp-field-label>
 <sp-number-field
-    id="units"
     value="4"
     format-options='{
         "style": "unit",
         "unit": "inch",
         "unitDisplay": "long"
     }'
-></sp-number-field>
+>
+    Package width
+</sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -175,15 +173,15 @@ Note: The unit style is not currently supported in Safari. A [polyfill](https://
 While `Intl.NumberFormatOptions` does support a [wide range of units](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier), it is possible to encounter units (e.g. the graphics units of `pixel`, `pixels`, `points`, etc.) that are not supported therein. When this occurs, an `<sp-number-field>` element will attempt to polyfill support for this unit. See the following example delivering `{ style: "unit", unit: "px" }` below:
 
 ```html
-<sp-field-label for="units">Document width in pixels</sp-field-label>
 <sp-number-field
-    id="units"
     value="500"
     format-options='{
         "style": "unit",
         "unit": "px"
     }'
-></sp-number-field>
+>
+    Document width in pixels
+</sp-number-field>
 ```
 
 Note: the polyfilling done here is very simplistic and is triggered by supplying options that would otherwise cause the `Intl.NumberFormat()` call to throw an error. Once the unsupporting unit of `px` causes the construction of the object to throw, a back up formatter/parser pair will be created without the supplied unit data. When the `style` is set to `unit`, the `unit` value of will be adopted as the _static_ unit display. This means that neither pluralization or translation will be handled within the `<sp-number-field>` element itself. If pluralization or translation is important to the delivered interface, please be sure to handle passing those strings into to element via the `formatOptions` property reactively to the value of the element or locale of that page in question.
@@ -197,8 +195,7 @@ The `min` and `max` properties can be used to limit the entered value to a speci
 If a valid range is known ahead of time, it is a good idea to provide it to `<sp-number-field>` so it can optimize the experience. For example, when the minimum value is greater than or equal to zero, it is possible to use a numeric keyboard on iOS rather than a full text keyboard (necessary to enter a minus sign).
 
 ```html
-<sp-field-label for="red">Red value</sp-field-label>
-<sp-number-field id="red" value="4" min="0" max="255"></sp-number-field>
+<sp-number-field value="4" min="0" max="255">Red value</sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -211,32 +208,9 @@ If the user types a value that is between two steps and blurs the input, the val
 
 <!-- prettier-ignore -->
 ```html
-<sp-field-label
-    for="step"
->Step</sp-field-label>
-<sp-number-field
-    id="step"
-    step="10"
-></sp-number-field>
-
-<sp-field-label
-    for="step-min"
->Step + min</sp-field-label>
-<sp-number-field
-    id="step-min"
-    min="2"
-    step="3"
-></sp-number-field>
-
-<sp-field-label
-    for="step-min-max"
->Step + min + max</sp-field-label>
-<sp-number-field
-    id="step-min-max"
-    min="2"
-    max="21"
-    step="3"
-></sp-number-field>
+<sp-number-field step="10">Step</sp-number-field>
+<sp-number-field min="2" step="3">Step + min</sp-number-field>
+<sp-number-field min="2"  max="21" step="3">Step + min + max</sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -249,11 +223,7 @@ If the user types a value that is between two steps and blurs the input, the val
 The `invalid` attribute indicates that the number field's value is invalid. When set, appropriate ARIA attributes will be automatically applied.
 
 ```html
-<sp-field-label for="invalid">
-    It's one banana, Michael, how much could it cost?
-</sp-field-label>
 <sp-number-field
-    id="invalid"
     invalid
     style="width: 130px"
     value="10"
@@ -268,10 +238,12 @@ The `invalid` attribute indicates that the number field's value is invalid. When
         "minimumFractionDigits": 2,
         "maximumFractionDigits": 2
     }'
-></sp-number-field>
-<sp-help-text variant="negative">
-    Value should be between $0 and $0.3.
-</sp-help-text>
+>
+    It's one banana, Michael, how much could it cost?
+    <sp-help-text variant="negative" slot="help-text-negative">
+        Value should be between $0 and $0.3.
+    </sp-help-text>
+</sp-number-field>
 ```
 
 #### Valid
@@ -279,11 +251,7 @@ The `invalid` attribute indicates that the number field's value is invalid. When
 The `valid` attribute indicates that the number field's value is valid.
 
 ```html
-<sp-field-label for="valid">
-    It's one banana, Michael, how much could it cost?
-</sp-field-label>
 <sp-number-field
-    id="valid"
     valid
     style="width: 130px"
     value="0.23"
@@ -298,7 +266,9 @@ The `valid` attribute indicates that the number field's value is valid.
         "minimumFractionDigits": 2,
         "maximumFractionDigits": 2
     }'
-></sp-number-field>
+>
+    It's one banana, Michael, how much could it cost?
+</sp-number-field>
 ```
 
 #### Required
@@ -306,10 +276,9 @@ The `valid` attribute indicates that the number field's value is valid.
 Use the `required` attribute to indicate a number field value is required. Dictate the validity or invalidity state of the text entry with the `valid` or `invalid` attributes.
 
 ```html
-<sp-field-label for="number-1" required>Count</sp-field-label>
-<sp-number-field id="number-1" valid value="123"></sp-number-field>
-<sp-field-label for="number-2" required>Size</sp-field-label>
-<sp-number-field id="number-2" invalid value="152"></sp-number-field>
+<sp-number-field required>Count</sp-number-field>
+<sp-number-field required valid value="123">Count</sp-number-field>
+<sp-number-field required invalid>Size</sp-number-field>
 ```
 
 #### Disabled
@@ -317,8 +286,7 @@ Use the `required` attribute to indicate a number field value is required. Dicta
 The `disabled` attribute prevents the number field from receiving focus or events. The number field will appear faded.
 
 ```html
-<sp-field-label for="disabled" disabled>Number of tickets</sp-field-label>
-<sp-number-field id="disabled" disabled value="0"></sp-number-field>
+<sp-number-field disabled value="0">Number of tickets</sp-number-field>
 ```
 
 #### Read-only
@@ -326,8 +294,7 @@ The `disabled` attribute prevents the number field from receiving focus or event
 Number fields have a `readonly` attribute for when they’re in the disabled state but still need their labels to be shown. This allows for content to be copied, but not interacted with or changed.
 
 ```html
-<sp-field-label for="readonly">Number of tickets</sp-field-label>
-<sp-number-field id="readonly" readonly value="0"></sp-number-field>
+<sp-number-field readonly value="0">Number of tickets</sp-number-field>
 ```
 
 ### Behaviors
@@ -346,10 +313,9 @@ The input value incrementally increases or decreases by the value of the `step`
 The `<sp-number-field>` component doesn't manage a default value by itself. This means that consumers can set the value of the number-field as an empty string by clearing the input. If we want the number-field to reset to a `default-value` when the user clears the input, we can listen for the `change` event on the number-field component and set its value to the desired `default-value` if the input is empty.
 
 ```html
-<sp-field-label for="default">
+<sp-number-field id="default" value="20">
     Default value of this number field is 42
-</sp-field-label>
-<sp-number-field id="default" value="20"></sp-number-field>
+</sp-number-field>
 
 <script type="module">
     const numberField = document.querySelector('#default');
@@ -368,7 +334,10 @@ The `<sp-number-field>` component doesn't manage a default value by itself. This
 
 #### Labels
 
-Every number field must have a label that clearly describes its purpose. The label can be provided either via the `label` attribute or with an associated `<sp-field-label>` element.
+Every number field must have a label that clearly describes its purpose. Typically this label should be a visible label via the default slot. When a visible label is not required, the `label` attribute can be used to provide a hidden label for assistive technology.
+
+<sp-number-field>Quantity</sp-number-field>
+<sp-number-field label="Quantity"></sp-number-field>
 
 #### Keyboard Navigation
 

From 56954edfd4e80c70a6007a6ee55d492f3089c48e Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 14:35:26 -0400
Subject: [PATCH 10/39] docs(number-field): updated stories with slotted label

---
 .../stories/number-field-sizes.stories.ts     |  10 +-
 .../stories/number-field.stories.ts           | 117 ++++++------------
 2 files changed, 41 insertions(+), 86 deletions(-)

diff --git a/packages/number-field/stories/number-field-sizes.stories.ts b/packages/number-field/stories/number-field-sizes.stories.ts
index 782394b18e0..6ff260a4538 100644
--- a/packages/number-field/stories/number-field-sizes.stories.ts
+++ b/packages/number-field/stories/number-field-sizes.stories.ts
@@ -12,7 +12,6 @@
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/number-field/sp-number-field.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 export default {
@@ -26,14 +25,9 @@ const template = ({
     size?: 's' | 'm' | 'l' | 'xl';
 } = {}): TemplateResult => {
     return html`
-        <sp-field-label for="name" size=${ifDefined(size)}>
+        <sp-number-field size=${ifDefined(size)} value="100">
             Pick a number
-        </sp-field-label>
-        <sp-number-field
-            id="name"
-            size=${ifDefined(size)}
-            value="100"
-        ></sp-number-field>
+        </sp-number-field>
     `;
 };
 
diff --git a/packages/number-field/stories/number-field.stories.ts b/packages/number-field/stories/number-field.stories.ts
index 2a8cdfd33ae..8bcba51aaa2 100644
--- a/packages/number-field/stories/number-field.stories.ts
+++ b/packages/number-field/stories/number-field.stories.ts
@@ -14,7 +14,6 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 import '@spectrum-web-components/number-field/sp-number-field.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import { spreadProps } from '../../../test/lit-helpers.js';
 import { NumberField } from '@spectrum-web-components/number-field/src/NumberField.js';
 
@@ -200,16 +199,16 @@ export const Default = (args: StoryArgs = {}): TemplateResult => {
             return;
         });
     return html`
-        <sp-field-label for="default">Enter a number</sp-field-label>
         <sp-number-field
-            id="default"
             ...=${spreadProps(args)}
             @input=${(event: Event) =>
                 onInput((event.target as NumberField).value)}
             @change=${(event: Event) =>
                 onChange((event.target as NumberField).value)}
             style=${ifDefined(args.quiet ? undefined : '')}
-        ></sp-number-field>
+        >
+            Enter a number
+        </sp-number-field>
     `;
 };
 
@@ -234,11 +233,7 @@ indeterminate.args = {
 
 export const decimals = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="decimals">
-            Enter a number with visible decimals
-        </sp-field-label>
         <sp-number-field
-            id="decimals"
             ...=${spreadProps(args)}
             @change=${args.onChange}
             @input=${args.onInput}
@@ -247,7 +242,9 @@ export const decimals = (args: StoryArgs): TemplateResult => {
                 minimumFractionDigits: 1,
                 maximumFractionDigits: 2,
             } as unknown as Intl.NumberFormatOptions}
-        ></sp-number-field>
+        >
+            Enter a number with visible decimals
+        </sp-number-field>
     `;
 };
 
@@ -263,12 +260,8 @@ export const germanDecimals = (args: StoryArgs): TemplateResult => {
         currentSystem = window.__swc_hack_knobs__.defaultSystemVariant;
     }
     return html`
-        <sp-field-label for="decimals">
-            Enter a number with visible decimals
-        </sp-field-label>
         <sp-theme lang="de" dir="${currentDir}" system=${currentSystem}>
             <sp-number-field
-                id="decimals"
                 ...=${spreadProps(args)}
                 @change=${args.onChange}
                 @input=${args.onInput}
@@ -277,7 +270,9 @@ export const germanDecimals = (args: StoryArgs): TemplateResult => {
                     minimumFractionDigits: 1,
                     maximumFractionDigits: 2,
                 } as unknown as Intl.NumberFormatOptions}
-            ></sp-number-field>
+            >
+                Enter a number with visible decimals
+            </sp-number-field>
         </sp-theme>
     `;
 };
@@ -288,16 +283,16 @@ germanDecimals.args = {
 
 export const percents = (args: StoryArgs = {}): TemplateResult => {
     return html`
-        <sp-field-label for="percents">Enter a percentage</sp-field-label>
         <sp-number-field
-            id="percents"
             ...=${spreadProps(args)}
             @change=${args.onChange}
             .formatOptions=${{
                 style: 'percent',
                 unitDisplay: 'narrow',
             } as unknown as Intl.NumberFormatOptions}
-        ></sp-number-field>
+        >
+            Enter a percentage
+        </sp-number-field>
     `;
 };
 
@@ -307,7 +302,6 @@ percents.args = {
 
 export const currency = (args: StoryArgs = {}): TemplateResult => {
     return html`
-        <sp-field-label for="currency">Enter a value in Euros</sp-field-label>
         <sp-number-field
             ...=${spreadProps(args)}
             @change=${args.onChange}
@@ -317,7 +311,9 @@ export const currency = (args: StoryArgs = {}): TemplateResult => {
                 currencyDisplay: 'code',
                 currencySign: 'accounting',
             } as unknown as Intl.NumberFormatOptions}
-        ></sp-number-field>
+        >
+            Enter a value in Euros
+        </sp-number-field>
     `;
 };
 
@@ -327,9 +323,7 @@ currency.args = {
 
 export const units = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="units">Enter a lengths in inches</sp-field-label>
         <sp-number-field
-            id="units"
             ...=${spreadProps(args)}
             @change=${args.onChange}
             .formatOptions=${{
@@ -337,7 +331,9 @@ export const units = (args: StoryArgs): TemplateResult => {
                 unit: 'inch',
                 unitDisplay: 'long',
             } as unknown as Intl.NumberFormatOptions}
-        ></sp-number-field>
+        >
+            Enter a lengths in inches
+        </sp-number-field>
     `;
 };
 
@@ -347,16 +343,16 @@ units.args = {
 
 export const pixels = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="units">Enter a lengths in pixels</sp-field-label>
         <sp-number-field
-            id="units"
             .formatOptions=${{
                 style: 'unit',
                 unit: 'px',
             }}
             ...=${spreadProps(args)}
             @change=${args.onChange}
-        ></sp-number-field>
+        >
+            Enter a lengths in pixels
+        </sp-number-field>
     `;
 };
 
@@ -365,14 +361,9 @@ pixels.args = {
 };
 
 export const minMax = (args: StoryArgs): TemplateResult => html`
-    <sp-field-label for="min-max">
+    <sp-number-field ...=${spreadProps(args)} @change=${args.onChange}>
         Enter a value between 0 and 255
-    </sp-field-label>
-    <sp-number-field
-        id="min-max"
-        ...=${spreadProps(args)}
-        @change=${args.onChange}
-    ></sp-number-field>
+    </sp-number-field>
 `;
 
 minMax.args = {
@@ -383,14 +374,9 @@ minMax.args = {
 
 export const hideStepper = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="hideStepper">
+        <sp-number-field ...=${spreadProps(args)} @change=${args.onChange}>
             Enter a number without the stepper UI
-        </sp-field-label>
-        <sp-number-field
-            id="hideStepper"
-            ...=${spreadProps(args)}
-            @change=${args.onChange}
-        ></sp-number-field>
+        </sp-number-field>
     `;
 };
 hideStepper.args = {
@@ -400,14 +386,9 @@ hideStepper.args = {
 
 export const hideStepperQuiet = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="hideStepper">
+        <sp-number-field ...=${spreadProps(args)} @change=${args.onChange}>
             Enter a number without the stepper UI
-        </sp-field-label>
-        <sp-number-field
-            id="hideStepper"
-            ...=${spreadProps(args)}
-            @change=${args.onChange}
-        ></sp-number-field>
+        </sp-number-field>
     `;
 };
 hideStepperQuiet.args = {
@@ -418,14 +399,9 @@ hideStepperQuiet.args = {
 
 export const disabled = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="disabled">
+        <sp-number-field ...=${spreadProps(args)} @change=${args.onChange}>
             This Number Field is disabled
-        </sp-field-label>
-        <sp-number-field
-            id="disabled"
-            ...=${spreadProps(args)}
-            @change=${args.onChange}
-        ></sp-number-field>
+        </sp-number-field>
     `;
 };
 disabled.args = {
@@ -435,14 +411,9 @@ disabled.args = {
 
 export const readOnly = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="readonly">
+        <sp-number-field ...=${spreadProps(args)} @change=${args.onChange}>
             You can only read the following value
-        </sp-field-label>
-        <sp-number-field
-            id="readonly"
-            ...=${spreadProps(args)}
-            @change=${args.onChange}
-        ></sp-number-field>
+        </sp-number-field>
     `;
 };
 readOnly.args = {
@@ -452,23 +423,13 @@ readOnly.args = {
 
 export const validationIcons = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="invalidHiddenStepper">
+        <sp-number-field invalid ...=${spreadProps(args)}>
             Invalid Number Field without Stepper
-        </sp-field-label>
-        <sp-number-field
-            invalid
-            id="invalidHiddenStepper"
-            ...=${spreadProps(args)}
-            invalid
-        ></sp-number-field>
-        <sp-field-label for="validStepper">
-            Valid Number Field with Stepper
-        </sp-field-label>
-        <sp-number-field id="validStepper" valid></sp-number-field>
-        <sp-field-label for="invalidStepper">
+        </sp-number-field>
+        <sp-number-field valid>Valid Number Field with Stepper</sp-number-field>
+        <sp-number-field invalid>
             Invalid Number Field with Stepper
-        </sp-field-label>
-        <sp-number-field id="invalidStepper" invalid></sp-number-field>
+        </sp-number-field>
     `;
 };
 validationIcons.args = {
@@ -504,15 +465,15 @@ export const ScrollingContainer = (args: StoryArgs = {}): TemplateResult => {
         </style>
         <div class="scroller">
             <div>
-                <sp-field-label for="default">Enter a number</sp-field-label>
                 <sp-number-field
-                    id="default"
                     ...=${spreadProps(args)}
                     @input=${(event: Event) =>
                         onInput((event.target as NumberField).value)}
                     @change=${(event: Event) =>
                         onChange((event.target as NumberField).value)}
-                ></sp-number-field>
+                >
+                    Enter a number
+                </sp-number-field>
                 <p>
                     This box should not scroll when the focus is inside the
                     number field and field value is changed by using the mouse

From b5bdd62a658065ff154a985014a4a75ce89d5067 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 14:42:20 -0400
Subject: [PATCH 11/39] docs(color-field): updated docs with slotted label

---
 packages/color-field/README.md                | 64 ++++++++++++++-----
 .../stories/color-field-sizes.stories.ts      |  2 -
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/packages/color-field/README.md b/packages/color-field/README.md
index 52dcb6dee14..b5b38585431 100644
--- a/packages/color-field/README.md
+++ b/packages/color-field/README.md
@@ -33,7 +33,7 @@ The color field consists of several key parts:
 - **Size variations**: Different size options to match your design requirements
 
 ```html
-<sp-color-field value="#ffff00"></sp-color-field>
+<sp-color-field value="#ffff00">Background color</sp-color-field>
 ```
 
 ### Options
@@ -45,7 +45,11 @@ The color field consists of several key parts:
 <sp-tab-panel value="s">
 
 ```html
-<sp-color-field size="s" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="s"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -53,7 +57,11 @@ The color field consists of several key parts:
 <sp-tab-panel value="m">
 
 ```html
-<sp-color-field size="m" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="m"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -62,7 +70,11 @@ The color field consists of several key parts:
 <sp-tab-panel value="l">
 
 ```html
-<sp-color-field size="l" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="l"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -71,7 +83,11 @@ The color field consists of several key parts:
 <sp-tab-panel value="xl">
 
 ```html
-<sp-color-field size="xl" value="#ffff00"></sp-color-field>
+<sp-color-field
+    size="xl"
+    value="#ffff00"
+    label="Background color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -82,7 +98,7 @@ The color field consists of several key parts:
 When `view-color` is true, the color handle will be rendered. This is useful for development and debugging purposes.
 
 ```html
-<sp-color-field view-color value="#f00"></sp-color-field>
+<sp-color-field view-color value="#f00">Icon color</sp-color-field>
 ```
 
 #### Quiet
@@ -90,7 +106,7 @@ When `view-color` is true, the color handle will be rendered. This is useful for
 A quiet color field provides a more subtle appearance:
 
 ```html
-<sp-color-field quiet value="#e6e600"></sp-color-field>
+<sp-color-field quiet value="#e6e600">Icon color</sp-color-field>
 ```
 
 ### States
@@ -100,7 +116,7 @@ A quiet color field provides a more subtle appearance:
 The default state of the color field, ready for user input:
 
 ```html
-<sp-color-field value="#ffff00"></sp-color-field>
+<sp-color-field value="#ffff00">Icon color</sp-color-field>
 ```
 
 #### Read Only
@@ -108,7 +124,7 @@ The default state of the color field, ready for user input:
 A readonly color field that displays the color value but prevents user modification:
 
 ```html
-<sp-color-field readonly value="#ffff00"></sp-color-field>
+<sp-color-field readonly value="#ffff00">Icon color</sp-color-field>
 ```
 
 #### Invalid Input
@@ -116,7 +132,7 @@ A readonly color field that displays the color value but prevents user modificat
 If the input value is not a valid color, `<sp-color-field>` will not accept it and may show validation feedback:
 
 ```html
-<sp-color-field value="not a color"></sp-color-field>
+<sp-color-field value="not a color">Icon color</sp-color-field>
 ```
 
 ### Behaviors
@@ -134,7 +150,7 @@ For a complete list of supported color formats, see the [ColorController documen
 A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `BB` (blue) are hexadecimal integers between `00` and `FF` specifying the intensity of the color.
 
 ```html
-<sp-color-field view-color value="#ff0000"></sp-color-field>
+<sp-color-field view-color value="#ff0000" label="Text color"></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -144,7 +160,7 @@ A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `
 Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for `#RRGGBB`. In the shorthand form, `R` (red), `G` (green), and `B` (blue) are hexadecimal characters between `0` and `F`. Each character is repeated to create the full 6-digit color code. For example, `#123` would expand to `#112233`.
 
 ```html
-<sp-color-field view-color value="#f00"></sp-color-field>
+<sp-color-field view-color value="#f00" label="Text color"></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -154,7 +170,11 @@ Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for
 An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
 
 ```html
-<sp-color-field view-color value="rgb(255,0,0)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="rgb(255,0,0)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -164,7 +184,11 @@ An RGB color value is specified with: rgb(red, green, blue). Each parameter defi
 An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alpha` parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
 
 ```html
-<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="rgba(0,255,0,0.3)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -174,7 +198,11 @@ An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alp
 An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
 
 ```html
-<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="hsl(234, 70%, 50%)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -184,7 +212,11 @@ An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a
 An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
 
 ```html
-<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="hsv(0, 70%, 50%)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
diff --git a/packages/color-field/stories/color-field-sizes.stories.ts b/packages/color-field/stories/color-field-sizes.stories.ts
index ec408601a77..9d514700963 100644
--- a/packages/color-field/stories/color-field-sizes.stories.ts
+++ b/packages/color-field/stories/color-field-sizes.stories.ts
@@ -10,8 +10,6 @@
  * governing permissions and limitations under the License.
  */
 import { TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/help-text/sp-help-text.js';
 import { ColorFieldMarkup } from './template.js';
 

From d6dde5bc040fd43f0996a822f3e09a9d68b36f78 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 16:10:49 -0400
Subject: [PATCH 12/39] feat(field-label): updated interface to include
 optional slot name for label

---
 packages/field-label/src/FieldLabelMixin.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 8482115bfbd..2408e6d6355 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -31,7 +31,10 @@ export declare class FieldLabelMixinInterface {
     disabled: boolean;
     required: boolean;
     sideAligned: 'start' | 'end';
-    protected renderFieldLabel(fieldId: string): TemplateResult;
+    protected renderFieldLabel(
+        fieldId: string,
+        slotName?: string
+    ): TemplateResult;
 }
 
 /**
@@ -61,7 +64,7 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
             slotName?: string
         ): TemplateResult {
             return html`
-                <label for="${fieldId}">
+                <label id="${fieldId}-label" for="${fieldId}">
                     <slot name="${ifDefined(slotName)}"></slot>
                     ${this.required
                         ? html`

From e0e85c5d717c8d05e81e8e301fb4e2fde36582ba Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 16:14:18 -0400
Subject: [PATCH 13/39] feat(combobox): added label slot to combobox

---
 packages/combobox/README.md       | 46 +++++++++++++++----------------
 packages/combobox/package.json    |  1 +
 packages/combobox/src/Combobox.ts | 40 ++++++++++++++++++++++++---
 yarn.lock                         |  1 +
 4 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/packages/combobox/README.md b/packages/combobox/README.md
index 4b2dee37ca0..3ebae16fdf8 100644
--- a/packages/combobox/README.md
+++ b/packages/combobox/README.md
@@ -120,8 +120,8 @@ mutate() {
 ### Quiet
 
 ```html
-<sp-field-label for="color">Color</sp-field-label>
-<sp-combobox id="color" quiet>
+<sp-combobox quiet>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -140,8 +140,8 @@ The suggested popup menu items will remain the same regardless of the currently-
 Whenever the currently-typed input exactly matches the `value` of a popup menu item, that item is automatically selected.
 
 ```html
-<sp-field-label for="color-none" autocomplete="none">Color</sp-field-label>
-<sp-combobox id="color-none">
+<sp-combobox>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -155,8 +155,8 @@ Whenever the currently-typed input exactly matches the `value` of a popup menu i
 The popup menu items are filtered to only those completing the currently-input value.
 
 ```html
-<sp-field-label for="color-list" autocomplete="list">Color</sp-field-label>
-<sp-combobox id="color-list">
+<sp-combobox>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -170,15 +170,15 @@ The popup menu items are filtered to only those completing the currently-input v
 <sp-tab-panel value="disabled">
 
 ```html
-<sp-field-label for="color-disabled">Color</sp-field-label>
-<sp-combobox id="color-disabled" disabled>
+<sp-combobox disabled>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
 </sp-combobox>
 <br />
-<sp-field-label for="color-disabled-item">Color</sp-field-label>
-<sp-combobox id="color">
+<sp-combobox>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue" disabled>Blue</sp-menu-item>
@@ -190,8 +190,8 @@ The popup menu items are filtered to only those completing the currently-input v
 <sp-tab-panel value="invalid">
 
 ```html
-<sp-field-label for="color-invalid">Color</sp-field-label>
-<sp-combobox id="color-invalid" invalid>
+<sp-combobox invalid>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -206,8 +206,8 @@ The popup menu items are filtered to only those completing the currently-input v
 <sp-tab-panel value="pending">
 
 ```html
-<sp-field-label for="color">Color</sp-field-label>
-<sp-combobox id="color" pending>
+<sp-combobox pending>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -222,12 +222,12 @@ The popup menu items are filtered to only those completing the currently-input v
 #### Provide a label
 
 A combobox must be labeled.
-Typically, you should render a visible label via `<sp-field-label>`.
+Typically, you should render a visible label via the `label` slot.
 For exceptional cases, provide an accessible label via the `label` attribute.
 
 ```html
-<sp-field-label for="color">Color</sp-field-label>
-<sp-combobox id="color">
+<sp-combobox>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -245,8 +245,8 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 <sp-tab-panel value="help-text">
 
 ```html
-<sp-field-label for="color1">Color</sp-field-label>
-<sp-combobox id="color1">
+<sp-combobox>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -259,8 +259,8 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 <sp-tab-panel value="negative-help-text">
 
 ```html
-<sp-field-label for="color2">Color</sp-field-label>
-<sp-combobox id="color2" required>
+<sp-combobox required>
+    <span slot="label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -274,8 +274,8 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 <sp-tab-panel value="tooltip">
 
 ```html
-<sp-field-label for="color3">Color</sp-field-label>
-<sp-combobox id="color3">
+<sp-combobox>
+    <span slot="label">Color</span>
     <sp-tooltip slot="tooltip">
         Color options, such as red, green, or blue.
     </sp-tooltip>
diff --git a/packages/combobox/package.json b/packages/combobox/package.json
index 7d3a7ee68d8..07922adc781 100644
--- a/packages/combobox/package.json
+++ b/packages/combobox/package.json
@@ -74,6 +74,7 @@
         "@spectrum-web-components/popover": "1.8.0",
         "@spectrum-web-components/progress-circle": "1.8.0",
         "@spectrum-web-components/reactive-controllers": "1.8.0",
+        "@spectrum-web-components/shared": "1.8.0",
         "@spectrum-web-components/textfield": "1.8.0"
     },
     "types": "./src/index.d.ts",
diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 2495b1537aa..8355bc53e30 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -37,6 +37,7 @@ import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
 import '@spectrum-web-components/popover/sp-popover.js';
 import { Textfield } from '@spectrum-web-components/textfield';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
+import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import { Menu, MenuItem } from '@spectrum-web-components/menu';
@@ -53,7 +54,7 @@ export type ComboboxOption = {
  * @slot - Supply Menu Item elements to the default slot in order to populate the available options
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  */
-export class Combobox extends Textfield {
+export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
     public static override get styles(): CSSResultArray {
         return [...super.styles, styles, chevronStyles];
     }
@@ -402,6 +403,33 @@ export class Combobox extends Textfield {
             ></sp-progress-circle>
         `;
     }
+    protected get hasConditionalSlotContent() {
+        return this.slotContentIsPresent;
+    }
+
+    protected override get _ariaLabel(): string | undefined {
+        if (this.label && this.label.length > 0) {
+            return this.label;
+        } else if (this.appliedLabel && this.appliedLabel.length > 0) {
+            return this.appliedLabel;
+        } else if (this.hasConditionalSlotContent) {
+            return undefined;
+        } else {
+            window.__swc.warn(
+                this,
+                '<sp-textfield> elements needs a label:',
+                'https://opensource.adobe.com/spectrum-web-components/components/textfield/#accessibility',
+                {
+                    type: 'accessibility',
+                    issues: [
+                        'value supplied to the default slot, which will be displayed visually as part of the element, or',
+                        'value supplied to the "label" attribute, which will read by assistive technologies',
+                    ],
+                }
+            );
+            return undefined;
+        }
+    }
 
     protected override renderField(): TemplateResult {
         return html`
@@ -420,7 +448,7 @@ export class Combobox extends Textfield {
                 )}
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded="${this.open ? 'true' : 'false'}"
-                aria-label=${ifDefined(this.label || this.appliedLabel)}
+                aria-label=${ifDefined(this._ariaLabel)}
                 aria-labelledby="label applied-label pending-label"
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 autocomplete="off"
@@ -458,13 +486,17 @@ export class Combobox extends Textfield {
         }
 
         return html`
-            ${super.render()}
+            ${this.hasConditionalSlotContent
+                ? this.renderFieldLabel('field', 'label')
+                : html``}
+            <div id="textfield">${this.renderField()}</div>
+            ${this.renderHelpText(this.invalid)}
             <sp-picker-button
                 aria-controls="listbox-menu"
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-label=${ifDefined(this.label || this.appliedLabel)}
-                aria-labelledby="applied-label label"
+                aria-labelledby="field-label applied-label label"
                 @click=${this.toggleOpen}
                 tabindex="-1"
                 class="button ${this.focused
diff --git a/yarn.lock b/yarn.lock
index 9ab29d8fb50..cba752be744 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4325,6 +4325,7 @@ __metadata:
     "@spectrum-web-components/popover": "npm:1.8.0"
     "@spectrum-web-components/progress-circle": "npm:1.8.0"
     "@spectrum-web-components/reactive-controllers": "npm:1.8.0"
+    "@spectrum-web-components/shared": "npm:1.8.0"
     "@spectrum-web-components/textfield": "npm:1.8.0"
   languageName: unknown
   linkType: soft

From 3c226f880afd7ae78d2f383d35b5db5ffc4e7692 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 16:29:52 -0400
Subject: [PATCH 14/39] docs(combobox): added slotted label to docs

---
 packages/combobox/stories/combobox.stories.ts | 68 +++++++------------
 packages/combobox/stories/index.ts            |  7 +-
 2 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/packages/combobox/stories/combobox.stories.ts b/packages/combobox/stories/combobox.stories.ts
index 060e806ffd7..56f6f8561f2 100644
--- a/packages/combobox/stories/combobox.stories.ts
+++ b/packages/combobox/stories/combobox.stories.ts
@@ -17,7 +17,6 @@ import {
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/combobox/sp-combobox.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/help-text/sp-help-text.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
@@ -80,13 +79,10 @@ export const hasDisabledItems = (args: StoryArgs): TemplateResult => {
     }));
 
     return html`
-        <sp-field-label side-aligned="start" for="combobox-disabled-items">
-            Some fruits are disabled (light DOM)
-        </sp-field-label>
         <sp-combobox
-            id="combobox-disabled-items"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0; width:160px;"
         >
+            <span slot="label">Some fruits are disabled (light DOM)</span>
             ${fruits.map(
                 (fruit) => html`
                     <sp-menu-item
@@ -99,14 +95,12 @@ export const hasDisabledItems = (args: StoryArgs): TemplateResult => {
                 `
             )}
         </sp-combobox>
-        <sp-field-label side-aligned="start" for="combobox-disabled-countries">
-            Some countries are disabled (shadow DOM)
-        </sp-field-label>
         <sp-combobox
-            id="combobox-disabled-countries"
             .options=${countriesWithDisabledItems}
             .value=${args.value || ''}
-        ></sp-combobox>
+        >
+            <span slot="label">Some countries are disabled (shadow DOM)</span>
+        </sp-combobox>
     `;
 };
 hasDisabledItems.args = {
@@ -131,34 +125,30 @@ listAutocomplete.args = {
 
 export const noAutocomplete = (): TemplateResult => {
     return html`
-        <sp-field-label side-aligned="start" for="combobox-3">
-            Fruit
-        </sp-field-label>
         <sp-combobox
-            id="combobox-3"
             .options=${fruits}
+            side-aligned="start"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
-        ></sp-combobox>
-        <sp-field-label side-aligned="start" for="combobox-4">
-            Countries
-        </sp-field-label>
+        >
+            <span slot="label">Fruit</span>
+        </sp-combobox>
         <sp-combobox
-            id="combobox-4"
             .options=${countries}
+            side-aligned="start"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
-        ></sp-combobox>
+        >
+            <span slot="label">Countries</span>
+        </sp-combobox>
     `;
 };
 
 export const lightDOM = (): TemplateResult => {
     return html`
-        <sp-field-label side-aligned="start" for="combobox-5">
-            Fruit
-        </sp-field-label>
         <sp-combobox
-            id="combobox-5"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
+            side-aligned="start"
         >
+            <span slot="label">Fruit</span>
             ${fruits.map(
                 (fruit) => html`
                     <sp-menu-item id=${fruit.value} value=${fruit.value}>
@@ -167,13 +157,11 @@ export const lightDOM = (): TemplateResult => {
                 `
             )}
         </sp-combobox>
-        <sp-field-label side-aligned="start" for="combobox-6">
-            Countries
-        </sp-field-label>
         <sp-combobox
-            id="combobox-6"
+            side-aligned="start"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
         >
+            <span slot="label">Countries</span>
             ${countries.map(
                 (country) => html`
                     <sp-menu-item id=${country.value} value=${country.value}>
@@ -188,7 +176,6 @@ export const lightDOM = (): TemplateResult => {
 export const withTooltip = (): TemplateResult => {
     return html`
         <sp-combobox
-            id="combobox-6"
             label="Combobox with tooltip"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
         >
@@ -208,24 +195,21 @@ export const withTooltip = (): TemplateResult => {
 
 export const withFieldLabel = (): TemplateResult => {
     return html`
-        <sp-field-label for="combobox-7">Pick something</sp-field-label>
-        <sp-combobox id="combobox-7" .options=${fruits}></sp-combobox>
+        <sp-combobox id="combobox-7" .options=${fruits}>
+            <span slot="label">Pick something</span>
+        </sp-combobox>
     `;
 };
 
 export const withLabelAttribute = (): TemplateResult => {
     return html`
-        <sp-combobox
-            id="combobox-7"
-            label="Pick something"
-            .options=${fruits}
-        ></sp-combobox>
+        <sp-combobox label="Pick something" .options=${fruits}></sp-combobox>
     `;
 };
 
 export const withHelpText = (): TemplateResult => {
     return html`
-        <sp-combobox id="combobox-7" label="Pick something" .options=${fruits}>
+        <sp-combobox label="Pick something" .options=${fruits}>
             <sp-help-text slot="help-text">
                 These are fruits found in the game "Animal Crossing: New Leaf".
             </sp-help-text>
@@ -250,15 +234,15 @@ class ControlledCombo extends LitElement {
 
     override render(): TemplateResult {
         return html`
-            <sp-field-label for="age">
-                Retirement age (try entering a non-number)
-            </sp-field-label>
             <sp-combobox
-                id="age"
                 .options=${ControlledCombo.ages}
                 .value=${live(this.value.validated)}
                 @change=${this.onChange}
-            ></sp-combobox>
+            >
+                <span slot="label">
+                    Retirement age (try entering a non-number)
+                </span>
+            </sp-combobox>
         `;
     }
 
diff --git a/packages/combobox/stories/index.ts b/packages/combobox/stories/index.ts
index 776b306ce3b..5664241ae0a 100644
--- a/packages/combobox/stories/index.ts
+++ b/packages/combobox/stories/index.ts
@@ -16,7 +16,6 @@ import {
 } from '@spectrum-web-components/base';
 import { Combobox, ComboboxOption } from '@spectrum-web-components/combobox';
 import '@spectrum-web-components/combobox/sp-combobox.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import { spreadProps } from '../../../test/lit-helpers';
 
 export type StoryArgs = {
@@ -49,15 +48,15 @@ const handleInput =
 
 export const ComboboxMarkup = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="combobox">Where do you live?</sp-field-label>
         <sp-combobox
-            id="combobox"
             .options=${countries}
             .value=${args.value || ''}
             @change=${handleChange(args)}
             @input=${handleInput(args)}
             ${spreadProps(args)}
-        ></sp-combobox>
+        >
+            <span slot="label">Where do you live?</span>
+        </sp-combobox>
     `;
 };
 

From 183218c649a11c483cffde137789ce4af0d4be0f Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 16:32:40 -0400
Subject: [PATCH 15/39] test(combobox): updates tests with slotted label

---
 packages/combobox/test/combobox-a11y.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/combobox/test/combobox-a11y.test.ts b/packages/combobox/test/combobox-a11y.test.ts
index 8d76add3bbc..db9cb21db12 100644
--- a/packages/combobox/test/combobox-a11y.test.ts
+++ b/packages/combobox/test/combobox-a11y.test.ts
@@ -44,7 +44,7 @@ describe('Combobox accessibility', () => {
         await elementUpdated(el);
         await expect(el).to.be.accessible();
     });
-    it('renders accessibly with <sp-field-label>', async () => {
+    it('renders accessibly with slotted label', async () => {
         const test = await fixture<HTMLDivElement>(html`
             <div>${withFieldLabel()}</div>
         `);
@@ -64,7 +64,7 @@ describe('Combobox accessibility', () => {
 
         await expect(el).to.be.accessible();
     });
-    it('manages its "name" value with <sp-field-label>', async () => {
+    it('manages its "name" value with slotted label', async () => {
         const test = await fixture<HTMLDivElement>(html`
             <div>${withFieldLabel()}</div>
         `);

From c408b4e95ef67f6a1d7de2361bbdb0d189b66fd8 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Mon, 29 Sep 2025 16:37:24 -0400
Subject: [PATCH 16/39] fix(combobox): fixed combobox field id for label

---
 packages/combobox/src/Combobox.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 8355bc53e30..ab3fee41022 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -487,8 +487,8 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
 
         return html`
             ${this.hasConditionalSlotContent
-                ? this.renderFieldLabel('field', 'label')
-                : html``}
+                ? this.renderFieldLabel('input', 'label')
+                : nothing}
             <div id="textfield">${this.renderField()}</div>
             ${this.renderHelpText(this.invalid)}
             <sp-picker-button
@@ -496,7 +496,7 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-label=${ifDefined(this.label || this.appliedLabel)}
-                aria-labelledby="field-label applied-label label"
+                aria-labelledby="input-label applied-label label"
                 @click=${this.toggleOpen}
                 tabindex="-1"
                 class="button ${this.focused

From 84c67c32622a4104a6b88565621ab495e0ed2f9e Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Tue, 7 Oct 2025 09:24:44 -0400
Subject: [PATCH 17/39] feat(field-label): added label slot change handler to
 mixin

---
 packages/field-label/src/FieldLabelMixin.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 2408e6d6355..34eb1d74992 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -65,7 +65,10 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         ): TemplateResult {
             return html`
                 <label id="${fieldId}-label" for="${fieldId}">
-                    <slot name="${ifDefined(slotName)}"></slot>
+                    <slot
+                        name="${ifDefined(slotName)}"
+                        @slotchange=${this.handleFieldLabelSlotchange}
+                    ></slot>
                     ${this.required
                         ? html`
                               <sp-icon-asterisk100
@@ -76,6 +79,8 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
                 </label>
             `;
         }
+
+        protected handleFieldLabelSlotchange(): void {}
     }
     return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> &
         T;

From 8822ec1042cfc3df44f8bba068a61b758c156c50 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Tue, 7 Oct 2025 09:26:22 -0400
Subject: [PATCH 18/39] feat(combobox): added slot change handlers

---
 packages/combobox/src/Combobox.ts | 61 ++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index ab3fee41022..5d1d977ac98 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -54,7 +54,7 @@ export type ComboboxOption = {
  * @slot - Supply Menu Item elements to the default slot in order to populate the available options
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  */
-export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
+export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label"], [slot="placeholder"], [slot="label"]') {
     public static override get styles(): CSSResultArray {
         return [...super.styles, styles, chevronStyles];
     }
@@ -88,6 +88,15 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
     @query('slot:not([name])')
     private optionSlot!: HTMLSlotElement;
 
+    @query('slot[name="label"]')
+    private deprecatedSlot!: HTMLSlotElement;
+
+    @query('slot[name="field-label"]')
+    private labelSlot!: HTMLSlotElement
+
+    @query('slot[name="placeholder"]')
+    private placeholderSlot!: HTMLSlotElement
+
     @state()
     overlayOpen = false;
 
@@ -112,6 +121,12 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
 
     private resizeObserver?: ResizeObserver | undefined;
 
+    private hasDeprecatedContent = false;
+
+    private hasFieldLabelContent = false;
+
+    private hasPlaceholderContent = false;
+
     @state()
     private fieldWidth = 0;
 
@@ -190,6 +205,32 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
         });
     }
 
+    private hasSlotContent(slot: HTMLSlotElement): boolean {
+        return slot.assignedNodes({
+            flatten: true,
+        }).map((node) => node.textContent).join('').trim().length > 0;;
+    }
+
+    protected override handleFieldLabelSlotchange(): void {
+        this.hasFieldLabelContent = this.hasSlotContent(this.fieldLabelSlot);
+    }
+
+    protected handlePlaceholderSlotchange(): void {
+        this.hasPlaceholderContent = this.hasSlotContent(this.placeholderSlot);
+    }
+
+    protected handleDeprecatedSlotchange(): void {
+        this.hasDeprecatedContent = this.hasSlotContent(this.deprecatedSlot);
+        if (this.hasDeprecatedContent) {
+            window.__swc.warn(
+                this,
+                `The default slot for text label in <${this.localName}> has been deprecated and will be removed in a future release. Use the "field-label" slot for a visible label or the "label" attribute for an visibly hidden label instead. Use the "placeholder" slot for a placeholder text.`,
+                'https://opensource.adobe.com/spectrum-web-components/components/combobox/',
+                { level: 'deprecation' }
+            );
+        }
+    }
+
     protected handleTooltipSlotchange(
         event: Event & { target: HTMLSlotElement }
     ): void {
@@ -378,10 +419,12 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
                       >
                           ${appliedLabel}
                       </span>
-                      <slot name="label" id="label">
-                          <span class="visually-hidden" aria-hidden="true">
-                              ${this.value}
-                          </span>
+                      <slot name="label" id="label" @slotchange=${this.handleLabelSlotchange}>
+                        <slot name="placeholder" id="placeholder" @slotchange=${this.handlePlaceholderSlotchange}>
+                            <span class="visually-hidden" aria-hidden="true">
+                                ${this.value}
+                            </span>
+                        </slot>
                       </slot>
                   `
                 : html`
@@ -446,7 +489,7 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
                 aria-controls=${ifDefined(
                     this.open ? 'listbox-menu' : undefined
                 )}
-                aria-describedby="${this.helpTextId} tooltip"
+                aria-describedby="${this.helpTextId} tooltip placeholder"
                 aria-expanded="${this.open ? 'true' : 'false'}"
                 aria-label=${ifDefined(this._ariaLabel)}
                 aria-labelledby="label applied-label pending-label"
@@ -487,16 +530,16 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="label"]') {
 
         return html`
             ${this.hasConditionalSlotContent
-                ? this.renderFieldLabel('input', 'label')
+                ? this.renderFieldLabel('input', 'field-label')
                 : nothing}
             <div id="textfield">${this.renderField()}</div>
             ${this.renderHelpText(this.invalid)}
             <sp-picker-button
                 aria-controls="listbox-menu"
-                aria-describedby="${this.helpTextId} tooltip"
+                aria-describedby="${this.helpTextId} tooltip placeholder"
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-label=${ifDefined(this.label || this.appliedLabel)}
-                aria-labelledby="input-label applied-label label"
+                aria-labelledby="input-label applied-label"
                 @click=${this.toggleOpen}
                 tabindex="-1"
                 class="button ${this.focused

From 4868c82bb7b195c44fd0dcb651eb034b7cfac6a4 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Tue, 7 Oct 2025 17:56:08 -0400
Subject: [PATCH 19/39] feat(field-label): hide field label if not used

---
 packages/field-label/src/FieldLabelMixin.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 34eb1d74992..af23aac26d6 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -23,6 +23,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 import styles from './field-label.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { ObserveSlotText } from '@spectrum-web-components/shared';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = new (...args: any[]) => T;
@@ -45,7 +46,10 @@ export declare class FieldLabelMixinInterface {
 export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
     superClass: T
 ) => {
-    class FieldLabelMixinClass extends superClass {
+    class FieldLabelMixinClass extends ObserveSlotText(
+        superClass,
+        '#field-label-slot'
+    ) {
         public static get styles(): CSSResultArray {
             return [styles, asteriskIconStyles];
         }
@@ -64,10 +68,11 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
             slotName?: string
         ): TemplateResult {
             return html`
-                <label id="${fieldId}-label" for="${fieldId}">
+                <label id="${fieldId}-label" for="${fieldId}" hidden>
                     <slot
+                        id="field-label-slot"
                         name="${ifDefined(slotName)}"
-                        @slotchange=${this.handleFieldLabelSlotchange}
+                        @slotchange=${this.manageTextObservedSlot}
                     ></slot>
                     ${this.required
                         ? html`
@@ -79,8 +84,6 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
                 </label>
             `;
         }
-
-        protected handleFieldLabelSlotchange(): void {}
     }
     return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> &
         T;

From 9cdc8386784a26d649962739d864525c1bec4784 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Tue, 7 Oct 2025 18:01:08 -0400
Subject: [PATCH 20/39] feat(textfield): use field label mixin to observe slot

---
 packages/textfield/src/Textfield.ts | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index a6310b8d731..d72ea94f636 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -34,8 +34,6 @@ import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-
 import textfieldStyles from './textfield.css.js';
 import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
 
@@ -46,15 +44,12 @@ export type TextfieldType = (typeof textfieldTypes)[number];
  * @fires input - The value of the element has changed.
  * @fires change - An alteration to the value of the element has been committed by the user.
  */
-export class TextfieldBase extends ObserveSlotText(
-    FieldLabelMixin(
-        ManageHelpText(
-            SizedMixin(Focusable, {
-                noDefaultSize: true,
-            })
-        )
-    ),
-    ''
+export class TextfieldBase extends FieldLabelMixin(
+    ManageHelpText(
+        SizedMixin(Focusable, {
+            noDefaultSize: true,
+        })
+    )
 ) {
     public static override get styles(): CSSResultArray {
         const superStyles = Array.isArray(super.styles)
@@ -304,7 +299,9 @@ export class TextfieldBase extends ObserveSlotText(
             return this.label;
         } else if (this.appliedLabel && this.appliedLabel.length > 0) {
             return this.appliedLabel;
-        } else if (this.slotHasContent) {
+        } else if (
+            this.querySelector('[slot="field-label"]')?.textContent?.trim()
+        ) {
             return undefined;
         } else if (this.placeholder && this.placeholder.length > 0) {
             return this.placeholder;

From d36080d2869699d3cf3576b67e0ffbb8e4eec2b1 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Tue, 7 Oct 2025 18:01:43 -0400
Subject: [PATCH 21/39] feat(combobox): use field label mixin to observe slot

---
 packages/combobox/src/Combobox.ts | 115 +++++++++---------------------
 1 file changed, 32 insertions(+), 83 deletions(-)

diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 5d1d977ac98..090ba1e6200 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -37,7 +37,6 @@ import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
 import '@spectrum-web-components/popover/sp-popover.js';
 import { Textfield } from '@spectrum-web-components/textfield';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
-import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import { Menu, MenuItem } from '@spectrum-web-components/menu';
@@ -54,7 +53,7 @@ export type ComboboxOption = {
  * @slot - Supply Menu Item elements to the default slot in order to populate the available options
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  */
-export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label"], [slot="placeholder"], [slot="label"]') {
+export class Combobox extends Textfield {
     public static override get styles(): CSSResultArray {
         return [...super.styles, styles, chevronStyles];
     }
@@ -88,15 +87,6 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
     @query('slot:not([name])')
     private optionSlot!: HTMLSlotElement;
 
-    @query('slot[name="label"]')
-    private deprecatedSlot!: HTMLSlotElement;
-
-    @query('slot[name="field-label"]')
-    private labelSlot!: HTMLSlotElement
-
-    @query('slot[name="placeholder"]')
-    private placeholderSlot!: HTMLSlotElement
-
     @state()
     overlayOpen = false;
 
@@ -121,12 +111,6 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
 
     private resizeObserver?: ResizeObserver | undefined;
 
-    private hasDeprecatedContent = false;
-
-    private hasFieldLabelContent = false;
-
-    private hasPlaceholderContent = false;
-
     @state()
     private fieldWidth = 0;
 
@@ -205,32 +189,6 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
         });
     }
 
-    private hasSlotContent(slot: HTMLSlotElement): boolean {
-        return slot.assignedNodes({
-            flatten: true,
-        }).map((node) => node.textContent).join('').trim().length > 0;;
-    }
-
-    protected override handleFieldLabelSlotchange(): void {
-        this.hasFieldLabelContent = this.hasSlotContent(this.fieldLabelSlot);
-    }
-
-    protected handlePlaceholderSlotchange(): void {
-        this.hasPlaceholderContent = this.hasSlotContent(this.placeholderSlot);
-    }
-
-    protected handleDeprecatedSlotchange(): void {
-        this.hasDeprecatedContent = this.hasSlotContent(this.deprecatedSlot);
-        if (this.hasDeprecatedContent) {
-            window.__swc.warn(
-                this,
-                `The default slot for text label in <${this.localName}> has been deprecated and will be removed in a future release. Use the "field-label" slot for a visible label or the "label" attribute for an visibly hidden label instead. Use the "placeholder" slot for a placeholder text.`,
-                'https://opensource.adobe.com/spectrum-web-components/components/combobox/',
-                { level: 'deprecation' }
-            );
-        }
-    }
-
     protected handleTooltipSlotchange(
         event: Event & { target: HTMLSlotElement }
     ): void {
@@ -390,13 +348,17 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
         super.onBlur(event);
     }
 
-    protected renderVisuallyHiddenLabels(): TemplateResult {
-        /**
-         * appliedLabel corresponds to `<label for="...">`, which is overriden
-         * if user adds the `label` attribute manually to `<sp-combobox>`.
-         **/
-        const appliedLabel = this.label || this.appliedLabel;
+    /**
+     * gets the hidden label for the combobox:
+     * appliedLabel corresponds to `<label for="...">`, which is overriden
+     * if user adds the `label` attribute manually to `<sp-combobox>`.
+     **/
+    protected get visuallyHiddenLabel(): string | undefined {
+        const label = this.label || this.appliedLabel;
+        return label && label.trim().length > 0 ? label : undefined;
+    }
 
+    protected renderVisuallyHiddenLabels(): TemplateResult {
         return html`
             ${this.pending
                 ? html`
@@ -410,26 +372,17 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
                       </span>
                   `
                 : nothing}
-            ${this.value
+            ${this.visuallyHiddenLabel
                 ? html`
                       <span
                           aria-hidden="true"
                           class="visually-hidden"
-                          id="applied-label"
+                          id="visually-hidden-label"
                       >
-                          ${appliedLabel}
+                          ${this.visuallyHiddenLabel}
                       </span>
-                      <slot name="label" id="label" @slotchange=${this.handleLabelSlotchange}>
-                        <slot name="placeholder" id="placeholder" @slotchange=${this.handlePlaceholderSlotchange}>
-                            <span class="visually-hidden" aria-hidden="true">
-                                ${this.value}
-                            </span>
-                        </slot>
-                      </slot>
                   `
-                : html`
-                      <span hidden id="applied-label">${appliedLabel}</span>
-                  `}
+                : nothing}
         `;
     }
 
@@ -446,17 +399,14 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
             ></sp-progress-circle>
         `;
     }
-    protected get hasConditionalSlotContent() {
-        return this.slotContentIsPresent;
-    }
 
     protected override get _ariaLabel(): string | undefined {
-        if (this.label && this.label.length > 0) {
-            return this.label;
-        } else if (this.appliedLabel && this.appliedLabel.length > 0) {
-            return this.appliedLabel;
-        } else if (this.hasConditionalSlotContent) {
-            return undefined;
+        if (this.visuallyHiddenLabel) {
+            return 'visually-hidden-label';
+        } else if (
+            this.querySelector('[slot="field-label"]')?.textContent?.trim()
+        ) {
+            return 'field-label';
         } else {
             window.__swc.warn(
                 this,
@@ -474,7 +424,9 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
         }
     }
 
-    protected override renderField(): TemplateResult {
+    protected override renderField(
+        ariaLabelledby: string = ''
+    ): TemplateResult {
         return html`
             ${this.renderStateIcons()}
             <input
@@ -489,10 +441,9 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
                 aria-controls=${ifDefined(
                     this.open ? 'listbox-menu' : undefined
                 )}
-                aria-describedby="${this.helpTextId} tooltip placeholder"
+                aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded="${this.open ? 'true' : 'false'}"
-                aria-label=${ifDefined(this._ariaLabel)}
-                aria-labelledby="label applied-label pending-label"
+                aria-labelledby="${ariaLabelledby || ''} pending-label"
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 autocomplete="off"
                 @click=${this.toggleOpen}
@@ -524,22 +475,20 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
     }
 
     protected override render(): TemplateResult {
+        const ariaLabelledby = this._ariaLabel;
         if (this.tooltipEl) {
             this.tooltipEl.disabled = this.open;
         }
 
         return html`
-            ${this.hasConditionalSlotContent
-                ? this.renderFieldLabel('input', 'field-label')
-                : nothing}
-            <div id="textfield">${this.renderField()}</div>
+            ${this.renderFieldLabel('input', 'field-label')}
+            <div id="textfield">${this.renderField(ariaLabelledby)}</div>
             ${this.renderHelpText(this.invalid)}
             <sp-picker-button
                 aria-controls="listbox-menu"
-                aria-describedby="${this.helpTextId} tooltip placeholder"
+                aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded=${this.open ? 'true' : 'false'}
-                aria-label=${ifDefined(this.label || this.appliedLabel)}
-                aria-labelledby="input-label applied-label"
+                aria-labelledby="${ariaLabelledby || ''}"
                 @click=${this.toggleOpen}
                 tabindex="-1"
                 class="button ${this.focused
@@ -567,7 +516,7 @@ export class Combobox extends ObserveSlotPresence(Textfield, '[slot="field-label
                     <sp-menu
                         @change=${this.handleMenuChange}
                         tabindex="-1"
-                        aria-labelledby="label applied-label"
+                        aria-labelledby="label visually-hidden-label"
                         aria-label=${ifDefined(this.label || this.appliedLabel)}
                         id="listbox-menu"
                         role="listbox"

From c304d5727e69176d3cdcdbf2b4ebea268bcdebda Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 9 Oct 2025 11:03:18 -0400
Subject: [PATCH 22/39] feat(combobox): added placeholder

---
 packages/combobox/src/Combobox.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 090ba1e6200..13e8193c298 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -463,6 +463,11 @@ export class Combobox extends Textfield {
                     this.minlength > -1 ? this.minlength : undefined
                 )}
                 pattern=${ifDefined(this.pattern)}
+                placeholder=${ifDefined(
+                    this.placeholder?.length > 0 && !this.pending
+                        ? this.placeholder
+                        : undefined
+                )}
                 @change=${this.handleChange}
                 @input=${this.handleInput}
                 @focus=${this.onFocus}

From da60cf45d496e071ab05aaa26aae4d6ab4e2f62b Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 9 Oct 2025 15:56:46 -0400
Subject: [PATCH 23/39] fix(textfield): fixed issue with detecting slot content

---
 packages/textfield/src/Textfield.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index d72ea94f636..ddbde43c53f 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -299,9 +299,7 @@ export class TextfieldBase extends FieldLabelMixin(
             return this.label;
         } else if (this.appliedLabel && this.appliedLabel.length > 0) {
             return this.appliedLabel;
-        } else if (
-            this.querySelector('[slot="field-label"]')?.textContent?.trim()
-        ) {
+        } else if (this.slotHasContent) {
             return undefined;
         } else if (this.placeholder && this.placeholder.length > 0) {
             return this.placeholder;

From c40127f278e74b13d5c58cb83778d9f5dcd1d6ba Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 9 Oct 2025 15:57:21 -0400
Subject: [PATCH 24/39] fix(field-label): fixed issue with slot content
 detection in text field

---
 packages/field-label/src/FieldLabelMixin.ts | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index af23aac26d6..5f0694c5b46 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -23,7 +23,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 import styles from './field-label.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared';
+import { ObserveSlotText, SlotTextObservingInterface } from '@spectrum-web-components/shared';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = new (...args: any[]) => T;
@@ -46,10 +46,7 @@ export declare class FieldLabelMixinInterface {
 export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
     superClass: T
 ) => {
-    class FieldLabelMixinClass extends ObserveSlotText(
-        superClass,
-        '#field-label-slot'
-    ) {
+    class FieldLabelMixinClass extends ObserveSlotText(superClass, undefined, [':not(#field-label-slot)']) {
         public static get styles(): CSSResultArray {
             return [styles, asteriskIconStyles];
         }
@@ -67,10 +64,9 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
             fieldId: string = '',
             slotName?: string
         ): TemplateResult {
-            return html`
-                <label id="${fieldId}-label" for="${fieldId}" hidden>
-                    <slot
-                        id="field-label-slot"
+            return  html`
+                <label id="${fieldId}-label" for="${fieldId}" ?hidden="${!this.slotHasContent}">
+                    <slot id="field-label-slot"
                         name="${ifDefined(slotName)}"
                         @slotchange=${this.manageTextObservedSlot}
                     ></slot>
@@ -85,6 +81,6 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
             `;
         }
     }
-    return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> &
+    return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> & Constructor<SlotTextObservingInterface> &
         T;
 };

From 971728575629ba8ce7a666231f5aae1ee5e3f233 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 9 Oct 2025 15:57:57 -0400
Subject: [PATCH 25/39] test(textfield): removed unneccessary id attribute

---
 packages/textfield/test/textfield.test.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
index 4626952dfdd..66a0f5747d5 100644
--- a/packages/textfield/test/textfield.test.ts
+++ b/packages/textfield/test/textfield.test.ts
@@ -70,9 +70,7 @@ describe('Textfield', () => {
     });
     it('labels textfield with slotted label correctly', async () => {
         const el = await litFixture<Textfield>(html`
-            <sp-textfield id="textfield" placeholder="Enter Your Name">
-                Name
-            </sp-textfield>
+            <sp-textfield placeholder="Enter Your Name">Name</sp-textfield>
         `);
 
         await elementUpdated(el);

From 0ffa462c697b33e716d974063a8c014381099c08 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Fri, 10 Oct 2025 13:39:07 -0400
Subject: [PATCH 26/39] fix(fieldl-label): fixed mixin to allow slot naming

---
 packages/field-label/src/FieldLabelMixin.ts | 34 ++++++++++++++-------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 5f0694c5b46..612d0005499 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -23,7 +23,10 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 import styles from './field-label.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { ObserveSlotText, SlotTextObservingInterface } from '@spectrum-web-components/shared';
+import {
+    ObserveSlotText,
+    SlotTextObservingInterface,
+} from '@spectrum-web-components/shared';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = new (...args: any[]) => T;
@@ -44,9 +47,15 @@ export declare class FieldLabelMixinInterface {
  * @slot field-label - Text content of the label.
  */
 export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
-    superClass: T
+    superClass: T,
+    slotName?: string,
+    excludedSelectors: string[] = []
 ) => {
-    class FieldLabelMixinClass extends ObserveSlotText(superClass, undefined, [':not(#field-label-slot)']) {
+    class FieldLabelMixinClass extends ObserveSlotText(
+        superClass,
+        slotName,
+        excludedSelectors
+    ) {
         public static get styles(): CSSResultArray {
             return [styles, asteriskIconStyles];
         }
@@ -60,13 +69,15 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         @property({ type: String, reflect: true, attribute: 'side-aligned' })
         public sideAligned?: 'start' | 'end';
 
-        protected renderFieldLabel(
-            fieldId: string = '',
-            slotName?: string
-        ): TemplateResult {
-            return  html`
-                <label id="${fieldId}-label" for="${fieldId}" ?hidden="${!this.slotHasContent}">
-                    <slot id="field-label-slot"
+        protected renderFieldLabel(fieldId: string = ''): TemplateResult {
+            return html`
+                <label
+                    id="${fieldId}-label"
+                    for="${fieldId}"
+                    ?hidden="${!this.slotHasContent}"
+                >
+                    <slot
+                        id="field-label-slot"
                         name="${ifDefined(slotName)}"
                         @slotchange=${this.manageTextObservedSlot}
                     ></slot>
@@ -81,6 +92,7 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
             `;
         }
     }
-    return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> & Constructor<SlotTextObservingInterface> &
+    return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> &
+        Constructor<SlotTextObservingInterface> &
         T;
 };

From 4ac3c92d349fa62730c96633ee725da986446f30 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Fri, 10 Oct 2025 13:45:10 -0400
Subject: [PATCH 27/39] feat(combobox): updated combobox, stories and tests for
 field label mixin

---
 packages/combobox/README.md                   | 22 ++++----
 packages/combobox/package.json                |  1 +
 packages/combobox/src/Combobox.ts             | 55 ++++++++-----------
 packages/combobox/stories/combobox.stories.ts | 18 +++---
 packages/combobox/stories/index.ts            |  2 +-
 yarn.lock                                     |  1 +
 6 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/packages/combobox/README.md b/packages/combobox/README.md
index 3ebae16fdf8..1e75902da0b 100644
--- a/packages/combobox/README.md
+++ b/packages/combobox/README.md
@@ -121,7 +121,7 @@ mutate() {
 
 ```html
 <sp-combobox quiet>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -141,7 +141,7 @@ Whenever the currently-typed input exactly matches the `value` of a popup menu i
 
 ```html
 <sp-combobox>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -156,7 +156,7 @@ The popup menu items are filtered to only those completing the currently-input v
 
 ```html
 <sp-combobox>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -171,14 +171,14 @@ The popup menu items are filtered to only those completing the currently-input v
 
 ```html
 <sp-combobox disabled>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
 </sp-combobox>
 <br />
 <sp-combobox>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue" disabled>Blue</sp-menu-item>
@@ -191,7 +191,7 @@ The popup menu items are filtered to only those completing the currently-input v
 
 ```html
 <sp-combobox invalid>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -207,7 +207,7 @@ The popup menu items are filtered to only those completing the currently-input v
 
 ```html
 <sp-combobox pending>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -227,7 +227,7 @@ For exceptional cases, provide an accessible label via the `label` attribute.
 
 ```html
 <sp-combobox>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -246,7 +246,7 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 
 ```html
 <sp-combobox>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -260,7 +260,7 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 
 ```html
 <sp-combobox required>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-menu-item value="red">Red</sp-menu-item>
     <sp-menu-item value="green">Green</sp-menu-item>
     <sp-menu-item value="blue">Blue</sp-menu-item>
@@ -275,7 +275,7 @@ See [help text](../help-text) and [tooltip](../tooltip) for more information.
 
 ```html
 <sp-combobox>
-    <span slot="label">Color</span>
+    <span slot="field-label">Color</span>
     <sp-tooltip slot="tooltip">
         Color options, such as red, green, or blue.
     </sp-tooltip>
diff --git a/packages/combobox/package.json b/packages/combobox/package.json
index 07922adc781..e6a3656b50e 100644
--- a/packages/combobox/package.json
+++ b/packages/combobox/package.json
@@ -66,6 +66,7 @@
     "dependencies": {
         "@spectrum-web-components/action-button": "1.8.0",
         "@spectrum-web-components/base": "1.8.0",
+        "@spectrum-web-components/field-label": "1.8.0",
         "@spectrum-web-components/icon": "1.8.0",
         "@spectrum-web-components/icons-ui": "1.8.0",
         "@spectrum-web-components/menu": "1.8.0",
diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 13e8193c298..79b185068e2 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -36,6 +36,7 @@ import '@spectrum-web-components/picker-button/sp-picker-button.js';
 import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
 import '@spectrum-web-components/popover/sp-popover.js';
 import { Textfield } from '@spectrum-web-components/textfield';
+import { FieldLabelMixin } from '@spectrum-web-components/field-label/src/FieldLabelMixin.js';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
@@ -53,7 +54,7 @@ export type ComboboxOption = {
  * @slot - Supply Menu Item elements to the default slot in order to populate the available options
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  */
-export class Combobox extends Textfield {
+export class Combobox extends FieldLabelMixin(Textfield, 'field-label') {
     public static override get styles(): CSSResultArray {
         return [...super.styles, styles, chevronStyles];
     }
@@ -354,33 +355,17 @@ export class Combobox extends Textfield {
      * if user adds the `label` attribute manually to `<sp-combobox>`.
      **/
     protected get visuallyHiddenLabel(): string | undefined {
+        //TODO Deprecate applied label
         const label = this.label || this.appliedLabel;
         return label && label.trim().length > 0 ? label : undefined;
     }
 
     protected renderVisuallyHiddenLabels(): TemplateResult {
+        //TODO Deprecate applied label
         return html`
             ${this.pending
                 ? html`
                       ${this.renderLoader()}
-                      <span
-                          aria-hidden="true"
-                          class="visually-hidden"
-                          id="pending-label"
-                      >
-                          ${this.pendingLabel}
-                      </span>
-                  `
-                : nothing}
-            ${this.visuallyHiddenLabel
-                ? html`
-                      <span
-                          aria-hidden="true"
-                          class="visually-hidden"
-                          id="visually-hidden-label"
-                      >
-                          ${this.visuallyHiddenLabel}
-                      </span>
                   `
                 : nothing}
         `;
@@ -401,12 +386,16 @@ export class Combobox extends Textfield {
     }
 
     protected override get _ariaLabel(): string | undefined {
-        if (this.visuallyHiddenLabel) {
-            return 'visually-hidden-label';
+        const pending = this.pending ? this.pendingLabel : undefined;
+        if (this.appliedLabel && this.appliedLabel.trim().length > 0) {
+            //TODO Deprecate applied label
+            return `${this.appliedLabel}${this.pending ? ` ${this.pendingLabel}`: ''}`;
+        } else if (this.label && this.label.trim().length > 0) {
+            return `${this.label}${this.pending ? ` ${this.pendingLabel}`: ''}`;
         } else if (
-            this.querySelector('[slot="field-label"]')?.textContent?.trim()
+            this.slotHasContent
         ) {
-            return 'field-label';
+            return pending;
         } else {
             window.__swc.warn(
                 this,
@@ -420,12 +409,11 @@ export class Combobox extends Textfield {
                     ],
                 }
             );
-            return undefined;
+            return pending;
         }
     }
 
     protected override renderField(
-        ariaLabelledby: string = ''
     ): TemplateResult {
         return html`
             ${this.renderStateIcons()}
@@ -441,9 +429,10 @@ export class Combobox extends Textfield {
                 aria-controls=${ifDefined(
                     this.open ? 'listbox-menu' : undefined
                 )}
+                aria-label=${ifDefined(this._ariaLabel)}
+                aria-labelledby=${ifDefined(this.slotHasContent ? 'field-label-slot' : undefined)}
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded="${this.open ? 'true' : 'false'}"
-                aria-labelledby="${ariaLabelledby || ''} pending-label"
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 autocomplete="off"
                 @click=${this.toggleOpen}
@@ -480,20 +469,20 @@ export class Combobox extends Textfield {
     }
 
     protected override render(): TemplateResult {
-        const ariaLabelledby = this._ariaLabel;
         if (this.tooltipEl) {
             this.tooltipEl.disabled = this.open;
         }
 
         return html`
-            ${this.renderFieldLabel('input', 'field-label')}
-            <div id="textfield">${this.renderField(ariaLabelledby)}</div>
+            ${this.renderFieldLabel('input')}
+            <div id="textfield">${this.renderField()}</div>
             ${this.renderHelpText(this.invalid)}
             <sp-picker-button
                 aria-controls="listbox-menu"
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded=${this.open ? 'true' : 'false'}
-                aria-labelledby="${ariaLabelledby || ''}"
+                aria-label=${ifDefined(this._ariaLabel)}
+                aria-labelledby=${ifDefined(this.slotHasContent ? 'field-label-slot' : undefined)}
                 @click=${this.toggleOpen}
                 tabindex="-1"
                 class="button ${this.focused
@@ -568,7 +557,11 @@ export class Combobox extends Textfield {
                     </sp-menu>
                 </sp-popover>
             </sp-overlay>
-            ${this.renderVisuallyHiddenLabels()}
+            ${this.pending
+                ? html`
+                      ${this.renderLoader()}
+                  `
+                : nothing}
             <slot
                 aria-hidden="true"
                 name="tooltip"
diff --git a/packages/combobox/stories/combobox.stories.ts b/packages/combobox/stories/combobox.stories.ts
index 56f6f8561f2..66c616f2b17 100644
--- a/packages/combobox/stories/combobox.stories.ts
+++ b/packages/combobox/stories/combobox.stories.ts
@@ -82,7 +82,7 @@ export const hasDisabledItems = (args: StoryArgs): TemplateResult => {
         <sp-combobox
             style="min-width: 80px;--spectrum-textfield-m-min-width:0; width:160px;"
         >
-            <span slot="label">Some fruits are disabled (light DOM)</span>
+            <span slot="field-label">Some fruits are disabled (light DOM)</span>
             ${fruits.map(
                 (fruit) => html`
                     <sp-menu-item
@@ -99,7 +99,9 @@ export const hasDisabledItems = (args: StoryArgs): TemplateResult => {
             .options=${countriesWithDisabledItems}
             .value=${args.value || ''}
         >
-            <span slot="label">Some countries are disabled (shadow DOM)</span>
+            <span slot="field-label">
+                Some countries are disabled (shadow DOM)
+            </span>
         </sp-combobox>
     `;
 };
@@ -130,14 +132,14 @@ export const noAutocomplete = (): TemplateResult => {
             side-aligned="start"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
         >
-            <span slot="label">Fruit</span>
+            <span slot="field-label">Fruit</span>
         </sp-combobox>
         <sp-combobox
             .options=${countries}
             side-aligned="start"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
         >
-            <span slot="label">Countries</span>
+            <span slot="field-label">Countries</span>
         </sp-combobox>
     `;
 };
@@ -148,7 +150,7 @@ export const lightDOM = (): TemplateResult => {
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
             side-aligned="start"
         >
-            <span slot="label">Fruit</span>
+            <span slot="field-label">Fruit</span>
             ${fruits.map(
                 (fruit) => html`
                     <sp-menu-item id=${fruit.value} value=${fruit.value}>
@@ -161,7 +163,7 @@ export const lightDOM = (): TemplateResult => {
             side-aligned="start"
             style="min-width: 80px;--spectrum-textfield-m-min-width:0;width:100px;"
         >
-            <span slot="label">Countries</span>
+            <span slot="field-label">Countries</span>
             ${countries.map(
                 (country) => html`
                     <sp-menu-item id=${country.value} value=${country.value}>
@@ -196,7 +198,7 @@ export const withTooltip = (): TemplateResult => {
 export const withFieldLabel = (): TemplateResult => {
     return html`
         <sp-combobox id="combobox-7" .options=${fruits}>
-            <span slot="label">Pick something</span>
+            <span slot="field-label">Pick something</span>
         </sp-combobox>
     `;
 };
@@ -239,7 +241,7 @@ class ControlledCombo extends LitElement {
                 .value=${live(this.value.validated)}
                 @change=${this.onChange}
             >
-                <span slot="label">
+                <span slot="field-label">
                     Retirement age (try entering a non-number)
                 </span>
             </sp-combobox>
diff --git a/packages/combobox/stories/index.ts b/packages/combobox/stories/index.ts
index 5664241ae0a..525a69eeab3 100644
--- a/packages/combobox/stories/index.ts
+++ b/packages/combobox/stories/index.ts
@@ -55,7 +55,7 @@ export const ComboboxMarkup = (args: StoryArgs): TemplateResult => {
             @input=${handleInput(args)}
             ${spreadProps(args)}
         >
-            <span slot="label">Where do you live?</span>
+            <span slot="field-label">Where do you live?</span>
         </sp-combobox>
     `;
 };
diff --git a/yarn.lock b/yarn.lock
index cba752be744..e0c5402b81e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4317,6 +4317,7 @@ __metadata:
   dependencies:
     "@spectrum-web-components/action-button": "npm:1.8.0"
     "@spectrum-web-components/base": "npm:1.8.0"
+    "@spectrum-web-components/field-label": "npm:1.8.0"
     "@spectrum-web-components/icon": "npm:1.8.0"
     "@spectrum-web-components/icons-ui": "npm:1.8.0"
     "@spectrum-web-components/menu": "npm:1.8.0"

From dd221174e7d1cf490f2b4c3f6bfebc8bd8f1d161 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Fri, 10 Oct 2025 14:45:04 -0400
Subject: [PATCH 28/39] fix(field-label): corrected linting issues

---
 packages/field-label/package.json           |  8 +++---
 packages/field-label/src/FieldLabelMixin.ts | 18 ++++++-------
 packages/picker/src/Picker.ts               | 28 ++++++++++++++-------
 packages/textfield/src/Textfield.ts         |  2 ++
 4 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/packages/field-label/package.json b/packages/field-label/package.json
index 481e9bb4e0f..b54931b9d56 100644
--- a/packages/field-label/package.json
+++ b/packages/field-label/package.json
@@ -39,13 +39,13 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
-        "./sp-field-label.js": {
-            "development": "./sp-field-label.dev.js",
-            "default": "./sp-field-label.js"
-        },
         "./sp-field-label-mixin.js": {
             "development": "./sp-field-label-mixin.dev.js",
             "default": "./sp-field-label-mixin.js"
+        },
+        "./sp-field-label.js": {
+            "development": "./sp-field-label.dev.js",
+            "default": "./sp-field-label.js"
         }
     },
     "scripts": {
diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 612d0005499..6dc851c1516 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -23,10 +23,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 import styles from './field-label.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import {
-    ObserveSlotText,
-    SlotTextObservingInterface,
-} from '@spectrum-web-components/shared';
+import { ObserveSlotText } from '@spectrum-web-components/shared';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = new (...args: any[]) => T;
@@ -35,9 +32,10 @@ export declare class FieldLabelMixinInterface {
     disabled: boolean;
     required: boolean;
     sideAligned: 'start' | 'end';
-    protected renderFieldLabel(
-        fieldId: string,
-        slotName?: string
+    slotHasContent: boolean;
+    manageTextObservedSlot(): void;
+    public renderFieldLabel(
+        fieldId: string
     ): TemplateResult;
 }
 
@@ -69,7 +67,7 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         @property({ type: String, reflect: true, attribute: 'side-aligned' })
         public sideAligned?: 'start' | 'end';
 
-        protected renderFieldLabel(fieldId: string = ''): TemplateResult {
+        public renderFieldLabel(fieldId: string = ''): TemplateResult {
             return html`
                 <label
                     id="${fieldId}-label"
@@ -92,7 +90,5 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
             `;
         }
     }
-    return FieldLabelMixinClass as unknown as Constructor<FieldLabelMixinInterface> &
-        Constructor<SlotTextObservingInterface> &
-        T;
+    return FieldLabelMixinClass as Constructor<FieldLabelMixinInterface> & T;
 };
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index c652c88d94f..368e0a0ecbd 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -46,6 +46,7 @@ import '@spectrum-web-components/menu/sp-menu.js';
 import { Placement } from '@spectrum-web-components/overlay';
 import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
 import type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
+import { FieldLabelMixin } from '@spectrum-web-components/field-label/src/FieldLabelMixin.js';
 import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
 import {
     IS_MOBILE,
@@ -440,14 +441,16 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
             return content;
         }
         return html`
-            <slot name="label" id="label">
-                <span
-                    aria-hidden=${ifDefined(
-                        this.appliedLabel ? undefined : 'true'
-                    )}
-                >
-                    ${this.label}
-                </span>
+            <slot name="placeholder" id="placeholder">
+                <slot name="label" id="label">
+                    <span
+                        aria-hidden=${ifDefined(
+                            this.appliedLabel ? undefined : 'true'
+                        )}
+                    >
+                        ${this.label}
+                    </span>
+                </slot>
             </slot>
         `;
     }
@@ -955,7 +958,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
  * @fires sp-opened - Announces that the overlay has been opened
  * @fires sp-closed - Announces that the overlay has been closed
  */
-export class Picker extends PickerBase {
+export class Picker extends FieldLabelMixin(PickerBase) {
     public static override get styles(): CSSResultArray {
         return [pickerStyles, chevronStyles];
     }
@@ -968,6 +971,13 @@ export class Picker extends PickerBase {
         return styles;
     }
 
+    protected override render(): TemplateResult {
+        return html`
+            ${this.renderFieldLabel('field-label', '#label-slot')}
+            ${super.render()}
+        `;
+    }
+
     protected override handleKeydown = (event: KeyboardEvent): void => {
         const { key } = event;
         const handledKeys = [
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index ddbde43c53f..5e404ef0756 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -51,6 +51,8 @@ export class TextfieldBase extends FieldLabelMixin(
         })
     )
 ) {
+    public declare renderFieldLabel: (fieldId: string) => TemplateResult;
+
     public static override get styles(): CSSResultArray {
         const superStyles = Array.isArray(super.styles)
             ? super.styles

From 4263db4045b6f0cc2f4177f7e6492427341c7898 Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajrock38@gmail.com>
Date: Fri, 10 Oct 2025 18:38:00 +0530
Subject: [PATCH 29/39] fix(menu): MenuItem focus stealing from input elements
 on mouseover (#5732)

* fix(menu): added check to find focused element within root context

* fix(menu): added story

* fix(menu): added test

* chore(menu): added changeset

* fix(menu): added global const for component input pattern

* fix(menu): remove delimiter from the regexp constructor

* chore: skipped prod and vrt tests on the new story

* chore: fix tests helpers

* fix: check for cross root boundary

* fix: code comments

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-6.local>
Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-7.macromedia.com>
Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-7.local>
---
 .changeset/cruel-eels-open.md         |   5 +
 packages/menu/src/MenuItem.ts         |  91 +++++++++++++++-
 packages/menu/stories/menu.stories.ts | 107 +++++++++++++++++++
 packages/menu/test/menu.test.ts       | 144 ++++++++++++++++++++++++++
 tools/base/src/constants.ts           |  30 ++++++
 tools/base/src/index.ts               |   1 +
 6 files changed, 377 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cruel-eels-open.md
 create mode 100644 tools/base/src/constants.ts

diff --git a/.changeset/cruel-eels-open.md b/.changeset/cruel-eels-open.md
new file mode 100644
index 00000000000..1a262f4e355
--- /dev/null
+++ b/.changeset/cruel-eels-open.md
@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/menu': minor
+---
+
+**Fixed** MenuItem focus stealing from input elements on mouseover by enhanceing MenuItem's `handleMouseover` method to detect when an input element currently has focus and prevent stealing focus in those cases.
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
index 05f899b1f1a..75de1e0de3d 100644
--- a/packages/menu/src/MenuItem.ts
+++ b/packages/menu/src/MenuItem.ts
@@ -13,6 +13,7 @@
 import {
     CSSResultArray,
     html,
+    INPUT_COMPONENT_PATTERN,
     nothing,
     PropertyValues,
     TemplateResult,
@@ -479,13 +480,101 @@ export class MenuItem extends LikeAnchor(
             this.id = `sp-menu-item-${randomID()}`;
         }
     }
+
+    private getActiveElementSafely(): HTMLElement | null {
+        let root = this.getRootNode() as Document | ShadowRoot;
+        let activeElement = root.activeElement as HTMLElement;
+
+        // If no active element in current context and we're in shadow DOM,
+        // traverse up to find the document-level active element
+        if (!activeElement && root !== document) {
+            while (root && root !== document && 'host' in root) {
+                root = (root as ShadowRoot).host.getRootNode() as
+                    | Document
+                    | ShadowRoot;
+                activeElement = root.activeElement as HTMLElement;
+                if (activeElement) break;
+            }
+        }
+
+        return activeElement;
+    }
+
     handleMouseover(event: MouseEvent): void {
         const target = event.target as HTMLElement;
         if (target === this) {
-            this.focus();
+            // Check for active input elements across shadow boundaries
+            const activeElement = this.getActiveElementSafely();
+
+            // Only focus this menu item if no input element is currently active
+            // This prevents interrupting user input in search boxes, text fields, etc.
+            if (!activeElement || !this.isInputElement(activeElement)) {
+                this.focus();
+            }
             this.focused = false;
         }
     }
+
+    /**
+     * Determines if an element is an input field that should retain focus.
+     * Uses multiple detection strategies to identify input elements generically.
+     */
+    private isInputElement(element: HTMLElement): boolean {
+        // Check for native HTML input elements
+        if (this.isNativeInputElement(element)) {
+            return true;
+        }
+
+        // Check for contenteditable elements (rich text editors)
+        if (element.contentEditable === 'true') {
+            return true;
+        }
+
+        // Check for Spectrum Web Components with input-like behavior
+        if (this.isSpectrumInputComponent(element)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Checks if an element is a native HTML input element.
+     */
+    private isNativeInputElement(element: HTMLElement): boolean {
+        return (
+            element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement
+        );
+    }
+
+    /**
+     * Checks if an element is a Spectrum Web Component with input behavior.
+     * Uses ARIA roles and component patterns for generic detection.
+     */
+    private isSpectrumInputComponent(element: HTMLElement): boolean {
+        // Check if it's a Spectrum Web Component
+        if (!element.tagName.startsWith('SP-')) {
+            return false;
+        }
+
+        // Check ARIA role for input-like behavior
+        const role = element.getAttribute('role');
+        const inputRoles = ['textbox', 'searchbox', 'combobox', 'slider'];
+        if (role && inputRoles.includes(role)) {
+            return true;
+        }
+
+        // Check for components that typically contain input elements
+        // This covers components like sp-search, sp-textfield, sp-number-field, etc.
+        const inputComponentPattern = INPUT_COMPONENT_PATTERN;
+        if (inputComponentPattern.test(element.tagName)) {
+            return true;
+        }
+
+        return false;
+    }
     /**
      * forward key info from keydown event to parent menu
      */
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
index bebe33f6148..992d1a1d1ad 100644
--- a/packages/menu/stories/menu.stories.ts
+++ b/packages/menu/stories/menu.stories.ts
@@ -28,6 +28,11 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
+import '@spectrum-web-components/search/sp-search.js';
+import '@spectrum-web-components/textfield/sp-textfield.js';
+import '@spectrum-web-components/number-field/sp-number-field.js';
+import '@spectrum-web-components/combobox/sp-combobox.js';
+import '@spectrum-web-components/color-field/sp-color-field.js';
 
 export default {
     component: 'sp-menu',
@@ -484,3 +489,105 @@ export const dynamicRemoval = (): TemplateResult => {
         </sp-menu>
     `;
 };
+
+export const InputsWithMenu = (): TemplateResult => {
+    return html`
+        <div style="padding: 20px; max-width: 600px;">
+            <h3>Input Focus Demo</h3>
+            <p>
+                Try typing in any input field below, then hover over the menu
+                items. The input should maintain focus and not be interrupted.
+                This demonstrates the fix for focus stealing from all supported
+                input types.
+            </p>
+
+            <div
+                style="display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 20px;"
+            >
+                <!-- Search Input -->
+                <div>
+                    <label for="demo-search">Search:</label>
+                    <sp-search
+                        id="demo-search"
+                        placeholder="Search input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-search>
+                </div>
+
+                <!-- Textfield Input -->
+                <div>
+                    <label for="demo-textfield">Textfield:</label>
+                    <sp-textfield
+                        id="demo-textfield"
+                        placeholder="Textfield input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-textfield>
+                </div>
+
+                <!-- Number Field Input -->
+                <div>
+                    <label for="demo-number">Number Field:</label>
+                    <sp-number-field
+                        id="demo-number"
+                        placeholder="Number input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-number-field>
+                </div>
+
+                <!-- Combobox Input -->
+                <div>
+                    <label for="demo-combobox">Combobox:</label>
+                    <sp-combobox
+                        id="demo-combobox"
+                        placeholder="Combobox input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-combobox>
+                </div>
+
+                <!-- Color Field Input -->
+                <div>
+                    <label for="demo-color">Color Field:</label>
+                    <sp-color-field
+                        id="demo-color"
+                        placeholder="Color input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-color-field>
+                </div>
+
+                <!-- Native Input -->
+                <div>
+                    <label for="demo-native">Native Input:</label>
+                    <input
+                        id="demo-native"
+                        placeholder="Native input..."
+                        style="width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
+                    />
+                </div>
+            </div>
+
+            <sp-popover open>
+                <sp-menu>
+                    <sp-menu-item>Search Results</sp-menu-item>
+                    <sp-menu-item>Recent Searches</sp-menu-item>
+                    <sp-menu-item>Saved Searches</sp-menu-item>
+                    <sp-menu-item>Advanced Search</sp-menu-item>
+                    <sp-menu-item>Search Settings</sp-menu-item>
+                    <sp-menu-item>Clear History</sp-menu-item>
+                </sp-menu>
+            </sp-popover>
+        </div>
+    `;
+};
+
+InputsWithMenu.parameters = {
+    tags: ['!dev'],
+};
+
+InputsWithMenu.swc_vrt = {
+    skip: true,
+};
+
+InputsWithMenu.parameters = {
+    // Disables Chromatic's snapshotting on a global level
+    chromatic: { disableSnapshot: true },
+};
diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts
index e0165ba1c27..62b523c7822 100644
--- a/packages/menu/test/menu.test.ts
+++ b/packages/menu/test/menu.test.ts
@@ -23,6 +23,12 @@ import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/menu/sp-menu.js';
+import '@spectrum-web-components/search/sp-search.js';
+import '@spectrum-web-components/textfield/sp-textfield.js';
+import '@spectrum-web-components/number-field/sp-number-field.js';
+import '@spectrum-web-components/combobox/sp-combobox.js';
+import '@spectrum-web-components/color-field/sp-color-field.js';
+import '@spectrum-web-components/popover/sp-popover.js';
 import { isFirefox, isWebKit } from '@spectrum-web-components/shared';
 import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
@@ -834,4 +840,142 @@ describe('Menu', () => {
         // Test that the component can be disconnected without errors
         el.remove();
     });
+
+    it('does not steal focus from input elements on mouseover', async () => {
+        const el = await fixture<Menu>(html`
+            <div>
+                <sp-search
+                    id="test-search"
+                    placeholder="Search input..."
+                ></sp-search>
+                <sp-textfield
+                    id="test-textfield"
+                    placeholder="Textfield input..."
+                ></sp-textfield>
+                <sp-number-field
+                    id="test-number"
+                    placeholder="Number input..."
+                ></sp-number-field>
+                <sp-combobox
+                    id="test-combobox"
+                    placeholder="Combobox input..."
+                ></sp-combobox>
+                <sp-color-field
+                    id="test-color"
+                    placeholder="Color input..."
+                ></sp-color-field>
+                <input id="test-native" placeholder="Native input..." />
+
+                <sp-popover open>
+                    <sp-menu>
+                        <sp-menu-item id="menu-item-1">
+                            Menu Item 1
+                        </sp-menu-item>
+                        <sp-menu-item id="menu-item-2">
+                            Menu Item 2
+                        </sp-menu-item>
+                        <sp-menu-item id="menu-item-3">
+                            Menu Item 3
+                        </sp-menu-item>
+                    </sp-menu>
+                </sp-popover>
+            </div>
+        `);
+
+        await elementUpdated(el);
+
+        const searchInput = el.querySelector('#test-search') as HTMLElement;
+        const textfieldInput = el.querySelector(
+            '#test-textfield'
+        ) as HTMLElement;
+        const numberInput = el.querySelector('#test-number') as HTMLElement;
+        const comboboxInput = el.querySelector('#test-combobox') as HTMLElement;
+        const colorInput = el.querySelector('#test-color') as HTMLElement;
+        const nativeInput = el.querySelector(
+            '#test-native'
+        ) as HTMLInputElement;
+
+        const menuItem1 = el.querySelector('#menu-item-1') as MenuItem;
+        const menuItem2 = el.querySelector('#menu-item-2') as MenuItem;
+        const menuItem3 = el.querySelector('#menu-item-3') as MenuItem;
+
+        // Test with sp-search
+        searchInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(searchInput);
+
+        await mouseMoveOver(menuItem1);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            searchInput,
+            'sp-search should retain focus on mouseover'
+        );
+
+        await mouseMoveOver(menuItem2);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            searchInput,
+            'sp-search should retain focus on mouseover'
+        );
+
+        // Test with sp-textfield
+        textfieldInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(textfieldInput);
+
+        await mouseMoveOver(menuItem1);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            textfieldInput,
+            'sp-textfield should retain focus on mouseover'
+        );
+
+        // Test with sp-number-field
+        numberInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(numberInput);
+
+        await mouseMoveOver(menuItem2);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            numberInput,
+            'sp-number-field should retain focus on mouseover'
+        );
+
+        // Test with sp-combobox
+        comboboxInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(comboboxInput);
+
+        await mouseMoveOver(menuItem3);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            comboboxInput,
+            'sp-combobox should retain focus on mouseover'
+        );
+
+        // Test with sp-color-field
+        colorInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(colorInput);
+
+        await mouseMoveOver(menuItem1);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            colorInput,
+            'sp-color-field should retain focus on mouseover'
+        );
+
+        // Test with native input
+        nativeInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(nativeInput);
+
+        await mouseMoveOver(menuItem2);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            nativeInput,
+            'native input should retain focus on mouseover'
+        );
+    });
 });
diff --git a/tools/base/src/constants.ts b/tools/base/src/constants.ts
new file mode 100644
index 00000000000..3bd418db887
--- /dev/null
+++ b/tools/base/src/constants.ts
@@ -0,0 +1,30 @@
+/**
+ * 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
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Array of input component tag names for easier iteration and maintenance.
+ */
+export const INPUT_COMPONENT_TAGS = [
+    'SP-SEARCH',
+    'SP-TEXTFIELD',
+    'SP-NUMBER-FIELD',
+    'SP-COMBOBOX',
+    'SP-COLOR-FIELD',
+] as const;
+
+/**
+ * Regular expression pattern to match Spectrum Web Components input elements.
+ * Used to identify components that should maintain focus during menu interactions.
+ */
+export const INPUT_COMPONENT_PATTERN = new RegExp(
+    `^(${INPUT_COMPONENT_TAGS.join('|')})$`
+);
diff --git a/tools/base/src/index.ts b/tools/base/src/index.ts
index 7136a5691af..a5ea4641a95 100644
--- a/tools/base/src/index.ts
+++ b/tools/base/src/index.ts
@@ -12,4 +12,5 @@
 
 export * from './Base.js';
 export * from './sizedMixin.js';
+export * from './constants.js';
 export * from 'lit';

From 58fab11bd42547e33eebd217a00155f3ff76c480 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Fri, 10 Oct 2025 16:48:04 -0400
Subject: [PATCH 30/39] fix(field-label): made field id optional for picker

---
 packages/field-label/src/FieldLabelMixin.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 6dc851c1516..4182f3ed04b 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -34,9 +34,7 @@ export declare class FieldLabelMixinInterface {
     sideAligned: 'start' | 'end';
     slotHasContent: boolean;
     manageTextObservedSlot(): void;
-    public renderFieldLabel(
-        fieldId: string
-    ): TemplateResult;
+    public renderFieldLabel(fieldId: string): TemplateResult;
 }
 
 /**
@@ -67,11 +65,11 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         @property({ type: String, reflect: true, attribute: 'side-aligned' })
         public sideAligned?: 'start' | 'end';
 
-        public renderFieldLabel(fieldId: string = ''): TemplateResult {
+        public renderFieldLabel(fieldId?: string): TemplateResult {
             return html`
                 <label
-                    id="${fieldId}-label"
-                    for="${fieldId}"
+                    id="${fieldId ? `${fieldId}-label` : 'field-label'}"
+                    for="${ifDefined(fieldId)}"
                     ?hidden="${!this.slotHasContent}"
                 >
                     <slot

From 6a22c11853d47b4cacc0280d67904c2db45fbf0e Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Fri, 10 Oct 2025 17:04:38 -0400
Subject: [PATCH 31/39] fix(field-label): made field id optional for picker

---
 packages/field-label/src/FieldLabelMixin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 4182f3ed04b..106075c6969 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -34,7 +34,7 @@ export declare class FieldLabelMixinInterface {
     sideAligned: 'start' | 'end';
     slotHasContent: boolean;
     manageTextObservedSlot(): void;
-    public renderFieldLabel(fieldId: string): TemplateResult;
+    public renderFieldLabel(fieldId?: string): TemplateResult;
 }
 
 /**

From 93289a44113dbbbf5db5738bb94db13d46b27bfe Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Fri, 10 Oct 2025 17:14:01 -0400
Subject: [PATCH 32/39] feat(picker): added field label mixin to pciker and
 picker stories

---
 packages/picker/src/Picker.ts             | 25 ++++++++++++++++++---
 packages/picker/stories/picker.stories.ts | 27 +++++++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 368e0a0ecbd..a0a175ea975 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -592,6 +592,16 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
             </div>
         `;
     }
+
+    /**
+     * The role of the picker button.
+     * @returns The role of the picker button.
+     * Override for roles such as "combobox"
+     */
+    protected get isCombobox(): boolean {
+        return false;
+    }
+
     // a helper to throw focus to the button is needed because Safari
     // won't include buttons in the tab order even with tabindex="0"
     protected override render(): TemplateResult {
@@ -611,6 +621,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
                         ? `label-${this.labelAlignment}`
                         : undefined
                 )}
+                role="${ifDefined(this.isCombobox ? 'combobox' : undefined)}"
                 @focus=${this.handleButtonFocus}
                 @blur=${this.handleButtonBlur}
                 @keydown=${{
@@ -958,7 +969,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
  * @fires sp-opened - Announces that the overlay has been opened
  * @fires sp-closed - Announces that the overlay has been closed
  */
-export class Picker extends FieldLabelMixin(PickerBase) {
+export class Picker extends FieldLabelMixin(PickerBase, 'field-label') {
     public static override get styles(): CSSResultArray {
         return [pickerStyles, chevronStyles];
     }
@@ -971,10 +982,18 @@ export class Picker extends FieldLabelMixin(PickerBase) {
         return styles;
     }
 
+    /**
+     * The role of the picker button.
+     * @returns The role of the picker button.
+     * A picker is technically a select-only "combobox"
+     */
+    protected override get isCombobox(): boolean {
+        return true;
+    }
+
     protected override render(): TemplateResult {
         return html`
-            ${this.renderFieldLabel('field-label', '#label-slot')}
-            ${super.render()}
+            ${this.renderFieldLabel()} ${super.render()}
         `;
     }
 
diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
index db0bd854763..a5bf60ca9cb 100644
--- a/packages/picker/stories/picker.stories.ts
+++ b/packages/picker/stories/picker.stories.ts
@@ -101,6 +101,33 @@ export const Default = (args: StoryArgs): TemplateResult => {
     `;
 };
 
+export const SlottedLabel = (args: StoryArgs): TemplateResult => {
+    return html`
+        <sp-picker
+            id="picker-1"
+            @change=${handleChange(args)}
+            ${spreadProps(args)}
+        >
+            <span slot="field-label">Where do you live?</span>
+            <sp-menu-item value="option-1">Deselect</sp-menu-item>
+            <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
+            <sp-menu-item value="option-3">Feather...</sp-menu-item>
+            <sp-menu-item value="option-4">Select and Mask...</sp-menu-item>
+            <sp-menu-item value="option-5">Save Selection</sp-menu-item>
+            <sp-menu-item disabled value="option-6">
+                Make Work Path
+            </sp-menu-item>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
+
 export const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {
     return html`
         <div style="padding: 40px">

From f0b3a3908f5fc02ec2190ae31963f0b1c4c4ba55 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Wed, 15 Oct 2025 16:52:30 -0400
Subject: [PATCH 33/39] fix(textfiled): fixed element name in warning

---
 packages/textfield/src/Textfield.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index 5e404ef0756..c81b85fab90 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -51,7 +51,7 @@ export class TextfieldBase extends FieldLabelMixin(
         })
     )
 ) {
-    public declare renderFieldLabel: (fieldId: string) => TemplateResult;
+    declare public renderFieldLabel: (fieldId: string) => TemplateResult;
 
     public static override get styles(): CSSResultArray {
         const superStyles = Array.isArray(super.styles)
@@ -308,7 +308,7 @@ export class TextfieldBase extends FieldLabelMixin(
         } else {
             window.__swc.warn(
                 this,
-                '<sp-textfield> elements needs a label:',
+                `<${this.localName}> needs a label:`,
                 'https://opensource.adobe.com/spectrum-web-components/components/textfield/#accessibility',
                 {
                     type: 'accessibility',

From 462f5bbeaa2be68ea9f3d91beae24b7260518dfb Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Wed, 15 Oct 2025 16:52:50 -0400
Subject: [PATCH 34/39] fix(combobox): fixed element name in warning

---
 packages/combobox/src/Combobox.ts | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 79b185068e2..729060d33e7 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -389,17 +389,15 @@ export class Combobox extends FieldLabelMixin(Textfield, 'field-label') {
         const pending = this.pending ? this.pendingLabel : undefined;
         if (this.appliedLabel && this.appliedLabel.trim().length > 0) {
             //TODO Deprecate applied label
-            return `${this.appliedLabel}${this.pending ? ` ${this.pendingLabel}`: ''}`;
+            return `${this.appliedLabel}${this.pending ? ` ${this.pendingLabel}` : ''}`;
         } else if (this.label && this.label.trim().length > 0) {
-            return `${this.label}${this.pending ? ` ${this.pendingLabel}`: ''}`;
-        } else if (
-            this.slotHasContent
-        ) {
+            return `${this.label}${this.pending ? ` ${this.pendingLabel}` : ''}`;
+        } else if (this.slotHasContent) {
             return pending;
         } else {
             window.__swc.warn(
                 this,
-                '<sp-textfield> elements needs a label:',
+                `<${this.localName}> needs a label:`,
                 'https://opensource.adobe.com/spectrum-web-components/components/textfield/#accessibility',
                 {
                     type: 'accessibility',
@@ -413,8 +411,7 @@ export class Combobox extends FieldLabelMixin(Textfield, 'field-label') {
         }
     }
 
-    protected override renderField(
-    ): TemplateResult {
+    protected override renderField(): TemplateResult {
         return html`
             ${this.renderStateIcons()}
             <input
@@ -430,7 +427,9 @@ export class Combobox extends FieldLabelMixin(Textfield, 'field-label') {
                     this.open ? 'listbox-menu' : undefined
                 )}
                 aria-label=${ifDefined(this._ariaLabel)}
-                aria-labelledby=${ifDefined(this.slotHasContent ? 'field-label-slot' : undefined)}
+                aria-labelledby=${ifDefined(
+                    this.slotHasContent ? 'field-label-slot' : undefined
+                )}
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded="${this.open ? 'true' : 'false'}"
                 aria-invalid=${ifDefined(this.invalid || undefined)}
@@ -482,7 +481,9 @@ export class Combobox extends FieldLabelMixin(Textfield, 'field-label') {
                 aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-label=${ifDefined(this._ariaLabel)}
-                aria-labelledby=${ifDefined(this.slotHasContent ? 'field-label-slot' : undefined)}
+                aria-labelledby=${ifDefined(
+                    this.slotHasContent ? 'field-label-slot' : undefined
+                )}
                 @click=${this.toggleOpen}
                 tabindex="-1"
                 class="button ${this.focused

From 8d7b1ad434a37322c8266d304f3a06cd713eaae9 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 16 Oct 2025 12:13:06 -0400
Subject: [PATCH 35/39] docs(picker): updated stories

---
 packages/picker/stories/picker.stories.ts | 89 ++++++++++++++++++++++-
 1 file changed, 88 insertions(+), 1 deletion(-)

diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
index a5bf60ca9cb..67b656b2c38 100644
--- a/packages/picker/stories/picker.stories.ts
+++ b/packages/picker/stories/picker.stories.ts
@@ -72,6 +72,34 @@ export default {
 };
 
 export const Default = (args: StoryArgs): TemplateResult => {
+    return html`
+        <sp-picker
+            id="picker-1"
+            @change=${handleChange(args)}
+            label="Select a Country with a very long label, too long, in fact"
+            ${spreadProps(args)}
+        >
+            <span slot="field-label">Where do you live?</span>
+            <sp-menu-item value="option-1">Deselect</sp-menu-item>
+            <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
+            <sp-menu-item value="option-3">Feather...</sp-menu-item>
+            <sp-menu-item value="option-4">Select and Mask...</sp-menu-item>
+            <sp-menu-item value="option-5">Save Selection</sp-menu-item>
+            <sp-menu-item disabled value="option-6">
+                Make Work Path
+            </sp-menu-item>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
+
+export const DeprecatedSpLabel = (args: StoryArgs): TemplateResult => {
     return html`
         <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
             Where do you live?
@@ -101,11 +129,40 @@ export const Default = (args: StoryArgs): TemplateResult => {
     `;
 };
 
-export const SlottedLabel = (args: StoryArgs): TemplateResult => {
+export const DeprecatedLabel = (args: StoryArgs): TemplateResult => {
+    return html`
+        <sp-picker
+            id="picker-1"
+            @change=${handleChange(args)}
+            label="Select a Country with a very long label, too long, in fact"
+            ${spreadProps(args)}
+        >
+            <span slot="field-label">Where do you live?</span>
+            <sp-menu-item value="option-1">Deselect</sp-menu-item>
+            <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
+            <sp-menu-item value="option-3">Feather...</sp-menu-item>
+            <sp-menu-item value="option-4">Select and Mask...</sp-menu-item>
+            <sp-menu-item value="option-5">Save Selection</sp-menu-item>
+            <sp-menu-item disabled value="option-6">
+                Make Work Path
+            </sp-menu-item>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
+
+export const LabelAttribute = (args: StoryArgs): TemplateResult => {
     return html`
         <sp-picker
             id="picker-1"
             @change=${handleChange(args)}
+            label="Select a Country with a very long label, too long, in fact"
             ${spreadProps(args)}
         >
             <span slot="field-label">Where do you live?</span>
@@ -128,6 +185,36 @@ export const SlottedLabel = (args: StoryArgs): TemplateResult => {
     `;
 };
 
+export const SlottedPlaceholder = (args: StoryArgs): TemplateResult => {
+    return html`
+        <sp-picker
+            id="picker-1"
+            @change=${handleChange(args)}
+            label="Where do you live?"
+            ${spreadProps(args)}
+        >
+            <span slot="placeholder">
+                Select a Country with a very long label, too long, in fact
+            </span>
+            <sp-menu-item value="option-1">Deselect</sp-menu-item>
+            <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
+            <sp-menu-item value="option-3">Feather...</sp-menu-item>
+            <sp-menu-item value="option-4">Select and Mask...</sp-menu-item>
+            <sp-menu-item value="option-5">Save Selection</sp-menu-item>
+            <sp-menu-item disabled value="option-6">
+                Make Work Path
+            </sp-menu-item>
+        </sp-picker>
+        <p>This is some text.</p>
+        <p>This is some text.</p>
+        <p>
+            This is a
+            <a href="#anchor">link</a>
+            .
+        </p>
+    `;
+};
+
 export const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {
     return html`
         <div style="padding: 40px">

From 3934124fcd14ae79af0ab1904efc6f682a166d27 Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 16 Oct 2025 12:51:31 -0400
Subject: [PATCH 36/39] feat(picker): added field label mizin to picker without
 affecting pickerBase

---
 packages/picker/src/Picker.ts | 152 +++++++++++++++++++++++++++++++++-
 1 file changed, 148 insertions(+), 4 deletions(-)

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index a0a175ea975..6da6930e828 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -57,6 +57,7 @@ import { DesktopController } from './DesktopController.js';
 import { MobileController } from './MobileController.js';
 import pickerStyles from './picker.css.js';
 import { strategies } from './strategies.js';
+import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 
 const chevronClass = {
     s: 'spectrum-UIIcon-ChevronDown75',
@@ -469,6 +470,12 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
         `;
     }
 
+    protected renderPlaceholderContent(): TemplateResult {
+        return html`
+            <slot name="label"></slot>
+        `;
+    }
+
     protected get buttonContent(): TemplateResult[] {
         const labelClasses = {
             'visually-hidden': this.icons === 'only' && !!this.value,
@@ -496,8 +503,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
                               class="visually-hidden"
                               id="applied-label"
                           >
-                              ${appliedLabel}
-                              <slot name="label"></slot>
+                              ${appliedLabel} ${this.renderPlaceholderContent()}
                           </span>
                       `
                     : html`
@@ -961,7 +967,9 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
 /**
  * @element sp-picker
  *
- * @slot label - The placeholder content for the Picker
+ * @slot field-label - label that is visibly displayed for the picker
+ * @slot label - the placeholder content for the Picker; @deprecated use placeholder instead
+ * @slot placeholder - The placeholder content for the Picker
  * @slot description - The description content for the Picker
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  * @slot - menu items to be listed in the Picker
@@ -969,7 +977,10 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
  * @fires sp-opened - Announces that the overlay has been opened
  * @fires sp-closed - Announces that the overlay has been closed
  */
-export class Picker extends FieldLabelMixin(PickerBase, 'field-label') {
+export class Picker extends ObserveSlotPresence(
+    SizedMixin(FieldLabelMixin(PickerBase, 'field-label')),
+    ['[slot="placeholder"]']
+) {
     public static override get styles(): CSSResultArray {
         return [pickerStyles, chevronStyles];
     }
@@ -991,12 +1002,145 @@ export class Picker extends FieldLabelMixin(PickerBase, 'field-label') {
         return true;
     }
 
+    /*
+     * a combobox is labelled differently than a menu
+     * and since picker base is used by action menu,
+     * we must provide picker, which is a select-only combobox,
+     * with a different accessible label logic and API
+     */
+    protected override hasAccessibleLabel(): boolean {
+        const slotContent =
+            this.querySelector('[slot="field-label"]')?.textContent &&
+            this.querySelector('[slot="field-label"]')?.textContent?.trim() !==
+                '';
+        const slotAlt =
+            this.querySelector('[slot="field-label"]')
+                ?.getAttribute('alt')
+                ?.trim() &&
+            this.querySelector('[slot="field-label"]')
+                ?.getAttribute('alt')
+                ?.trim() !== '';
+        return (
+            !!this.label ||
+            !!this.getAttribute('aria-label') ||
+            !!this.getAttribute('aria-labelledby') ||
+            !!this.appliedLabel ||
+            !!slotContent ||
+            !!slotAlt
+        );
+    }
+
+    /**
+     * adds an accessibility warning if no label is provided
+     */
+    protected override warnNoLabel(): void {
+        window.__swc.warn(
+            this,
+            `<${this.localName}> needs one of the following to be accessible:`,
+            'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',
+            {
+                type: 'accessibility',
+                issues: [
+                    'a value supplied to the "label" attribute, or',
+                    'text content supplied in an element with slot="field-label"',
+                ],
+            }
+        );
+    }
+
+    protected override updated(changes: PropertyValues<this>): void {
+        super.updated(changes);
+        if (
+            changes.has('label') &&
+            this.getSlotContentPresence(
+                '[slot="placeholder"], [slot="field-label"]'
+            )
+        ) {
+            // adds a warning if "label" is being used as a placeholder
+            const placeholderContent = this.getSlotContentPresence(
+                '[slot="placeholder"]'
+            );
+            const fieldLabelContent = this.getSlotContentPresence(
+                '[slot="field-label"]'
+            );
+            const slottedLabelContent =
+                this.getSlotContentPresence('[slot="label"]');
+            const appliedLabel = this.appliedLabel;
+            const usedAsPlaceholder =
+                (!placeholderContent && !slottedLabelContent) ||
+                appliedLabel ||
+                fieldLabelContent;
+            if (usedAsPlaceholder)
+                window.__swc.warn(
+                    this,
+                    `Using the <${this.localName}> element's "label" attribute  is intented to be visually hidden for assistive technologies. Using the "label" attribute as a placeholder will be deprecated. \nTo privide a visible field label, use the "field-label" slot instead. \nTo provide visible placeholder text, use the "placeholder" slot instead.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/picker/',
+                    { level: 'deprecation' }
+                );
+        }
+    }
+
+    /**
+     *
+     * @param content
+     * @returns
+     */
+    protected override renderLabelContent(
+        content: Node[]
+    ): TemplateResult | Node[] {
+        if (this.value && this.selectedItem) {
+            return content;
+        }
+        return this.renderPlaceholderContent('placeholder', true);
+    }
+
+    protected override renderPlaceholderContent(
+        id?: string,
+        includeLabel?: boolean
+    ): TemplateResult {
+        return html`
+            <slot name="placeholder" id="${ifDefined(id)}">
+                <slot
+                    name="label"
+                    @slotchange=${this.handleSlottedLabelSlotchange}
+                >
+                    ${includeLabel
+                        ? html`
+                              <span
+                                  aria-hidden=${ifDefined(
+                                      this.appliedLabel ? undefined : 'true'
+                                  )}
+                              >
+                                  ${this.label}
+                              </span>
+                          `
+                        : nothing}
+                </slot>
+            </slot>
+        `;
+    }
+
     protected override render(): TemplateResult {
         return html`
             ${this.renderFieldLabel()} ${super.render()}
         `;
     }
 
+    /**
+     * adds a deprecation warning if the "label" slot is used
+     * @deprecated
+     */
+    protected handleSlottedLabelSlotchange(): void {
+        if (this.getSlotContentPresence('[slot="label]')) {
+            window.__swc.warn(
+                this,
+                `The <${this.localName}> element's "label" slot has been deprecated. \nTo privide a visible field label, use the "field-label" slot instead. \nTo provide visible placeholder text, use the "placeholder" slot instead.`,
+                'https://opensource.adobe.com/spectrum-web-components/components/picker/',
+                { level: 'deprecation' }
+            );
+        }
+    }
+
     protected override handleKeydown = (event: KeyboardEvent): void => {
         const { key } = event;
         const handledKeys = [

From 56e2e3807ee15a121cf70b94e03a9c9cd9cfb48e Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 16 Oct 2025 12:52:48 -0400
Subject: [PATCH 37/39] docs(textfield): documented default label slot

---
 packages/textfield/src/Textfield.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index c81b85fab90..5bd1e795d0b 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -41,6 +41,7 @@ const textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;
 export type TextfieldType = (typeof textfieldTypes)[number];
 
 /**
+ * @slot default - the visual label for the field
  * @fires input - The value of the element has changed.
  * @fires change - An alteration to the value of the element has been committed by the user.
  */

From c7561a82fc97ce835209351f6eab3ed97cbc36ec Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 16 Oct 2025 13:30:54 -0400
Subject: [PATCH 38/39] fix(picker): added field label styles

---
 packages/field-label/src/FieldLabelMixin.ts | 4 ++++
 packages/picker/src/Picker.ts               | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 106075c6969..5c11ff0227b 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -29,6 +29,7 @@ import { ObserveSlotText } from '@spectrum-web-components/shared';
 type Constructor<T> = new (...args: any[]) => T;
 
 export declare class FieldLabelMixinInterface {
+    styles: CSSResultArray;
     disabled: boolean;
     required: boolean;
     sideAligned: 'start' | 'end';
@@ -52,6 +53,9 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         slotName,
         excludedSelectors
     ) {
+        public static get labelStyles(): CSSResultArray {
+            return [styles, asteriskIconStyles];
+        }
         public static get styles(): CSSResultArray {
             return [styles, asteriskIconStyles];
         }
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 6da6930e828..2d6ce8a8fb2 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -982,7 +982,12 @@ export class Picker extends ObserveSlotPresence(
     ['[slot="placeholder"]']
 ) {
     public static override get styles(): CSSResultArray {
-        return [pickerStyles, chevronStyles];
+        const superStyles = Array.isArray(super.styles)
+            ? super.styles
+            : super.styles
+              ? [super.styles]
+              : [];
+        return [...superStyles, pickerStyles, chevronStyles];
     }
 
     protected override get containerStyles(): StyleInfo {

From 287fe7bcb1e1a16d9b532c4e9c1dda4c7c5b09cd Mon Sep 17 00:00:00 2001
From: Nikki Massaro <massaro@adobe.com>
Date: Thu, 16 Oct 2025 15:13:44 -0400
Subject: [PATCH 39/39] fix(picker): fixes test errors

---
 packages/field-label/src/FieldLabelMixin.ts | 4 ----
 packages/picker/src/Picker.ts               | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/field-label/src/FieldLabelMixin.ts b/packages/field-label/src/FieldLabelMixin.ts
index 5c11ff0227b..106075c6969 100644
--- a/packages/field-label/src/FieldLabelMixin.ts
+++ b/packages/field-label/src/FieldLabelMixin.ts
@@ -29,7 +29,6 @@ import { ObserveSlotText } from '@spectrum-web-components/shared';
 type Constructor<T> = new (...args: any[]) => T;
 
 export declare class FieldLabelMixinInterface {
-    styles: CSSResultArray;
     disabled: boolean;
     required: boolean;
     sideAligned: 'start' | 'end';
@@ -53,9 +52,6 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         slotName,
         excludedSelectors
     ) {
-        public static get labelStyles(): CSSResultArray {
-            return [styles, asteriskIconStyles];
-        }
         public static get styles(): CSSResultArray {
             return [styles, asteriskIconStyles];
         }
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 2d6ce8a8fb2..05a0dd05b11 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -979,7 +979,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
  */
 export class Picker extends ObserveSlotPresence(
     SizedMixin(FieldLabelMixin(PickerBase, 'field-label')),
-    ['[slot="placeholder"]']
+    ['[slot="placeholder"], [slot="field-label"]']
 ) {
     public static override get styles(): CSSResultArray {
         const superStyles = Array.isArray(super.styles)