From ede1f0725d44ea207f117adb02266a110796b3e4 Mon Sep 17 00:00:00 2001
From: Steve Matney <steve.matney@gmail.com>
Date: Tue, 30 Dec 2025 10:13:28 -0700
Subject: [PATCH] Ensuring styles apply for input labels when using
 'slot="label"' (#1757)

* Ensuring styles apply for input labels when using 'slot="label"'

* Using 'has-slotted' class for codebase consistency

* Fleshing out 'has-slotted' label class to relevant form elements

* Ensuring label line height uses the correct token; removing unrelated PR changes

* Using 'has-label' class instead of 'has-slotted' for labels; applying it with all label content
---
 .../components/color-picker/color-picker.ts   |  9 +++++++-
 .../src/components/input/input.test.ts        | 21 +++++++++++++++++++
 .../webawesome/src/components/input/input.ts  | 10 ++++++++-
 .../src/components/radio-group/radio-group.ts |  5 ++++-
 .../src/components/select/select.ts           |  5 ++++-
 .../src/components/slider/slider.ts           |  2 +-
 .../src/components/textarea/textarea.ts       | 10 ++++++++-
 .../styles/component/form-control.styles.ts   |  4 ++--
 8 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts
index ce897d69e..2d1032fd7 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -1277,7 +1277,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         })}
         part="trigger-container form-control"
       >
-        <div part="form-control-label" class="label" id="form-control-label">
+        <div
+          part="form-control-label"
+          class=${classMap({
+            label: true,
+            'has-label': hasLabel,
+          })}
+          id="form-control-label"
+        >
           <slot name="label">${this.label}</slot>
         </div>
 
diff --git a/packages/webawesome/src/components/input/input.test.ts b/packages/webawesome/src/components/input/input.test.ts
index e39f05b09..f8bb94cfd 100644
--- a/packages/webawesome/src/components/input/input.test.ts
+++ b/packages/webawesome/src/components/input/input.test.ts
@@ -48,6 +48,27 @@ describe('<wa-input>', () => {
         expect(input.title).to.equal('Test');
       });
 
+      it('should have label with "has-label" class if label has a slotted element', async () => {
+        const el = await fixture<WaInput>(html` <wa-input><span slot="label">Name</span></wa-input> `);
+        await el.updateComplete;
+        const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
+        expect(label.classList.contains('has-label')).to.equal(true);
+      });
+
+      it('should have label with "has-label" class if label is provided as an attribute', async () => {
+        const el = await fixture<WaInput>(html` <wa-input label="Name"></wa-input> `);
+        await el.updateComplete;
+        const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
+        expect(label.classList.contains('has-label')).to.equal(true);
+      });
+
+      it('should not have "has-label" class on label if no label content is provided', async () => {
+        const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
+        await el.updateComplete;
+        const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
+        expect(label.classList.contains('has-label')).to.equal(false);
+      });
+
       it('should be disabled with the disabled attribute', async () => {
         const el = await fixture<WaInput>(html` <wa-input disabled></wa-input> `);
         await el.updateComplete;
diff --git a/packages/webawesome/src/components/input/input.ts b/packages/webawesome/src/components/input/input.ts
index 930b85ee7..a7f9a11da 100644
--- a/packages/webawesome/src/components/input/input.ts
+++ b/packages/webawesome/src/components/input/input.ts
@@ -342,7 +342,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
       (typeof this.value === 'number' || (this.value && this.value.length > 0));
 
     return html`
-      <label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
+      <label
+        part="form-control-label label"
+        class=${classMap({
+          label: true,
+          'has-label': hasLabel,
+        })}
+        for="input"
+        aria-hidden=${hasLabel ? 'false' : 'true'}
+      >
         <slot name="label">${this.label}</slot>
       </label>
 
diff --git a/packages/webawesome/src/components/radio-group/radio-group.ts b/packages/webawesome/src/components/radio-group/radio-group.ts
index b202a226d..3b914fd3d 100644
--- a/packages/webawesome/src/components/radio-group/radio-group.ts
+++ b/packages/webawesome/src/components/radio-group/radio-group.ts
@@ -352,7 +352,10 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
         <label
           part="form-control-label"
           id="label"
-          class="label"
+          class=${classMap({
+            label: true,
+            'has-label': hasLabel,
+          })}
           aria-hidden=${hasLabel ? 'false' : 'true'}
           @click=${this.handleLabelClick}
         >
diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts
index 46d1b8cf6..d89b72e99 100644
--- a/packages/webawesome/src/components/select/select.ts
+++ b/packages/webawesome/src/components/select/select.ts
@@ -938,7 +938,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
         <label
           id="label"
           part="form-control-label label"
-          class="label"
+          class=${classMap({
+            label: true,
+            'has-label': hasLabel,
+          })}
           aria-hidden=${hasLabel ? 'false' : 'true'}
           @click=${this.handleLabelClick}
         >
diff --git a/packages/webawesome/src/components/slider/slider.ts b/packages/webawesome/src/components/slider/slider.ts
index dab5b6eb7..4e34d9ebd 100644
--- a/packages/webawesome/src/components/slider/slider.ts
+++ b/packages/webawesome/src/components/slider/slider.ts
@@ -807,7 +807,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
         id="label"
         part="label"
         for=${this.isRange ? 'thumb-min' : 'text-box'}
-        class=${classMap({ vh: !hasLabel })}
+        class=${classMap({ vh: !hasLabel, 'has-label': hasLabel })}
         @pointerdown=${this.handleLabelPointerDown}
       >
         <slot name="label">${this.label}</slot>
diff --git a/packages/webawesome/src/components/textarea/textarea.ts b/packages/webawesome/src/components/textarea/textarea.ts
index 3e7870f7d..31b6d2cd3 100644
--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/packages/webawesome/src/components/textarea/textarea.ts
@@ -331,7 +331,15 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
     const hasHint = this.hint ? true : !!hasHintSlot;
 
     return html`
-      <label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
+      <label
+        part="form-control-label label"
+        class=${classMap({
+          label: true,
+          'has-label': hasLabel,
+        })}
+        for="input"
+        aria-hidden=${hasLabel ? 'false' : 'true'}
+      >
         <slot name="label">${this.label}</slot>
       </label>
 
diff --git a/packages/webawesome/src/styles/component/form-control.styles.ts b/packages/webawesome/src/styles/component/form-control.styles.ts
index 461d732e5..05f9f64f8 100644
--- a/packages/webawesome/src/styles/component/form-control.styles.ts
+++ b/packages/webawesome/src/styles/component/form-control.styles.ts
@@ -7,7 +7,8 @@ export default css`
   }
 
   /* Label */
-  :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
+  :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)),
+  :is([part~='form-control-label'], [part~='label']).has-label {
     display: inline-flex;
     color: var(--wa-form-control-label-color);
     font-weight: var(--wa-form-control-label-font-weight);
@@ -29,7 +30,6 @@ export default css`
     line-height: var(--wa-form-control-hint-line-height);
     margin-block-start: 0.5em;
     font-size: var(--wa-font-size-smaller);
-    line-height: var(--wa-form-control-label-line-height);
 
     &:not(.has-slotted) {
       display: none;