From 5921f3eeaacca7cc6a6a25a9ff34e76ebe746706 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 22 May 2025 13:40:19 -0400
Subject: [PATCH] Button slot detection (#976)

* reimplement slot detection; remove broken visually hidden logic

* update example now that wa-visually-hidden is not a component

* cleanup
---
 docs/docs/components/button-group.md |  4 ++--
 src/components/button/button.ts      | 18 ++++++------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md
index 56723466c..d2269f355 100644
--- a/docs/docs/components/button-group.md
+++ b/docs/docs/components/button-group.md
@@ -186,8 +186,8 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
 <wa-button-group label="Example Button Group">
   <wa-button variant="brand">Save</wa-button>
   <wa-dropdown placement="bottom-end">
-    <wa-button slot="trigger" variant="brand" caret>
-      <span class="wa-visually-hidden">More options</span>
+    <wa-button slot="trigger" variant="brand">
+      <wa-icon name="chevron-down" label="More options"></wa-icon>
     </wa-button>
     <wa-menu>
       <wa-menu-item>Save</wa-menu-item>
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 75a5e59d0..574ed0b9a 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -3,6 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, literal } from 'lit/static-html.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
+import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
@@ -61,11 +62,11 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   }
 
   assumeInteractionOn = ['click'];
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
   private readonly localize = new LocalizeController(this);
 
   @query('.wa-button') button: HTMLButtonElement | HTMLLinkElement;
 
-  @state() visuallyHiddenLabel = false;
   @state() invalid = false;
   @property() title = ''; // make reactive to pass through
 
@@ -184,15 +185,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
     this.dispatchEvent(new WaInvalidEvent());
   }
 
-  private handleLabelSlotChange(event: Event) {
-    // If the only thing slotted in is a visually hidden element, we consider it a visually hidden label and apply a
-    // class so we can adjust styles accordingly.
-    const elements = (event.target as HTMLSlotElement).assignedElements({ flatten: true });
-    if (elements.length === 1 && elements[0].localName === 'wa-visually-hidden') {
-      this.visuallyHiddenLabel = true;
-    }
-  }
-
   private isButton() {
     return this.href ? false : true;
   }
@@ -243,7 +235,9 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
           disabled: this.disabled,
           loading: this.loading,
           rtl: this.localize.dir() === 'rtl',
-          'visually-hidden-label': this.visuallyHiddenLabel,
+          'has-label': this.hasSlotController.test('[default]'),
+          'has-prefix': this.hasSlotController.test('prefix'),
+          'has-suffix': this.hasSlotController.test('suffix'),
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}
@@ -261,7 +255,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         @click=${this.handleClick}
       >
         <slot name="prefix" part="prefix" class="prefix"></slot>
-        <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
+        <slot part="label" class="label"></slot>
         <slot name="suffix" part="suffix" class="suffix"></slot>
         ${
           this.caret