Add start and end slots to <wa-badge>

packages/webawesome/docs/docs/components/badge.md

@@ -116,6 +116,26 @@ Use the `attention` attribute to draw attention to the badge with a subtle anima
 </style>
 ```
 
+### Start & End Decorations
+
+Use the `start` and `end` slots to add presentational elements like `<wa-icon>` alongside the badge's label.
+
+```html {.example}
+<wa-badge>
+  <wa-icon slot="start" name="acorn"></wa-icon>
+  Start
+</wa-badge>
+<wa-badge>
+  <wa-icon slot="end" name="tree-deciduous"></wa-icon>
+  End
+</wa-badge>
+<wa-badge>
+  <wa-icon slot="start" name="cow"></wa-icon>
+  <wa-icon slot="end" name="ufo-beam"></wa-icon>
+  Both
+</wa-badge>
+```
+
 ### With Buttons
 
 One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.

packages/webawesome/docs/docs/resources/changelog.md

@@ -13,6 +13,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 <small>TBD</small>
 
 - Added `wa-button` class for styling `<a>` elements as buttons [pr:2040]
+- Added `start` and `end` slots to `<wa-badge>` [pr:2082]
 - Fixed a bug `<wa-color-picker>` that prevented it from flipping horizontally when position to the right of the viewport. [pr:2024]
 - Fixed a bug by adding `color: inherit` to the `<wa-dialog>` and `<wa-drawer>` styles so they inherit the text color from the document context rather than the browser default. [pr:2064]
 - Fixed a bug that caused 0ms animations to not fire correctly in the internal `animateWithClass()` function [pr#2068]

packages/webawesome/src/components/badge/badge.styles.ts

@@ -12,6 +12,7 @@ export default css`
     font-size: max(var(--wa-font-size-2xs), 0.75em);
     font-weight: var(--wa-font-weight-semibold);
     line-height: 1;
+    vertical-align: middle;
     white-space: nowrap;
     background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
     border-color: transparent;
@@ -99,10 +100,12 @@ export default css`
     }
   }
 
-  ::slotted(wa-icon) {
-    margin-inline-end: var(--wa-space-2xs, 0.25em);
-    opacity: 90%;
-    line-height: 1;
-    height: 0.85em;
+  /* Slots */
+  slot[name='start']::slotted(*) {
+    margin-inline-end: 0.375em;
+  }
+
+  slot[name='end']::slotted(*) {
+    margin-inline-start: 0.375em;
   }
 `;

packages/webawesome/src/components/badge/badge.ts

@@ -11,8 +11,12 @@ import styles from './badge.styles.js';
  * @since 2.0
  *
  * @slot - The badge's content.
+ * @slot start - An element, such as `<wa-icon>`, placed before the label.
+ * @slot end - An element, such as `<wa-icon>`, placed after the label.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart start - The container that wraps the `start` slot.
+ * @csspart end - The container that wraps the `end` slot.
  *
  * @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention="pulse"`.
  *
@@ -34,7 +38,13 @@ export default class WaBadge extends WebAwesomeElement {
   @property({ reflect: true }) attention: 'none' | 'pulse' | 'bounce' = 'none';
 
   render() {
-    return html` <slot part="base" role="status"></slot>`;
+    return html`
+      <slot name="start" part="start"></slot>
+
+      <slot part="base" role="status"></slot>
+
+      <slot name="end" part="end"></slot>
+    `;
   }
 }