From 145c5b7c5a050b22c6e4d329264c650cb03c4c1a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 1 Aug 2024 13:35:19 -0400
Subject: [PATCH] backport 2063

---
 docs/docs/components/select.md         | 27 ++++++++++++++++++++++++++
 docs/docs/resources/changelog.md       |  2 +-
 src/components/avatar/avatar.ts        |  2 +-
 src/components/dropdown/dropdown.ts    |  2 +-
 src/components/select/select.styles.ts |  8 ++++++++
 src/components/select/select.ts        |  6 +++++-
 6 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md
index f08a44994..2894d9484 100644
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -224,6 +224,33 @@ Use the `prefix` slot to prepend an icon to the control.
 </wa-select>
 ```
 
+### Suffix Icons
+
+Use the `suffix` slot to append an icon to the control.
+
+```html {.example}
+<wa-select placeholder="Small" size="small" clearable>
+  <wa-icon name="house" slot="suffix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<br />
+<wa-select placeholder="Medium" size="medium" clearable>
+  <wa-icon name="house" slot="suffix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+<br />
+<wa-select placeholder="Large" size="large" clearable>
+  <wa-icon name="house" slot="suffix"></wa-icon>
+  <wa-option value="option-1">Option 1</wa-option>
+  <wa-option value="option-2">Option 2</wa-option>
+  <wa-option value="option-3">Option 3</wa-option>
+</wa-select>
+```
+
 ### Custom Tags
 
 When multiple options can be selected, you can provide custom tags by passing a function to the `getTag` property. Your function can return a string of HTML, a <a href="https://lit.dev/docs/templates/overview/">Lit Template</a>, or an [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). The `getTag()` function will be called for each option. The first argument is an `<wa-option>` element and the second argument is the tag's index (its position in the tag list).
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 5e4150711..e742141c6 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -35,7 +35,7 @@ Here's a list of some of the things that have changed since Shoelace v2. For que
 - Added the `active` attribute to `<wa-tab-group>`
 - Added an easier way to close dialogs by applying `data-dialog="close"` to any button in the dialog
 - Added an easier way to close drawers by applying `data-dialog="close"` to any button in the drawer
-- Added the `--show-duration` and `--hide-duration` custom properties to `<wa-details>`, `<wa-dialog>`, `<wa-drawer>`, `<sl-tree-item>`, and `<wa-popup>`
+- Added the `--show-duration` and `--hide-duration` custom properties to `<wa-details>`, `<wa-dialog>`, `<wa-drawer>`, `<wa-tree-item>`, and `<wa-popup>`
 - Added visible labels to `<wa-color-picker>`
 - Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index b962bf778..0b09c3f8d 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -19,7 +19,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot icon - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
  *
- * @event sl-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some
+ * @event wa-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some
  * unknown cause.
  *
  * @csspart base - The component's base wrapper.
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 1cc9edefb..1d41d6128 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -38,7 +38,7 @@ import type WaPopup from '../popup/popup.js';
  *
  * @cssproperty --box-shadow - The shadow effects around the dropdown's edges.
  *
- * @csspart base - The component's base wrapper, an `<sl-popup>` element.
+ * @csspart base - The component's base wrapper, a `<wa-popup>` element.
  * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
  * @csspart trigger - The container that wraps the trigger.
  * @csspart panel - The panel that gets shown when the dropdown is open.
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index c5ba74522..33d53e7d9 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -242,6 +242,14 @@ export default css`
     color: var(--wa-color-neutral-on-quiet);
   }
 
+  /* Suffix */
+  .select__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--wa-form-control-placeholder-color);
+  }
+
   /* Clear button */
   .select__clear {
     display: inline-flex;
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 4e764c36d..a92c1003a 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -43,6 +43,7 @@ import type WaPopup from '../popup/popup.js';
  * @slot - The listbox options. Must be `<wa-option>` elements. You can use `<wa-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -62,8 +63,9 @@ import type WaPopup from '../popup/popup.js';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -888,6 +890,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
                   `
                 : ''}
 
+              <slot name="suffix" part="suffix" class="select__suffix"></slot>
+
               <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
                 <wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
               </slot>