fix(field-label): corrected linting issues

Author: nikkimk

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": {

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;
 };

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 = [

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