From 10cc9bdc682553b1b336ef2d0ef1012009ab41a8 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Wed, 11 Jun 2025 11:36:50 -0400
Subject: [PATCH] Change `prefix` and `suffix` to `start` and `end` (#1047)

* change `prefix` > `start` and `suffix` > `end` (breadcrumb item)

* fix formatting

* change `prefix` > `start` and `suffix` > `end` (button)

* change `prefix` > `start` and `suffix` > `end` (input)

* change `prefix` > `start` and `suffix` > `end` (select)

* replace leftover `prefix` instances with `start`

* replace leftover `suffix` instances with `end`

* update changelog

* remove `slot="start|end"` examples from unsupported components
---
 packages/webawesome/docs/_includes/base.njk   |  4 +-
 .../docs/_includes/color-scheme-selector.njk  | 12 +--
 .../docs/_includes/preset-theme-selector.njk  |  2 +-
 packages/webawesome/docs/_includes/search.njk |  2 +-
 .../docs/_includes/theme-showcase.njk         | 10 +--
 .../webawesome/docs/_layouts/overview.njk     |  2 +-
 packages/webawesome/docs/_layouts/palette.njk |  2 +-
 packages/webawesome/docs/_layouts/theme.njk   |  8 +-
 .../docs/assets/examples/page/demo-1.html     |  2 +-
 .../docs/assets/examples/page/demo-2.html     |  4 +-
 .../docs/assets/styles/theme-headers.css      |  4 +-
 .../webawesome/docs/docs/components/badge.md  | 13 ----
 .../docs/docs/components/breadcrumb-item.md   |  2 +-
 .../docs/docs/components/breadcrumb.md        | 34 +++------
 .../docs/docs/components/button-group.md      | 10 +--
 .../webawesome/docs/docs/components/button.md | 28 +++----
 .../docs/docs/components/dropdown.md          |  2 +-
 .../webawesome/docs/docs/components/input.md  | 16 ++--
 .../webawesome/docs/docs/components/option.md | 16 ++--
 .../docs/docs/components/popover.md           |  2 +-
 .../docs/docs/components/progress-bar.md      |  4 +-
 .../docs/docs/components/progress-ring.md     | 13 +---
 .../docs/docs/components/qr-code.md           | 30 ++------
 .../webawesome/docs/docs/components/select.md | 48 +++---------
 .../docs/docs/experimental/themer.md          | 76 +++++++++----------
 .../docs/docs/resources/changelog.md          |  6 ++
 .../docs/docs/resources/community.md          |  6 +-
 .../docs/docs/themes/demo/index.njk           |  2 +-
 .../docs/docs/themes/edit/index.njk           |  4 +-
 .../docs/docs/themes/preview/content.njk      | 14 ++--
 packages/webawesome/docs/docs/usage.md        |  4 +-
 .../webawesome/docs/docs/utilities/flank.md   |  2 +-
 .../webawesome/docs/docs/utilities/stack.md   |  4 +-
 packages/webawesome/docs/index.md             |  4 +-
 .../breadcrumb-item/breadcrumb-item.css       | 12 +--
 .../breadcrumb-item/breadcrumb-item.test.ts   | 16 ++--
 .../breadcrumb-item/breadcrumb-item.ts        | 16 ++--
 .../components/breadcrumb/breadcrumb.test.ts  |  8 +-
 .../src/components/button/button.css          | 14 ++--
 .../src/components/button/button.ts           | 18 ++---
 .../components/color-picker/color-picker.ts   | 16 ++--
 .../components/dropdown-item/dropdown-item.ts |  2 +-
 .../webawesome/src/components/input/input.css |  8 +-
 .../webawesome/src/components/input/input.ts  | 12 +--
 .../src/components/option/option.css          |  8 +-
 .../src/components/option/option.ts           | 12 +--
 .../src/components/select/select.css          | 12 +--
 .../src/components/select/select.ts           | 14 ++--
 48 files changed, 247 insertions(+), 313 deletions(-)

diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk
index b826b1cf2..cde008cd5 100644
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -46,9 +46,9 @@
 
           {# Search #}
           <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
-            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+            <wa-icon slot="start" name="magnifying-glass"></wa-icon>
             Search
-            <kbd slot="suffix" class="wa-desktop-only">/</kbd>
+            <kbd slot="end" class="wa-desktop-only">/</kbd>
           </wa-button>
 
           {# Login #}
diff --git a/packages/webawesome/docs/_includes/color-scheme-selector.njk b/packages/webawesome/docs/_includes/color-scheme-selector.njk
index a320fc8d6..55c0e0a33 100644
--- a/packages/webawesome/docs/_includes/color-scheme-selector.njk
+++ b/packages/webawesome/docs/_includes/color-scheme-selector.njk
@@ -1,19 +1,19 @@
 {# Color scheme selector #}
 <wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
-  <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-  <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
+  <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
+  <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
   <wa-option value="light">
-    <wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
+    <wa-icon slot="start" name="sun" variant="regular"></wa-icon>
     Light
   </wa-option>
   <wa-option value="dark">
-    <wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
+    <wa-icon slot="start" name="moon" variant="regular"></wa-icon>
     Dark
   </wa-option>
   <wa-divider></wa-divider>
   <wa-option value="auto">
-    <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
-    <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
+    <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
+    <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
     System
   </wa-option>
 </wa-select>
diff --git a/packages/webawesome/docs/_includes/preset-theme-selector.njk b/packages/webawesome/docs/_includes/preset-theme-selector.njk
index 0a6527d76..e090e2ada 100644
--- a/packages/webawesome/docs/_includes/preset-theme-selector.njk
+++ b/packages/webawesome/docs/_includes/preset-theme-selector.njk
@@ -1,6 +1,6 @@
 {# Preset theme selector #}
 <wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
-  <wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
+  <wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
   {% for theme in collections.theme | sort %}
     <wa-option value="{{ theme.page.fileSlug }}">
       {{ theme.data.title }}
diff --git a/packages/webawesome/docs/_includes/search.njk b/packages/webawesome/docs/_includes/search.njk
index c372a5bf2..4e7d56418 100644
--- a/packages/webawesome/docs/_includes/search.njk
+++ b/packages/webawesome/docs/_includes/search.njk
@@ -24,7 +24,7 @@
           aria-haspopup="listbox"
           aria-activedescendant
         >
-          <wa-icon slot="prefix" name="search"></wa-icon>
+          <wa-icon slot="start" name="search"></wa-icon>
         </wa-input>
       </div>
     </header>
diff --git a/packages/webawesome/docs/_includes/theme-showcase.njk b/packages/webawesome/docs/_includes/theme-showcase.njk
index 551f2e628..dce236527 100644
--- a/packages/webawesome/docs/_includes/theme-showcase.njk
+++ b/packages/webawesome/docs/_includes/theme-showcase.njk
@@ -47,7 +47,7 @@
         </div>
         <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
         <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
+          <wa-icon slot="start" name="shopping-bag"></wa-icon>
           Checkout
         </wa-button>
       </div>
@@ -62,10 +62,10 @@
       <div class="wa-stack">
         <h3 class="wa-heading-m">Sign In</h3>
         <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
+          <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
         </wa-input>
         <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
+          <wa-icon slot="start" name="lock" variant="regular"></wa-icon>
         </wa-input>
         <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
         <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
@@ -244,11 +244,11 @@
       </div>
       <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
         <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="prefix" name="at"></wa-icon>
+          <wa-icon slot="start" name="at"></wa-icon>
           Email
         </wa-button>
         <wa-button appearance="outlined" tabindex="-1">
-          <wa-icon slot="prefix" name="phone"></wa-icon>
+          <wa-icon slot="start" name="phone"></wa-icon>
           Phone
         </wa-button>
       </div>
diff --git a/packages/webawesome/docs/_layouts/overview.njk b/packages/webawesome/docs/_layouts/overview.njk
index f0e201092..fd47f7c1f 100644
--- a/packages/webawesome/docs/_layouts/overview.njk
+++ b/packages/webawesome/docs/_layouts/overview.njk
@@ -8,7 +8,7 @@ layout: page-outline
 
 <div id="block-filter">
   <wa-input type="search" placeholder="Search {{ title }}" with-clear autofocus>
-	<wa-icon slot="prefix" name="search"></wa-icon>
+	<wa-icon slot="start" name="search"></wa-icon>
   </wa-input>
 </div>
 
diff --git a/packages/webawesome/docs/_layouts/palette.njk b/packages/webawesome/docs/_layouts/palette.njk
index ed311a403..d2861590b 100644
--- a/packages/webawesome/docs/_layouts/palette.njk
+++ b/packages/webawesome/docs/_layouts/palette.njk
@@ -72,7 +72,7 @@
    </div>
 
   <wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
-    <wa-icon slot="prefix" name="circle-xmark" variant="regular"></wa-icon>
+    <wa-icon slot="start" name="circle-xmark" variant="regular"></wa-icon>
     Reset
   </wa-button>
 </wa-callout>
diff --git a/packages/webawesome/docs/_layouts/theme.njk b/packages/webawesome/docs/_layouts/theme.njk
index 5ac6bad97..0bdce8f80 100644
--- a/packages/webawesome/docs/_layouts/theme.njk
+++ b/packages/webawesome/docs/_layouts/theme.njk
@@ -24,12 +24,12 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
   <h4 slot="summary" data-no-anchor data-no-outline id="remix">
     <wa-icon name="arrows-rotate"></wa-icon>
     Remix this theme
-    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
+    <wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="end" variant="regular"></wa-icon>
     <wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
   </h4>
 
   <wa-select name="palette" label="Color palette" with-clear v-model="theme.palette">
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
+    <wa-icon name="swatchbook" slot="start" variant="regular"></wa-icon>
     <wa-option v-for="(palette, paletteId) in palettes" :label="palette.title" :value="paletteId === baseTheme.palette ? '' : paletteId">
       <palette-card :palette="paletteId" size="small">
         <template #extra>
@@ -43,7 +43,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
                 :values="hues"></color-select>
 
   <wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" with-clear v-model="theme.colors">
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
+    <wa-icon name="palette" slot="start" variant="regular"></wa-icon>
     <template v-for="(themeMeta, themeId) in themes">
       <wa-option v-if="themeId !== 'custom'" :label="themeMeta.title" :value="themeId === computed.colors ? '' : themeId">
         <theme-card :theme="themeId" type="colors" :rest="{base: computed.base, palette: computed.palette, brand: computed.brand}" size="small">
@@ -56,7 +56,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
   </wa-select>
 
   <wa-select name="typography" label="Typography from…" with-clear v-model="theme.typography">
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
+    <wa-icon name="font-case" slot="start"></wa-icon>
 
     <wa-option v-for="(themeMeta, themeId) in themes" :label="themeMeta.title" :value="themeId === theme.base ? '' : themeId">
       <fonts-card :theme="themeId" size="small">
diff --git a/packages/webawesome/docs/assets/examples/page/demo-1.html b/packages/webawesome/docs/assets/examples/page/demo-1.html
index 7a4688b34..8fc27212c 100644
--- a/packages/webawesome/docs/assets/examples/page/demo-1.html
+++ b/packages/webawesome/docs/assets/examples/page/demo-1.html
@@ -42,7 +42,7 @@
           </wa-breadcrumb>
         </div>
         <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem">
-          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
         </wa-input>
       </nav>
       <nav slot="navigation-header">
diff --git a/packages/webawesome/docs/assets/examples/page/demo-2.html b/packages/webawesome/docs/assets/examples/page/demo-2.html
index 56d29494d..40b8b81ba 100644
--- a/packages/webawesome/docs/assets/examples/page/demo-2.html
+++ b/packages/webawesome/docs/assets/examples/page/demo-2.html
@@ -19,7 +19,7 @@
           <span class="wa-heading-m">radiogaga</span>
         </div>
         <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%">
-          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
         </wa-input>
         <div class="wa-cluster">
           <wa-button appearance="outlined">Log In</wa-button>
@@ -28,7 +28,7 @@
       </header>
       <div slot="navigation-header" class="wa-split">
         <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%" class="wa-mobile-only">
-          <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+          <wa-icon slot="start" name="magnifying-glass"></wa-icon>
         </wa-input>
         <div class="wa-split">
           <h2 class="wa-heading-s">For You</h2>
diff --git a/packages/webawesome/docs/assets/styles/theme-headers.css b/packages/webawesome/docs/assets/styles/theme-headers.css
index 168e0811a..42b9ce014 100644
--- a/packages/webawesome/docs/assets/styles/theme-headers.css
+++ b/packages/webawesome/docs/assets/styles/theme-headers.css
@@ -185,11 +185,11 @@ html.wa-theme-brutalist .preview-container {
     text-align: right;
   }
 
-  .product-card wa-button::part(prefix) {
+  .product-card wa-button::part(start) {
     padding-inline-start: var(--wa-space-xs);
   }
 
-  .product-card wa-button::part(suffix) {
+  .product-card wa-button::part(end) {
     padding-inline-end: var(--wa-space-xs);
   }
 
diff --git a/packages/webawesome/docs/docs/components/badge.md b/packages/webawesome/docs/docs/components/badge.md
index 4f3895a2f..135366d98 100644
--- a/packages/webawesome/docs/docs/components/badge.md
+++ b/packages/webawesome/docs/docs/components/badge.md
@@ -141,16 +141,3 @@ One of the most common use cases for badges is attaching them to buttons. To mak
   <wa-badge variant="danger" pill>6</wa-badge>
 </wa-button>
 ```
-
-### With Menu Items
-
-When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
-
-```html {.example}
-<wa-dropdown style="max-width: 240px;">
-  <wa-button slot="trigger" caret>Messages</wa-button>
-  <h3>Messages</h3>
-  <wa-dropdown-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-dropdown-item>
-  <wa-dropdown-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-dropdown-item>
-</wa-dropdown>
-```
diff --git a/packages/webawesome/docs/docs/components/breadcrumb-item.md b/packages/webawesome/docs/docs/components/breadcrumb-item.md
index 559b34451..aa23f85a2 100644
--- a/packages/webawesome/docs/docs/components/breadcrumb-item.md
+++ b/packages/webawesome/docs/docs/components/breadcrumb-item.md
@@ -8,7 +8,7 @@ parent: breadcrumb
 ```html {.example}
 <wa-breadcrumb>
   <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="house" variant="solid"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
diff --git a/packages/webawesome/docs/docs/components/breadcrumb.md b/packages/webawesome/docs/docs/components/breadcrumb.md
index 65db6ff40..5fad21c87 100644
--- a/packages/webawesome/docs/docs/components/breadcrumb.md
+++ b/packages/webawesome/docs/docs/components/breadcrumb.md
@@ -36,32 +36,20 @@ For websites, you'll probably want to use links instead. You can make any breadc
 </wa-breadcrumb>
 ```
 
-### Prefixes
+### Start & End Decorations
 
-Use the `prefix` slot to add content before any breadcrumb item.
+Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to any breadcrumb item.
 
 ```html {.example}
 <wa-breadcrumb>
   <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="house"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
-### Suffixes
-
-Use the `suffix` slot to add content after any breadcrumb item.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
   <wa-breadcrumb-item>
-    Security
-    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
+    <wa-icon slot="end" name="tree-palm"></wa-icon>
+    Traveling
   </wa-breadcrumb-item>
 </wa-breadcrumb>
 ```
@@ -99,7 +87,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 
 ### Custom Colors
 
-Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
+Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Content in the `start`, `end`, and `separator` slots can be styled using CSS parts.
 
 ```html {.example}
 <style>
@@ -112,14 +100,14 @@ Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffi
   .redcrumbs wa-breadcrumb-item::part(separator) {
     color: pink;
   }
-  .redcrumbs wa-breadcrumb-item::part(prefix),
-  .redcrumbs wa-breadcrumb-item::part(suffix) {
+  .redcrumbs wa-breadcrumb-item::part(start),
+  .redcrumbs wa-breadcrumb-item::part(end) {
     color: currentColor;
   }
 </style>
 <wa-breadcrumb class="redcrumbs">
   <wa-breadcrumb-item>
-    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="house" variant="solid"></wa-icon>
     Home
   </wa-breadcrumb-item>
   <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
@@ -149,7 +137,7 @@ Dropdown menus can be placed in the default slot to provide additional options.
 </wa-breadcrumb>
 ```
 
-Alternatively, you can place dropdown menus in a prefix or suffix slot.
+Alternatively, you can place dropdown menus in a `start` or `end` slot.
 
 ```html {.example}
 <wa-breadcrumb>
@@ -158,7 +146,7 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
   <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
   <wa-breadcrumb-item>
     Web Design
-    <wa-dropdown slot="suffix">
+    <wa-dropdown slot="end">
       <wa-button slot="trigger" size="small" appearance="filled" pill>
         <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
diff --git a/packages/webawesome/docs/docs/components/button-group.md b/packages/webawesome/docs/docs/components/button-group.md
index 5b800018c..afe4070a2 100644
--- a/packages/webawesome/docs/docs/components/button-group.md
+++ b/packages/webawesome/docs/docs/components/button-group.md
@@ -50,26 +50,26 @@ and it will override the inherited size,
 it is rarely a good idea to mix sizes within the same button group.
 :::
 
-### Vertical button groups
+### Vertical Button Groups
 
 Set the `orientation` attribute to `vertical` to make a vertical button group.
 
 ```html {.example}
 <wa-button-group orientation="vertical" label="Options" style="max-width: 120px;">
   <wa-button>
-    <wa-icon slot="prefix" name="plus"></wa-icon>
+    <wa-icon slot="start" name="plus"></wa-icon>
     New
   </wa-button>
   <wa-button>
-    <wa-icon slot="prefix" name="folder-open"></wa-icon>
+    <wa-icon slot="start" name="folder-open"></wa-icon>
     Open
   </wa-button>
   <wa-button>
-    <wa-icon slot="prefix" name="save"></wa-icon>
+    <wa-icon slot="start" name="save"></wa-icon>
     Save
   </wa-button>
   <wa-button>
-    <wa-icon slot="prefix" name="print"></wa-icon>
+    <wa-icon slot="start" name="print"></wa-icon>
     Print
   </wa-button>
 </wa-button-group>
diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index 5cabbf00a..8866958e0 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -126,60 +126,60 @@ As expected, buttons can be given a custom width by setting the `width` CSS prop
 <wa-button size="large" style="width: 100%;">Large</wa-button>
 ```
 
-### Prefix and Suffix Icons
+### Start & End Decorations
 
-Use the `prefix` and `suffix` slots to add icons.
+Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the button label.
 
 ```html {.example}
 <wa-button size="small">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="gear"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
+  <wa-icon slot="end" name="undo"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="link"></wa-icon>
+  <wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button>
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="gear"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
+  <wa-icon slot="end" name="undo"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="link"></wa-icon>
+  <wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="gear"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
+  <wa-icon slot="end" name="undo"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="link"></wa-icon>
+  <wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
   Open
 </wa-button>
 ```
diff --git a/packages/webawesome/docs/docs/components/dropdown.md b/packages/webawesome/docs/docs/components/dropdown.md
index 18f337dd6..4c6cee2f0 100644
--- a/packages/webawesome/docs/docs/components/dropdown.md
+++ b/packages/webawesome/docs/docs/components/dropdown.md
@@ -240,7 +240,7 @@ The preferred placement of the dropdown can be set with the `placement` attribut
 <wa-dropdown placement="right-start">
   <wa-button slot="trigger">
     File formats
-    <wa-icon slot="suffix" name="chevron-right"></wa-icon>
+    <wa-icon slot="end" name="chevron-right"></wa-icon>
   </wa-button>
 
   <wa-dropdown-item value="pdf">PDF Document</wa-dropdown-item>
diff --git a/packages/webawesome/docs/docs/components/input.md b/packages/webawesome/docs/docs/components/input.md
index b716c881b..61ab7dc3f 100644
--- a/packages/webawesome/docs/docs/components/input.md
+++ b/packages/webawesome/docs/docs/components/input.md
@@ -109,24 +109,24 @@ The `type` attribute controls the type of input the browser renders.
 <wa-input type="date" placeholder="Date"></wa-input>
 ```
 
-### Prefix & Suffix Icons
+### Start & End Decorations
 
-Use the `prefix` and `suffix` slots to add icons.
+Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the input.
 
 ```html {.example}
 <wa-input placeholder="Small" size="small">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
+  <wa-icon name="house" slot="start"></wa-icon>
+  <wa-icon name="comment" slot="end"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Medium" size="medium">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
+  <wa-icon name="house" slot="start"></wa-icon>
+  <wa-icon name="comment" slot="end"></wa-icon>
 </wa-input>
 <br />
 <wa-input placeholder="Large" size="large">
-  <wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
-  <wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
+  <wa-icon name="house" slot="start"></wa-icon>
+  <wa-icon name="comment" slot="end"></wa-icon>
 </wa-input>
 ```
 
diff --git a/packages/webawesome/docs/docs/components/option.md b/packages/webawesome/docs/docs/components/option.md
index 412fd9041..84868b736 100644
--- a/packages/webawesome/docs/docs/components/option.md
+++ b/packages/webawesome/docs/docs/components/option.md
@@ -28,28 +28,28 @@ Use the `disabled` attribute to disable an option and prevent it from being sele
 </wa-select>
 ```
 
-### Prefix & Suffix
+### Start & End Decorations
 
-Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
+Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the option label.
 
 ```html {.example}
 <wa-select label="Select one">
   <wa-option value="option-1">
-    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="envelope"></wa-icon>
     Email
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
+    <wa-icon slot="end" name="circle-check"></wa-icon>
   </wa-option>
 
   <wa-option value="option-2">
-    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="phone"></wa-icon>
     Phone
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
+    <wa-icon slot="end" name="circle-check"></wa-icon>
   </wa-option>
 
   <wa-option value="option-3">
-    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="comment"></wa-icon>
     Chat
-    <wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
+    <wa-icon slot="end" name="circle-check"></wa-icon>
   </wa-option>
 </wa-select>
 ```
diff --git a/packages/webawesome/docs/docs/components/popover.md b/packages/webawesome/docs/docs/components/popover.md
index b4edbdaa6..eac4ff731 100644
--- a/packages/webawesome/docs/docs/components/popover.md
+++ b/packages/webawesome/docs/docs/components/popover.md
@@ -137,7 +137,7 @@ Use the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_a
 </wa-popover>
 
 <wa-button id="popover__autofocus">
-  <wa-icon name="comment" slot="prefix"></wa-icon>
+  <wa-icon name="comment" slot="start"></wa-icon>
   Feedback
 </wa-button>
 ```
\ No newline at end of file
diff --git a/packages/webawesome/docs/docs/components/progress-bar.md b/packages/webawesome/docs/docs/components/progress-bar.md
index 985e38dbb..9b0530669 100644
--- a/packages/webawesome/docs/docs/components/progress-bar.md
+++ b/packages/webawesome/docs/docs/components/progress-bar.md
@@ -7,9 +7,7 @@ icon: progress-bar
 ---
 
 ```html {.example}
-<wa-progress-bar value="40">
-  <wa-icon slot="prefix" name="tasks"></wa-icon>
-</wa-progress-bar>
+<wa-progress-bar value="40"></wa-progress-bar>
 ```
 
 ## Examples
diff --git a/packages/webawesome/docs/docs/components/progress-ring.md b/packages/webawesome/docs/docs/components/progress-ring.md
index 501b5b1fa..304992702 100644
--- a/packages/webawesome/docs/docs/components/progress-ring.md
+++ b/packages/webawesome/docs/docs/components/progress-ring.md
@@ -6,9 +6,7 @@ icon: progress-ring
 ---
 
 ```html {.example}
-<wa-progress-ring value="25">
-  <wa-icon slot="prefix" name="circle-notch"></wa-icon>
-</wa-progress-ring>
+<wa-progress-ring value="25"></wa-progress-ring>
 ```
 
 ## Examples
@@ -18,9 +16,7 @@ icon: progress-ring
 Use the `--size` custom property to set the diameter of the progress ring.
 
 ```html {.example}
-<wa-progress-ring value="50" style="--size: 200px;">
-  <wa-icon slot="prefix" name="expand"></wa-icon>
-</wa-progress-ring>
+<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
 ```
 
 ### Track and Indicator Width
@@ -28,9 +24,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
 Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
 
 ```html {.example}
-<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
-  <wa-icon slot="prefix" name="arrows-alt"></wa-icon>
-</wa-progress-ring>
+<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
 ```
 
 ### Colors
@@ -45,7 +39,6 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
     --indicator-color: deeppink;
   "
 >
-  <wa-icon slot="prefix" name="palette"></wa-icon>
 </wa-progress-ring>
 ```
 
diff --git a/packages/webawesome/docs/docs/components/qr-code.md b/packages/webawesome/docs/docs/components/qr-code.md
index 2f801ff53..06db03636 100644
--- a/packages/webawesome/docs/docs/components/qr-code.md
+++ b/packages/webawesome/docs/docs/components/qr-code.md
@@ -13,7 +13,7 @@ QR codes are useful for providing small pieces of information to users who can q
   <br />
 
   <wa-input maxlength="255" with-clear label="Value">
-    <wa-icon slot="prefix" name="link"></wa-icon>
+    <wa-icon slot="start" name="link"></wa-icon>
   </wa-input>
 </div>
 
@@ -46,9 +46,7 @@ QR codes are useful for providing small pieces of information to users who can q
 Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
 
 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
-  <wa-icon slot="prefix" name="palette"></wa-icon>
-</wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
 ```
 
 ### Size
@@ -56,9 +54,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
 Use the `size` attribute to change the size of the QR code.
 
 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" size="64">
-  <wa-icon slot="prefix" name="expand"></wa-icon>
-</wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
 ```
 
 ### Radius
@@ -66,9 +62,7 @@ Use the `size` attribute to change the size of the QR code.
 Create a rounded effect with the `radius` attribute.
 
 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" radius="0.5">
-  <wa-icon slot="prefix" name="circle"></wa-icon>
-</wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
 ```
 
 ### Error Correction
@@ -77,18 +71,10 @@ QR codes can be rendered with various levels of [error correction](https://www.q
 
 ```html {.example}
 <div class="qr-error-correction">
-  <wa-qr-code value="https://shoelace.style/" error-correction="L">
-    <wa-icon slot="prefix" name="shield"></wa-icon>
-  </wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="M">
-    <wa-icon slot="prefix" name="shield"></wa-icon>
-  </wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="Q">
-    <wa-icon slot="prefix" name="shield"></wa-icon>
-  </wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="H">
-    <wa-icon slot="prefix" name="shield"></wa-icon>
-  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
 </div>
 
 <style>
diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index 8c785ba71..0b37eae6f 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -208,54 +208,30 @@ The preferred placement of the select's listbox can be set with the `placement`
 </wa-select>
 ```
 
-### Prefix Icons
+### Start & End Decorations
 
-Use the `prefix` slot to prepend an icon to the control.
+Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the combobox.
 
 ```html {.example}
 <wa-select placeholder="Small" size="small" with-clear>
-  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="house" variant="solid"></wa-icon>
+  <wa-icon slot="end" name="flag-checkered"></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" with-clear>
-  <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="house" variant="solid"></wa-icon>
+  <wa-icon slot="end" name="flag-checkered"></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" with-clear>
-  <wa-icon slot="prefix" name="house" variant="solid"></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>
-```
-
-### Suffix Icons
-
-Use the `suffix` slot to append an icon to the control.
-
-```html {.example}
-<wa-select placeholder="Small" size="small" with-clear>
-  <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" with-clear>
-  <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" with-clear>
-  <wa-icon name="house" slot="suffix"></wa-icon>
+  <wa-icon slot="start" name="house" variant="solid"></wa-icon>
+  <wa-icon slot="end" name="flag-checkered"></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>
@@ -277,15 +253,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
   class="custom-tag"
 >
   <wa-option value="email">
-    <wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="envelope" variant="solid"></wa-icon>
     Email
   </wa-option>
   <wa-option value="phone">
-    <wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="phone" variant="solid"></wa-icon>
     Phone
   </wa-option>
   <wa-option value="chat">
-    <wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
+    <wa-icon slot="start" name="comment" variant="solid"></wa-icon>
     Chat
   </wa-option>
 </wa-select>
@@ -297,7 +273,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
 
   select.getTag = (option, index) => {
     // Use the same icon used in wa-option
-    const name = option.querySelector('wa-icon[slot="prefix"]').name;
+    const name = option.querySelector('wa-icon[slot="start"]').name;
 
     // You can return a string, a Lit Template, or an HTMLElement here
     return `
diff --git a/packages/webawesome/docs/docs/experimental/themer.md b/packages/webawesome/docs/docs/experimental/themer.md
index b29f7928f..e7806e740 100644
--- a/packages/webawesome/docs/docs/experimental/themer.md
+++ b/packages/webawesome/docs/docs/experimental/themer.md
@@ -671,7 +671,7 @@ hasOutline: false
   <div style="display: grid; grid-template-rows: minmax(0, auto) minmax(0, 1fr); height: 100%; gap: 1rem;">
     <div style="display: flex; gap: 1.25rem;">
       <wa-input name="icon-search" autofocus placeholder="Search Icons" with-clear style="flex: 1 1 auto;">
-        <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+        <wa-icon slot="start" name="magnifying-glass"></wa-icon>
       </wa-input>
       <wa-select name="icon-variant" value="solid" style="flex: 0 1 auto;">
         <wa-option value="solid">Solid</wa-option>
@@ -2017,7 +2017,7 @@ hasOutline: false
       <div class="title">
         <h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
         <wa-button variant="brand" class="hero-cta">
-          <wa-icon slot="prefix" name="arrow-down"></wa-icon>
+          <wa-icon slot="start" name="arrow-down"></wa-icon>
           Free Your Mind
         </wa-button>
       </div>
@@ -2037,11 +2037,11 @@ hasOutline: false
         </div>
         <div slot="footer">
           <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
             Add to Cart
           </wa-button>
           <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
             Save
           </wa-button>
         </div>
@@ -2060,11 +2060,11 @@ hasOutline: false
         </div>
         <div slot="footer">
           <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
             Add to Cart
           </wa-button>
           <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
             Save
           </wa-button>
         </div>
@@ -2082,11 +2082,11 @@ hasOutline: false
         </div>
         <div slot="footer">
           <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
             Add to Cart
           </wa-button>
           <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
             Save
           </wa-button>
         </div>
@@ -2236,7 +2236,7 @@ hasOutline: false
           </div>
           <div class="send">
             <wa-button variant="brand" size="small">
-              <wa-icon slot="prefix" name="paper-plane-top" variant="solid" label="Add File"></wa-icon>
+              <wa-icon slot="start" name="paper-plane-top" variant="solid" label="Add File"></wa-icon>
               Send
             </wa-button>
           </div>
@@ -2286,11 +2286,11 @@ hasOutline: false
           <div style="display: flex; align-items: end; gap: 1rem;">
             <wa-input type="number" label="How many?"></wa-input>
             <wa-button variant="brand">
-              <wa-icon slot="prefix" name="bag-shopping" variant="solid" label="Add to Basket"></wa-icon>
+              <wa-icon slot="start" name="bag-shopping" variant="solid" label="Add to Basket"></wa-icon>
               Add to Basket
             </wa-button>
             <wa-button variant="neutral">
-              <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+              <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
               Save
             </wa-button>
           </div>
@@ -2321,19 +2321,19 @@ hasOutline: false
               <wa-dropdown>
                 <wa-button slot="trigger" caret size="small">Action</wa-button>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
                   Pending
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
                   Re-open
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
                   Delete
                 </wa-dropdown-item>
               </wa-dropdown>
@@ -2349,19 +2349,19 @@ hasOutline: false
               <wa-dropdown>
                 <wa-button slot="trigger" caret size="small">Action</wa-button>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
                   Pending
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
                   Re-open
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
                   Delete
                 </wa-dropdown-item>
               </wa-dropdown>
@@ -2377,19 +2377,19 @@ hasOutline: false
               <wa-dropdown>
                 <wa-button slot="trigger" caret size="small">Action</wa-button>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
                   Pending
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
                   Re-open
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
                   Delete
                 </wa-dropdown-item>
               </wa-dropdown>
@@ -2405,19 +2405,19 @@ hasOutline: false
               <wa-dropdown>
                 <wa-button slot="trigger" caret size="small">Action</wa-button>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
                   Pending
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
                   Re-open
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
                   Delete
                 </wa-dropdown-item>
               </wa-dropdown>
@@ -2433,19 +2433,19 @@ hasOutline: false
               <wa-dropdown>
                 <wa-button slot="trigger" caret size="small">Action</wa-button>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="check" variant="regular"></wa-icon>
                   Resolved
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="clock" variant="regular"></wa-icon>
                   Pending
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
                   Re-open
                 </wa-dropdown-item>
                 <wa-dropdown-item>
-                  <wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
+                  <wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
                   Delete
                 </wa-dropdown-item>
               </wa-dropdown>
@@ -2460,30 +2460,30 @@ hasOutline: false
           <h2 style="margin-bottom: var(--wa-space-3xl);">Payment</h2>
           <form>
             <wa-input type="email" placeholder="ex. tanderson@metacortex.com" label="Email">
-              <wa-icon name="envelope" variant="regular" slot="prefix"></wa-icon>
+              <wa-icon name="envelope" variant="regular" slot="start"></wa-icon>
             </wa-input>
             <wa-input placeholder="1234 1234 1234 1234" label="Card Number">
-              <wa-icon name="credit-card" variant="regular" slot="prefix"></wa-icon>
+              <wa-icon name="credit-card" variant="regular" slot="start"></wa-icon>
             </wa-input>
             <div style="display: flex; gap: 1rem;">
               <wa-input placeholder="MM / YY" label="Expiration">
-                <wa-icon name="calendar" variant="regular" slot="prefix"></wa-icon>
+                <wa-icon name="calendar" variant="regular" slot="start"></wa-icon>
               </wa-input>
               <wa-input placeholder="CVC" label="CVC">
-                <wa-icon name="lock" variant="regular" slot="prefix"></wa-icon>
+                <wa-icon name="lock" variant="regular" slot="start"></wa-icon>
               </wa-input>
             </div>
             <wa-input placeholder="Thomas Anderson" label="Cardholder Name">
-              <wa-icon name="user" variant="regular" slot="prefix"></wa-icon>
+              <wa-icon name="user" variant="regular" slot="start"></wa-icon>
             </wa-input>
             <div style="display: flex; gap: 1rem;">
               <wa-select label="Country" value="USA">
-              <wa-icon slot="prefix" name="globe" variant="regular"></wa-icon>
+              <wa-icon slot="start" name="globe" variant="regular"></wa-icon>
                 <wa-option value="USA">United States</wa-option>
                 <wa-option value="CAN">Canada</wa-option>
               </wa-select>
               <wa-input placeholder="12345" label="Zip">
-                <wa-icon name="location-dot" variant="regular" slot="prefix"></wa-icon>
+                <wa-icon name="location-dot" variant="regular" slot="start"></wa-icon>
               </wa-input>
             </div>
             <wa-switch checked style="margin: var(--wa-space-2xl) 0 var(--wa-space-3xl) 0;">Sign me up for more offers from this store</wa-switch>
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index dc3c2fcc8..34299d20c 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -52,6 +52,12 @@ During the alpha period, things might break! We take breaking changes very serio
 - 🚨 BREAKING: completely reworked `<wa-dropdown>` to be easier to use
   - Added `<wa-dropdown-item>`, greatly simplifying the dropdown's markup structure
   - Removed `<wa-menu>`, `<wa-menu-item>`, and `<wa-menu-label>`; use `<wa-dropdown-item>` and native headings instead
+- 🚨 BREAKING: renamed all `prefix` and `suffix` slots to `start` and `end`, affecting the following components:
+  - `<wa-breadcrumb-item>`
+  - `<wa-button>`
+  - `<wa-input>`
+  - `<wa-select>`
+  - `<wa-option>`
 - Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
 - Added a new free component: `<wa-zoomable-frame>` (#3 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
diff --git a/packages/webawesome/docs/docs/resources/community.md b/packages/webawesome/docs/docs/resources/community.md
index 67374c1c7..e20bbfb01 100644
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -18,7 +18,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Learn more about the project, its values, and its roadmap
 
 <wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="github" family="brands" slot="prefix"></wa-icon>
+  <wa-icon name="github" family="brands" slot="start"></wa-icon>
   Join the Discussion
 </wa-button>
 
@@ -32,7 +32,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Chat live with other designers, developers, and Web Awesome fans
 
 <wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
+  <wa-icon name="discord" family="brands" slot="start"></wa-icon>
   Join the Chat
 </wa-button>
 
@@ -43,6 +43,6 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
 <wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
-  <wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
+  <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
   Follow on Twitter
 </wa-button>
diff --git a/packages/webawesome/docs/docs/themes/demo/index.njk b/packages/webawesome/docs/docs/themes/demo/index.njk
index 69c847a08..8eaf48f4f 100644
--- a/packages/webawesome/docs/docs/themes/demo/index.njk
+++ b/packages/webawesome/docs/docs/themes/demo/index.njk
@@ -26,7 +26,7 @@ unlisted: true
   {% if theme.fileSlug === 'custom' %}
   <p>
     <wa-button href="../edit/" class="edit-link" target="_parent" appearance="outlined">
-      <wa-icon slot="prefix" name="pencil"></wa-icon>
+      <wa-icon slot="start" name="pencil"></wa-icon>
       Edit theme
     </wa-button>
   </p>
diff --git a/packages/webawesome/docs/docs/themes/edit/index.njk b/packages/webawesome/docs/docs/themes/edit/index.njk
index 1f085faf0..4c63fc0df 100644
--- a/packages/webawesome/docs/docs/themes/edit/index.njk
+++ b/packages/webawesome/docs/docs/themes/edit/index.njk
@@ -42,7 +42,7 @@ unlisted: true
         <wa-tab-panel name="css">
           <p>
             <wa-button variant="brand" :href="code.css.blob" :download="cssFilename">
-              <wa-icon name="arrow-down-to-line" variant="solid" slot="prefix"></wa-icon>
+              <wa-icon name="arrow-down-to-line" variant="solid" slot="start"></wa-icon>
               Download <code v-text="cssFilename"></code>
             </wa-button>
           </p>
@@ -153,7 +153,7 @@ unlisted: true
       </icons-card>
 
       <wa-input label="Font Awesome Pro Kit Code" v-model="theme.icon.kit" placeholder="e.g. f0nta7e50e">
-        <info-tip slot="suffix"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
+        <info-tip slot="end"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
         <a href="https://fontawesome.com/kits" target="_blank" slot="hint" class="wa-caption-m wa-cluster wa-gap-2xs">
           <span>Find your kit code here</span>
           <wa-icon name="arrow-up-right-from-square" variant="regular" style="font-size: 0.75em"></wa-icon>
diff --git a/packages/webawesome/docs/docs/themes/preview/content.njk b/packages/webawesome/docs/docs/themes/preview/content.njk
index 52955824c..0ff2e4ca9 100644
--- a/packages/webawesome/docs/docs/themes/preview/content.njk
+++ b/packages/webawesome/docs/docs/themes/preview/content.njk
@@ -36,7 +36,7 @@ noTheme: true
       <div class="title">
         <h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
         <wa-button variant="brand" class="hero-cta">
-          <wa-icon slot="prefix" name="arrow-down"></wa-icon>
+          <wa-icon slot="start" name="arrow-down"></wa-icon>
           Free Your Mind
         </wa-button>
       </div>
@@ -56,11 +56,11 @@ noTheme: true
         </div>
         <div slot="footer">
           <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
             Add to Cart
           </wa-button>
           <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
             Save
           </wa-button>
         </div>
@@ -79,11 +79,11 @@ noTheme: true
         </div>
         <div slot="footer">
           <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
             Add to Cart
           </wa-button>
           <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
             Save
           </wa-button>
         </div>
@@ -101,11 +101,11 @@ noTheme: true
         </div>
         <div slot="footer">
           <wa-button size="small">
-            <wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
             Add to Cart
           </wa-button>
           <wa-button size="small" appearance="outline">
-            <wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
+            <wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
             Save
           </wa-button>
         </div>
diff --git a/packages/webawesome/docs/docs/usage.md b/packages/webawesome/docs/docs/usage.md
index 7126eb83e..c7b96681f 100644
--- a/packages/webawesome/docs/docs/usage.md
+++ b/packages/webawesome/docs/docs/usage.md
@@ -108,11 +108,11 @@ For example, a button's default slot is used to populate its label.
 <wa-button>Click me</wa-button>
 ```
 
-Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
+Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="start"` attribute? This tells the component to place the icon into its `start` slot.
 
 ```html
 <wa-button>
-  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
+  <wa-icon slot="start" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 ```
diff --git a/packages/webawesome/docs/docs/utilities/flank.md b/packages/webawesome/docs/docs/utilities/flank.md
index a54b074b3..73b897b8e 100644
--- a/packages/webawesome/docs/docs/utilities/flank.md
+++ b/packages/webawesome/docs/docs/utilities/flank.md
@@ -37,7 +37,7 @@ Flanks work especially well for asides, inputs with adjacent buttons, and rich d
 ```html {.example}
 <div class="wa-flank:end wa-gap-xs">
   <wa-input>
-    <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
+    <wa-icon slot="start" name="magnifying-glass"></wa-icon>
   </wa-input>
   <wa-button>Search</wa-button>
 </div>
diff --git a/packages/webawesome/docs/docs/utilities/stack.md b/packages/webawesome/docs/docs/utilities/stack.md
index 928e1aa3d..8d48984a4 100644
--- a/packages/webawesome/docs/docs/utilities/stack.md
+++ b/packages/webawesome/docs/docs/utilities/stack.md
@@ -36,10 +36,10 @@ Stacks are well suited for forms, text, and ensuring consistent spacing between
 ```html {.example}
 <div class="wa-stack">
   <wa-input label="Email">
-    <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
+    <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
   </wa-input>
   <wa-input label="Password" type="password">
-    <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
+    <wa-icon slot="start" name="lock" variant="regular"></wa-icon>
   </wa-input>
   <wa-checkbox>Remember me on this device</wa-checkbox>
   <wa-button>Log In</wa-button>
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index 19c14d3f8..30eeb7dfc 100644
--- a/packages/webawesome/docs/index.md
+++ b/packages/webawesome/docs/index.md
@@ -222,7 +222,7 @@ layout: page
     text-align: left;
     white-space: wrap;
   }
-  wa-button.tile::part(suffix) {
+  wa-button.tile::part(end) {
     display: none;
   }
   wa-button.tile {
@@ -266,7 +266,7 @@ layout: page
     <div class="hero-cta">
       <span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
       <wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
-        <wa-icon slot="prefix" name="person-running"></wa-icon>
+        <wa-icon slot="start" name="person-running"></wa-icon>
         Pre-order WA Pro
       </wa-button>
     </div>
diff --git a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css
index 4a98b92d2..4784fa017 100644
--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css
@@ -45,25 +45,25 @@
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-.prefix,
-.suffix {
+.start,
+.end {
   display: none;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
 }
 
-.prefix,
-.suffix {
+.start,
+.end {
   display: inline-flex;
   color: var(--wa-color-text-quiet);
 }
 
-::slotted([slot='prefix']) {
+::slotted([slot='start']) {
   margin-inline-end: var(--wa-space-s);
 }
 
-::slotted([slot='suffix']) {
+::slotted([slot='end']) {
   margin-inline-start: var(--wa-space-s);
 }
 
diff --git a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts
index c8a40e8b6..b0ff9a078 100644
--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts
@@ -122,11 +122,11 @@ describe('<wa-breadcrumb-item>', () => {
         });
       });
 
-      describe('when provided an element in the slot "prefix" to support prefix icons', () => {
+      describe('when provided an element in the slot "start" to support start icons', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaBreadcrumbItem>(html`
             <wa-breadcrumb-item>
-              <span class="prefix-example" slot="prefix">/</span>
+              <span class="start-example" slot="start">/</span>
               Home
             </wa-breadcrumb-item>
           `);
@@ -136,22 +136,22 @@ describe('<wa-breadcrumb-item>', () => {
         it('should accept as an assigned child in the shadow root', async () => {
           const el = await fixture<WaBreadcrumbItem>(html`
             <wa-breadcrumb-item>
-              <span class="prefix-example" slot="prefix">/</span>
+              <span class="start-example" slot="start">/</span>
               Home
             </wa-breadcrumb-item>
           `);
-          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=prefix]')!;
+          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=start]')!;
           const childNodes = slot.assignedNodes({ flatten: true });
 
           expect(childNodes.length).to.eq(1);
         });
       });
 
-      describe('when provided an element in the slot "suffix" to support suffix icons', () => {
+      describe('when provided an element in the slot "end" to support end icons', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaBreadcrumbItem>(html`
             <wa-breadcrumb-item>
-              <span class="prefix-example" slot="suffix">/</span>
+              <span class="end-example" slot="end">/</span>
               Security
             </wa-breadcrumb-item>
           `);
@@ -162,11 +162,11 @@ describe('<wa-breadcrumb-item>', () => {
         it('should accept as an assigned child in the shadow root', async () => {
           const el = await fixture<WaBreadcrumbItem>(html`
             <wa-breadcrumb-item>
-              <span class="prefix-example" slot="suffix">/</span>
+              <span class="end-example" slot="end">/</span>
               Security
             </wa-breadcrumb-item>
           `);
-          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=suffix]')!;
+          const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=end]')!;
           const childNodes = slot.assignedNodes({ flatten: true });
 
           expect(childNodes.length).to.eq(1);
diff --git a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
index 3bafe90ac..610422755 100644
--- a/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -12,14 +12,14 @@ import styles from './breadcrumb-item.css';
  * @since 2.0
  *
  * @slot - The breadcrumb item's label.
- * @slot prefix - An optional prefix, usually an icon.
- * @slot suffix - An optional suffix, usually an icon.
+ * @slot start - An element, such as `<wa-icon>`, placed before the label.
+ * @slot end - An element, such as `<wa-icon>`, placed after the label.
  * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
  * you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
  *
  * @csspart label - The breadcrumb item's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
+ * @csspart start - The container that wraps the `start` slot.
+ * @csspart end - The container that wraps the `end` slot.
  * @csspart separator - The container that wraps the separator.
  */
 @customElement('wa-breadcrumb-item')
@@ -71,8 +71,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
 
   render() {
     return html`
-      <span part="prefix" class="prefix">
-        <slot name="prefix"></slot>
+      <span part="start" class="start">
+        <slot name="start"></slot>
       </span>
 
       ${this.renderType === 'link'
@@ -103,8 +103,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
           `
         : ''}
 
-      <span part="suffix" class="suffix">
-        <slot name="suffix"></slot>
+      <span part="end" class="end">
+        <slot name="end"></slot>
       </span>
 
       <span part="separator" class="separator" aria-hidden="true">
diff --git a/packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts b/packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts
index 1c2feeb96..6af619826 100644
--- a/packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts
+++ b/packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts
@@ -95,12 +95,12 @@ describe('<wa-breadcrumb>', () => {
         });
       });
 
-      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "prefix" to support prefix icons', () => {
+      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "start" to support start icons', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaBreadcrumb>(html`
             <wa-breadcrumb>
               <wa-breadcrumb-item>
-                <span class="prefix-example" slot="prefix">/</span>
+                <span class="start-example" slot="start">/</span>
                 Home
               </wa-breadcrumb-item>
               <wa-breadcrumb-item>First</wa-breadcrumb-item>
@@ -112,7 +112,7 @@ describe('<wa-breadcrumb>', () => {
         });
       });
 
-      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "suffix" to support suffix icons', () => {
+      describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "end" to support end icons', () => {
         it('should pass accessibility tests', async () => {
           const el = await fixture<WaBreadcrumb>(html`
             <wa-breadcrumb>
@@ -120,7 +120,7 @@ describe('<wa-breadcrumb>', () => {
               <wa-breadcrumb-item>Second</wa-breadcrumb-item>
               <wa-breadcrumb-item>Third</wa-breadcrumb-item>
               <wa-breadcrumb-item>
-                <span class="prefix-example" slot="suffix">/</span>
+                <span class="end-example" slot="end">/</span>
                 Security
               </wa-breadcrumb-item>
             </wa-breadcrumb>
diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css
index a210ef143..5406c91cb 100644
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -107,8 +107,8 @@
  * Label
  */
 
-.prefix,
-.suffix {
+.start,
+.end {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -137,7 +137,7 @@ wa-icon[part~='caret'] {
     height: 0.875em;
   }
 
-  .button:has(&) .suffix {
+  .button:has(&) .end {
     display: none;
   }
 }
@@ -150,9 +150,9 @@ wa-icon[part~='caret'] {
   position: relative;
   cursor: wait;
 
-  .prefix,
+  .start,
   .label,
-  .suffix,
+  .end,
   .caret {
     visibility: hidden;
   }
@@ -191,11 +191,11 @@ button ::slotted(wa-badge) {
 * Button spacing
 */
 
-slot[name='prefix']::slotted(*) {
+slot[name='start']::slotted(*) {
   margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
-slot[name='suffix']::slotted(*),
+slot[name='end']::slotted(*),
 .button:not(.visually-hidden-label) [part~='caret'] {
   margin-inline-start: var(--wa-form-control-padding-inline);
 }
diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts
index 63cc64cc8..8b6afe395 100644
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -29,13 +29,13 @@ import styles from './button.css';
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @slot - The button's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
+ * @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 prefix - The container that wraps the prefix.
+ * @csspart start - The container that wraps the `start` slot.
  * @csspart label - The button's label.
- * @csspart suffix - The container that wraps the suffix.
+ * @csspart end - The container that wraps the `end` slot.
  * @csspart caret - The button's caret icon, a `<wa-icon>` element.
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  *
@@ -60,7 +60,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   }
 
   assumeInteractionOn = ['click'];
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
   private readonly localize = new LocalizeController(this);
 
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
@@ -263,8 +263,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
           loading: this.loading,
           rtl: this.localize.dir() === 'rtl',
           'has-label': this.hasSlotController.test('[default]'),
-          'has-prefix': this.hasSlotController.test('prefix'),
-          'has-suffix': this.hasSlotController.test('suffix'),
+          'has-start': this.hasSlotController.test('start'),
+          'has-end': this.hasSlotController.test('end'),
           'is-icon-button': this.isIconButton,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
@@ -282,9 +282,9 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         @invalid=${this.isButton() ? this.handleInvalid : null}
         @click=${this.handleClick}
       >
-        <slot name="prefix" part="prefix" class="prefix"></slot>
+        <slot name="start" part="start" class="start"></slot>
         <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
-        <slot name="suffix" part="suffix" class="suffix"></slot>
+        <slot name="end" part="end" class="end"></slot>
         ${
           this.caret
             ? html`
diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts
index 66388ecbf..b85a6c325 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -74,15 +74,15 @@ declare const EyeDropper: EyeDropperConstructor;
  * @csspart input - The text input.
  * @csspart eye-dropper-button - The eye dropper button.
  * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
- * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
+ * @csspart eye-dropper-button__start - The eye dropper button's exported `start` part.
  * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
- * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
+ * @csspart eye-dropper-button__end - The eye dropper button's exported `end` part.
  * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
  * @csspart format-button - The format button.
  * @csspart format-button__base - The format button's exported `button` part.
- * @csspart format-button__prefix - The format button's exported `prefix` part.
+ * @csspart format-button__start - The format button's exported `start` part.
  * @csspart format-button__label - The format button's exported `label` part.
- * @csspart format-button__suffix - The format button's exported `suffix` part.
+ * @csspart format-button__end - The format button's exported `end` part.
  * @csspart format-button__caret - The format button's exported `caret` part.
  *
  * @cssproperty --background-color - The color picker's background color.
@@ -1181,9 +1181,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                     aria-label=${this.localize.term('toggleColorFormat')}
                     exportparts="
                       base:format-button__base,
-                      prefix:format-button__prefix,
+                      start:format-button__start,
                       label:format-button__label,
-                      suffix:format-button__suffix,
+                      end:format-button__end,
                       caret:format-button__caret
                     "
                     @click=${this.handleFormatToggle}
@@ -1202,9 +1202,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                     appearance="outlined"
                     exportparts="
                       base:eye-dropper-button__base,
-                      prefix:eye-dropper-button__prefix,
+                      start:eye-dropper-button__start,
                       label:eye-dropper-button__label,
-                      suffix:eye-dropper-button__suffix,
+                      end:eye-dropper-button__end,
                       caret:eye-dropper-button__caret
                     "
                     @click=${this.handleEyeDropper}
diff --git a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
index f0bda2c8f..a7a57a5d7 100644
--- a/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
+++ b/packages/webawesome/src/components/dropdown-item/dropdown-item.ts
@@ -33,7 +33,7 @@ import styles from './dropdown-item.css';
 export default class WaDropdownItem extends WebAwesomeElement {
   static css = styles;
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
 
   @query('#submenu') submenuElement: HTMLDivElement;
 
diff --git a/packages/webawesome/src/components/input/input.css b/packages/webawesome/src/components/input/input.css
index 3dc0f9a0f..a38b82149 100644
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -129,8 +129,8 @@ textarea {
   }
 }
 
-.prefix,
-.suffix {
+.start,
+.end {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
@@ -141,11 +141,11 @@ textarea {
   }
 }
 
-.prefix::slotted(*) {
+.start::slotted(*) {
   margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
-.suffix::slotted(*) {
+.end::slotted(*) {
   margin-inline-start: var(--wa-form-control-padding-inline);
 }
 
diff --git a/packages/webawesome/src/components/input/input.ts b/packages/webawesome/src/components/input/input.ts
index e615f0e8d..264ef780d 100644
--- a/packages/webawesome/src/components/input/input.ts
+++ b/packages/webawesome/src/components/input/input.ts
@@ -25,8 +25,8 @@ import styles from './input.css';
  * @dependency wa-icon
  *
  * @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 input.
- * @slot suffix - Used to append a presentational icon or similar element to the input.
+ * @slot start - An element, such as `<wa-icon>`, placed at the start of the input control.
+ * @slot end - An element, such as `<wa-icon>`, placed at the end of the input control.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot show-password-icon - An icon to use in lieu of the default show password icon.
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
@@ -43,10 +43,10 @@ import styles from './input.css';
  * @csspart hint - The hint's wrapper.
  * @csspart input - The wrapper being rendered as an input
  * @csspart base - The internal `<input>` control.
- * @csspart prefix - The container that wraps the prefix.
+ * @csspart start - The container that wraps the `start` slot.
  * @csspart clear-button - The clear button.
  * @csspart password-toggle-button - The password toggle button.
- * @csspart suffix - The container that wraps the suffix.
+ * @csspart end - The container that wraps the `end` slot.
  *
  * @cssproperty --background-color - The input's background color.
  * @cssproperty --border-color - The color of the input's borders.
@@ -356,7 +356,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
       </label>
 
       <div part="input" class="text-field">
-        <slot name="prefix" part="prefix" class="prefix"></slot>
+        <slot name="start" part="start" class="start"></slot>
 
         <input
           part="base"
@@ -430,7 +430,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
             `
           : ''}
 
-        <slot name="suffix" part="suffix" class="suffix"></slot>
+        <slot name="end" part="end" class="end"></slot>
       </div>
 
       <slot
diff --git a/packages/webawesome/src/components/option/option.css b/packages/webawesome/src/components/option/option.css
index 149fb873b..43c49d90a 100644
--- a/packages/webawesome/src/components/option/option.css
+++ b/packages/webawesome/src/components/option/option.css
@@ -62,18 +62,18 @@
   visibility: visible;
 }
 
-.prefix,
-.suffix {
+.start,
+.end {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
 }
 
-.prefix::slotted(*) {
+.start::slotted(*) {
   margin-inline-end: 0.5em;
 }
 
-.suffix::slotted(*) {
+.end::slotted(*) {
   margin-inline-start: 0.5em;
 }
 
diff --git a/packages/webawesome/src/components/option/option.ts b/packages/webawesome/src/components/option/option.ts
index 1badd483d..5972cec9a 100644
--- a/packages/webawesome/src/components/option/option.ts
+++ b/packages/webawesome/src/components/option/option.ts
@@ -16,8 +16,8 @@ import styles from './option.css';
  * @dependency wa-icon
  *
  * @slot - The option's label.
- * @slot prefix - Used to prepend an icon or similar element to the menu item.
- * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot start - An element, such as `<wa-icon>`, placed before the label.
+ * @slot end - An element, such as `<wa-icon>`, placed after the label.
  *
  * @cssproperty --background-color-current - The current option's background color.
  * @cssproperty --background-color-hover - The options's background color on hover.
@@ -26,8 +26,8 @@ import styles from './option.css';
  *
  * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
  * @csspart label - The option's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
+ * @csspart start - The container that wraps the `start` slot.
+ * @csspart end - The container that wraps the `end` slot.
  *
  * @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)
  * @cssstate selected - The option is selected and has aria-selected="true"
@@ -192,9 +192,9 @@ export default class WaOption extends WebAwesomeElement {
         variant="solid"
         aria-hidden="true"
       ></wa-icon>
-      <slot part="prefix" name="prefix" class="prefix"></slot>
+      <slot part="start" name="start" class="start"></slot>
       <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
-      <slot part="suffix" name="suffix" class="suffix"></slot>
+      <slot part="end" name="end" class="end"></slot>
     `;
   }
 }
diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css
index 2639c38e3..b62486adf 100644
--- a/packages/webawesome/src/components/select/select.css
+++ b/packages/webawesome/src/components/select/select.css
@@ -158,25 +158,25 @@ label:has(select),
   }
 }
 
-/* Prefix and Suffix */
+/* Start and End */
 
-.prefix,
-.suffix {
+.start,
+.end {
   flex: 0;
   display: inline-flex;
   align-items: center;
   color: var(--wa-color-neutral-on-quiet);
 }
 
-.suffix::slotted(*) {
+.end::slotted(*) {
   margin-inline-start: var(--wa-form-control-padding-inline);
 }
 
-.prefix::slotted(*) {
+.start::slotted(*) {
   margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
-:host([multiple]) .prefix::slotted(*) {
+:host([multiple]) .start::slotted(*) {
   margin-inline: var(--wa-form-control-padding-inline);
 }
 
diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts
index 8e2dcec1b..860c71335 100644
--- a/packages/webawesome/src/components/select/select.ts
+++ b/packages/webawesome/src/components/select/select.ts
@@ -41,8 +41,8 @@ import styles from './select.css';
  *
  * @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 start - An element, such as `<wa-icon>`, placed at the start of the combobox.
+ * @slot end - An element, such as `<wa-icon>`, placed at the end of 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 hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
@@ -62,9 +62,9 @@ import styles from './select.css';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart hint - The hint's wrapper.
- * @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 combobox - The container the wraps the start, end, value, clear icon, and expand button.
+ * @csspart start - The container that wraps the `start` slot.
+ * @csspart end - The container that wraps the `end` 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.
@@ -900,7 +900,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
             >
-              <slot part="prefix" name="prefix" class="prefix"></slot>
+              <slot part="start" name="start" class="start"></slot>
 
               <input
                 part="display-input"
@@ -962,7 +962,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
                   `
                 : ''}
 
-              <slot name="suffix" part="suffix" class="suffix"></slot>
+              <slot name="end" part="end" class="end"></slot>
 
               <slot name="expand-icon" part="expand-icon" class="expand-icon">
                 <wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>