From 2a52b2766f0438258a662930c860e50e08321772 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Mon, 14 Jul 2025 17:00:35 -0400
Subject: [PATCH] fix badge pulsing (#1173)

* fix badge pulsing

* use and document `--pulse-color`

* Add changelog entry

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
---
 .../docs/docs/resources/changelog.md           |  5 +++++
 .../webawesome/src/components/badge/badge.css  | 18 ++++++++++--------
 .../webawesome/src/components/badge/badge.ts   |  6 ++++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 4978b969c..38168db5a 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,6 +10,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+### Bug Fixes and Improvements {data-no-outline}
+
+- Fixed a bug in `<wa-badge>` where `appearance="pulse"` was not working as expected [pr:1173]
+- Fixed a missing TypeScript type for `<wa-badge>` for its `attention` property missing `bounce` value. [pr:1173]
+- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [pr:1174]
 - Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
 - Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
 
diff --git a/packages/webawesome/src/components/badge/badge.css b/packages/webawesome/src/components/badge/badge.css
index 34e244ee6..59887e6fb 100644
--- a/packages/webawesome/src/components/badge/badge.css
+++ b/packages/webawesome/src/components/badge/badge.css
@@ -1,4 +1,6 @@
 :host {
+  --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,29 +21,31 @@
 }
 
 /* Appearance modifiers */
-:host([appearance~='plain']) {
-  color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
-  background-color: transparent;
-  border-color: transparent;
-}
-
 :host([appearance~='outlined']) {
+  --pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
+
   color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
   background-color: transparent;
   border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
 }
 
 :host([appearance~='filled']) {
+  --pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
+
   color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
   background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
   border-color: transparent;
 }
 
 :host([appearance~='filled'][appearance~='outlined']) {
+  --pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
+
   border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
 }
 
 :host([appearance~='accent']) {
+  --pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+
   color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
   background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
   border-color: transparent;
@@ -54,8 +58,6 @@
 
 /* Pulse attention */
 :host([attention='pulse']) {
-  --pulse-color: var(--background-color);
-
   animation: pulse 1.5s infinite;
 }
 
diff --git a/packages/webawesome/src/components/badge/badge.ts b/packages/webawesome/src/components/badge/badge.ts
index 078a72c84..467120c6a 100644
--- a/packages/webawesome/src/components/badge/badge.ts
+++ b/packages/webawesome/src/components/badge/badge.ts
@@ -14,6 +14,8 @@ import styles from './badge.css';
  *
  * @csspart base - The component's base wrapper.
  *
+ * @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention="pulse"`.
+ *
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
@@ -28,8 +30,8 @@ export default class WaBadge extends WebAwesomeElement {
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
-  /** Makes the badge pulsate to draw attention. */
-  @property({ reflect: true }) attention: 'none' | 'pulse' = 'none';
+  /** Adds an animation to draw attention to the badge. */
+  @property({ reflect: true }) attention: 'none' | 'pulse' | 'bounce' = 'none';
 
   render() {
     return html` <slot part="base" role="status"></slot>`;