From c57d04b5e699fa74ba4539b160a35f0ba048e0e9 Mon Sep 17 00:00:00 2001
From: "Nichols, Kieran" <kieran.nichols@tylertech.com>
Date: Fri, 17 May 2024 13:39:44 -0400
Subject: [PATCH 1/2] feat(tab): deprecate leading/trailing slots in favor of
 start/end

---
 src/dev/pages/tabs/tabs.html |  4 ++--
 src/dev/pages/tabs/tabs.ts   | 16 ++++++++--------
 src/lib/tabs/tab/tab.html    |  8 ++++++--
 src/lib/tabs/tab/tab.scss    |  4 ++++
 src/lib/tabs/tab/tab.ts      |  4 ++++
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/dev/pages/tabs/tabs.html b/src/dev/pages/tabs/tabs.html
index 9906f99da..1f8e4bc74 100644
--- a/src/dev/pages/tabs/tabs.html
+++ b/src/dev/pages/tabs/tabs.html
@@ -12,8 +12,8 @@
       { type: 'switch', label: 'Inverted', id: 'opt-inverted' },
       { type: 'switch', label: 'Auto activate', id: 'opt-auto-activate' },
       { type: 'switch', label: 'Scroll buttons', id: 'opt-scroll-buttons' },
-      { type: 'switch', label: 'Show leading icon', id: 'opt-show-leading' },
-      { type: 'switch', label: 'Show trailing icon', id: 'opt-show-trailing' },
+      { type: 'switch', label: 'Show start icon', id: 'opt-show-start' },
+      { type: 'switch', label: 'Show end icon', id: 'opt-show-end' },
       {
         type: 'select',
         label: 'Clustered alignment',
diff --git a/src/dev/pages/tabs/tabs.ts b/src/dev/pages/tabs/tabs.ts
index 06f0b8901..134998c89 100644
--- a/src/dev/pages/tabs/tabs.ts
+++ b/src/dev/pages/tabs/tabs.ts
@@ -71,26 +71,26 @@ scrollButtonsToggle.addEventListener('forge-switch-change', ({ detail: selected
   tabBar.scrollButtons = selected;
 });
 
-const showLeadingToggle = document.getElementById('opt-show-leading') as ISwitchComponent;
-showLeadingToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+const showStartToggle = document.getElementById('opt-show-start') as ISwitchComponent;
+showStartToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const tabElements = tabBar.querySelectorAll('forge-tab');
   tabElements.forEach(tab => {
     if (selected) {
-      tab.appendChild(createIcon('favorite', 'leading'));
+      tab.appendChild(createIcon('favorite', 'start'));
     } else {
-      tab.removeChild(tab.querySelector('forge-icon[slot=leading]'));
+      tab.removeChild(tab.querySelector('forge-icon[slot=start]'));
     }
   });
 });
 
-const showTrailingToggle = document.getElementById('opt-show-trailing') as ISwitchComponent;
-showTrailingToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+const showEndToggle = document.getElementById('opt-show-end') as ISwitchComponent;
+showEndToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   const tabElements = tabBar.querySelectorAll('forge-tab');
   tabElements.forEach(tab => {
     if (selected) {
-      tab.appendChild(createIcon('favorite', 'trailing'));
+      tab.appendChild(createIcon('favorite', 'end'));
     } else {
-      tab.removeChild(tab.querySelector('forge-icon[slot=trailing]'));
+      tab.removeChild(tab.querySelector('forge-icon[slot=end]'));
     }
   });
 });
diff --git a/src/lib/tabs/tab/tab.html b/src/lib/tabs/tab/tab.html
index 4ac34293b..2f4f28ec9 100644
--- a/src/lib/tabs/tab/tab.html
+++ b/src/lib/tabs/tab/tab.html
@@ -1,11 +1,15 @@
 <template>
   <div class="forge-tab" part="container">
     <span class="content" part="content">
-      <slot name="leading"></slot>
+      <slot name="start">
+        <slot name="leading"></slot>
+      </slot>
       <span class="label" part="label">
         <slot></slot>
       </span>
-      <slot name="trailing"></slot>
+      <slot name="end">
+        <slot name="trailing"></slot>
+      </slot>
       <span class="indicator" part="indicator"></span>
     </span>
     <forge-state-layer exportparts="surface:state-layer" target=":host"></forge-state-layer>
diff --git a/src/lib/tabs/tab/tab.scss b/src/lib/tabs/tab/tab.scss
index 2b8d3f5d7..b0a8db8dd 100644
--- a/src/lib/tabs/tab/tab.scss
+++ b/src/lib/tabs/tab/tab.scss
@@ -93,6 +93,8 @@ forge-state-layer {
   .forge-tab {
     color: #{token(active-label-text-color)};
 
+    ::slotted([slot=start]),
+    ::slotted([slot=end]),
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
       color: #{token(active-icon-color)};
@@ -103,6 +105,8 @@ forge-state-layer {
     }
 
     &:hover {
+      ::slotted([slot=start]),
+      ::slotted([slot=end]),
       ::slotted([slot=leading]),
       ::slotted([slot=trailing]) {
         color: #{token(active-hover-icon-color)};
diff --git a/src/lib/tabs/tab/tab.ts b/src/lib/tabs/tab/tab.ts
index 794b60776..f3a60e8e4 100644
--- a/src/lib/tabs/tab/tab.ts
+++ b/src/lib/tabs/tab/tab.ts
@@ -76,6 +76,10 @@ declare global {
  * @csspart content - The tab content container.
  * @csspart label - The tab label container.
  * @csspart indicator - The tab active indicator.
+ * 
+ * @slot - The tab label.
+ * @slot start - Content before the label.
+ * @slot end - Content after the label.
  */
 @CustomElement({
   name: TAB_CONSTANTS.elementName,

From 87550bf82a1a7ad8269a61fc8a0a117db53c83ce Mon Sep 17 00:00:00 2001
From: "Nichols, Kieran" <kieran.nichols@tylertech.com>
Date: Fri, 17 May 2024 13:40:59 -0400
Subject: [PATCH 2/2] feat(list-item): deprecate leading/trailing slots in
 favor of start/end

---
 src/dev/pages/list/list.ejs                   | 182 +++++++++---------
 .../styles/tokens/list/list-item/_tokens.scss |  12 +-
 src/lib/list/list-item/_core.scss             |  12 +-
 src/lib/list/list-item/list-item-adapter.ts   |  20 +-
 src/lib/list/list-item/list-item-constants.ts |   4 +-
 .../list/list-item/list-item-foundation.ts    |   4 +-
 src/lib/list/list-item/list-item.html         |   8 +-
 src/lib/list/list-item/list-item.scss         |  30 +--
 src/lib/list/list-item/list-item.ts           |  17 +-
 src/lib/list/list.test.ts                     |  26 +--
 10 files changed, 161 insertions(+), 154 deletions(-)

diff --git a/src/dev/pages/list/list.ejs b/src/dev/pages/list/list.ejs
index 472c08f2c..cd2910d0c 100644
--- a/src/dev/pages/list/list.ejs
+++ b/src/dev/pages/list/list.ejs
@@ -230,109 +230,109 @@
     <div class="list-demo">
       <forge-list three-line selected-value="wifi">
         <forge-list-item value="wifi">
-          <forge-icon slot="leading" name="wifi"></forge-icon>  
+          <forge-icon slot="start" name="wifi"></forge-icon>  
           <button>Wifi</button>
           <span slot="secondary-text">Secondary Text</span>
           <span slot="tertiary-text">Tertiary Text</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-list-item value="bluetooth">
-          <forge-icon slot="leading" name="bluetooth"></forge-icon>  
+          <forge-icon slot="start" name="bluetooth"></forge-icon>  
           <button>Bluetooth</button>
           <span slot="secondary-text">Secondary Text</span>
           <span slot="tertiary-text">Tertiary Text</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-list-item value="date-usage">
-          <forge-icon slot="leading" name="data_usage"></forge-icon>  
+          <forge-icon slot="start" name="data_usage"></forge-icon>  
           <button>Data Usage</button>
           <span slot="secondary-text">Secondary Text</span>
           <span slot="tertiary-text">Tertiary Text</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
   
-  <!-- Leading Icon -->
+  <!-- Start Icon -->
   <div>
-    <h3 class="forge-typography--heading2">Leading Icon</h3>
+    <h3 class="forge-typography--heading2">Start Icon</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <forge-icon slot="leading" name="wifi"></forge-icon>
+          <forge-icon slot="start" name="wifi"></forge-icon>
           <button>List Item</button>
         </forge-list-item>
         <forge-list-item>
-          <forge-icon slot="leading" name="bluetooth"></forge-icon>
+          <forge-icon slot="start" name="bluetooth"></forge-icon>
           <button>List Item</button>
         </forge-list-item>
         <forge-list-item>
-          <forge-icon slot="leading" name="data_usage"></forge-icon>
+          <forge-icon slot="start" name="data_usage"></forge-icon>
           <button>List Item</button>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
   
-  <!-- Trailing Icon -->
+  <!-- End Icon -->
   <div>
-    <h3 class="forge-typography--heading2">Trailing Icon</h3>
+    <h3 class="forge-typography--heading2">End Icon</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
           <button>List Item</button>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-list-item>
           <button>List Item</button>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-list-item>
           <button>List Item</button>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
   
-  <!-- Two-Line with Leading and Trailing Icon and Divider -->
+  <!-- Two-Line with Start and End Icon and Divider -->
   <div>
-    <h3 class="forge-typography--heading2">Two-Line with Leading and Trailing Icon and Divider</h3>
+    <h3 class="forge-typography--heading2">Two-Line with Start and End Icon and Divider</h3>
     <div class="list-demo" style="--forge-avatar-background: var(--forge-theme-text-medium);">
       <forge-list two-line>
         <forge-list-item>
-          <forge-avatar slot="leading">
+          <forge-avatar slot="start">
             <forge-icon  external name="folder"></forge-icon>
           </forge-avatar>
           <button type="button">Dog Photos</button>
           <span slot="secondary-text">9 Jan 2018</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-list-item>
-          <forge-avatar slot="leading">
+          <forge-avatar slot="start">
             <forge-icon  external name="folder"></forge-icon>
           </forge-avatar>
           <button type="button">Cat Photos</button>
           <span slot="secondary-text">22 Dec 2017</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-divider aria-hidden="true"></forge-divider>
         <forge-list-item>
-          <forge-avatar slot="leading">
+          <forge-avatar slot="start">
             <forge-icon  external name="folder"></forge-icon>
           </forge-avatar>
           <button type="button">Potatoes</button>
           <span slot="secondary-text">30 Nov 2017</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
         <forge-list-item>
-          <forge-avatar slot="leading">
+          <forge-avatar slot="start">
             <forge-icon  external name="folder"></forge-icon>
           </forge-avatar>
           <button type="button">Carrots</button>
           <span slot="secondary-text">17 Oct 2017</span>
-          <forge-icon slot="trailing" name="info"></forge-icon>
+          <forge-icon slot="end" name="info"></forge-icon>
         </forge-list-item>
       </forge-list>
     </div>
@@ -345,9 +345,9 @@
       <forge-list>
         <forge-expansion-panel>
           <forge-list-item slot="header">
-            <forge-icon slot="leading" name="code"></forge-icon>
+            <forge-icon slot="start" name="code"></forge-icon>
             <button type="button">List Item One</button>
-            <forge-open-icon slot="trailing"></forge-open-icon>
+            <forge-open-icon slot="end"></forge-open-icon>
           </forge-list-item>
           <div role="listitem">
             <forge-list indented>
@@ -366,9 +366,9 @@
         <forge-divider role="presentation"></forge-divider>
         <forge-expansion-panel>
           <forge-list-item slot="header">
-            <forge-icon slot="leading" name="face"></forge-icon>
+            <forge-icon slot="start" name="face"></forge-icon>
             <button type="button">List Item Two</button>
-            <forge-open-icon slot="trailing"></forge-open-icon>
+            <forge-open-icon slot="end"></forge-open-icon>
           </forge-list-item>
           <div role="listitem">
             <forge-list indented>
@@ -392,106 +392,106 @@
     </div>
   </div>
   
-  <!-- List with Leading Checkbox -->
+  <!-- List with Start Checkbox -->
   <div>
-    <h3 class="forge-typography--heading2">List with Leading Checkbox</h3>
+    <h3 class="forge-typography--heading2">List with Start Checkbox</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <span id="leading-checkbox-1">List Item One</span>
-          <forge-checkbox slot="leading" checked aria-labelledby="leading-checkbox-1"></forge-checkbox>
+          <span id="start-checkbox-1">List Item One</span>
+          <forge-checkbox slot="start" checked aria-labelledby="start-checkbox-1"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <span id="leading-checkbox-2">List Item Two</span>
-          <forge-checkbox slot="leading" aria-labelledby="leading-checkbox-2"></forge-checkbox>
+          <span id="start-checkbox-2">List Item Two</span>
+          <forge-checkbox slot="start" aria-labelledby="start-checkbox-2"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <span id="leading-checkbox-3">List Item Three</span>
-          <forge-checkbox slot="leading" aria-labelledby="leading-checkbox-3"></forge-checkbox>
+          <span id="start-checkbox-3">List Item Three</span>
+          <forge-checkbox slot="start" aria-labelledby="start-checkbox-3"></forge-checkbox>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
   
-  <!-- List with Trailing Checkbox -->
+  <!-- List with End Checkbox -->
   <div>
-    <h3 class="forge-typography--heading2">List with Trailing Checkbox</h3>
+    <h3 class="forge-typography--heading2">List with End Checkbox</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <label for="trailing-checkbox-3">List Item</label>
-          <forge-checkbox id="trailing-checkbox-3" slot="trailing" checked aria-label="Select list item one with trailing"></forge-checkbox>
+          <label for="end-checkbox-3">List Item</label>
+          <forge-checkbox id="end-checkbox-3" slot="end" checked aria-label="Select list item one with end"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <label for="trailing-checkbox-4">List Item</label>
-          <forge-checkbox id="trailing-checkbox-4" slot="trailing" aria-label="Select list item two with trailing"></forge-checkbox>
+          <label for="end-checkbox-4">List Item</label>
+          <forge-checkbox id="end-checkbox-4" slot="end" aria-label="Select list item two with end"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <label for="trailing-checkbox-5">List Item</label>
-          <forge-checkbox id="trailing-checkbox-5" slot="trailing" aria-label="Select list item three with trailing"></forge-checkbox>
+          <label for="end-checkbox-5">List Item</label>
+          <forge-checkbox id="end-checkbox-5" slot="end" aria-label="Select list item three with end"></forge-checkbox>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
   
-  <!-- List with Leading Radio Buttons -->
+  <!-- List with Start Radio Buttons -->
   <div>
-    <h3 class="forge-typography--heading2">List with Leading Radio Buttons</h3>
+    <h3 class="forge-typography--heading2">List with Start Radio Buttons</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <forge-radio slot="leading" name="list-with-leading-radios" aria-labelledby="leading-radio-1"></forge-radio>
-          <span id="leading-radio-1">List Item</span>
+          <forge-radio slot="start" name="list-with-start-radios" aria-labelledby="start-radio-1"></forge-radio>
+          <span id="start-radio-1">List Item</span>
         </forge-list-item>
         <forge-list-item>
-          <forge-radio slot="leading" name="list-with-leading-radios" aria-labelledby="leading-radio-2" checked></forge-radio>
-          <span id="leading-radio-2">List Item</span>
+          <forge-radio slot="start" name="list-with-start-radios" aria-labelledby="start-radio-2" checked></forge-radio>
+          <span id="start-radio-2">List Item</span>
         </forge-list-item>
         <forge-list-item>
-          <forge-radio slot="leading" name="list-with-leading-radios" aria-labelledby="leading-radio-3"></forge-radio>
-          <span id="leading-radio-3">List Item</span>
+          <forge-radio slot="start" name="list-with-start-radios" aria-labelledby="start-radio-3"></forge-radio>
+          <span id="start-radio-3">List Item</span>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
   
-  <!-- List with Trailing Radio Buttons -->
+  <!-- List with End Radio Buttons -->
   <div>
-    <h3 class="forge-typography--heading2">List with Trailing Radio Buttons</h3>
+    <h3 class="forge-typography--heading2">List with End Radio Buttons</h3>
     <div class="list-demo">
       <forge-list aria-label="Choose radio option">
         <forge-list-item>
-          <label for="trailing-radio-1">List Item</label>
-          <forge-radio id="trailing-radio-1" slot="trailing" name="list-radio-trailing" aria-label="Select list item one with trailing radio"></forge-radio>
+          <label for="end-radio-1">List Item</label>
+          <forge-radio id="end-radio-1" slot="end" name="list-radio-end" aria-label="Select list item one with end radio"></forge-radio>
         </forge-list-item>
         <forge-list-item>
-          <label for="trailing-radio-2">List Item</label>
-          <forge-radio id="trailing-radio-2" slot="trailing" name="list-radio-trailing" checked aria-label="Select list item two with trailing radio"></forge-radio>
+          <label for="end-radio-2">List Item</label>
+          <forge-radio id="end-radio-2" slot="end" name="list-radio-end" checked aria-label="Select list item two with end radio"></forge-radio>
         </forge-list-item>
         <forge-list-item>
-          <label for="trailing-radio-3">List Item</label>
-          <forge-radio id="trailing-radio-3" slot="trailing" name="list-radio-trailing" aria-label="Select list item three with trailing radio"></forge-radio>
+          <label for="end-radio-3">List Item</label>
+          <forge-radio id="end-radio-3" slot="end" name="list-radio-end" aria-label="Select list item three with end radio"></forge-radio>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
     
-  <!-- List with Trailing Switch -->
+  <!-- List with End Switch -->
   <div>
-    <h3 class="forge-typography--heading2">List with Trailing Switch</h3>
+    <h3 class="forge-typography--heading2">List with End Switch</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <label for="trailing-switch-1">List Item</label>
-          <forge-switch id="trailing-switch-1" slot="trailing" aria-label="Toggle list item"></forge-switch>
+          <label for="end-switch-1">List Item</label>
+          <forge-switch id="end-switch-1" slot="end" aria-label="Toggle list item"></forge-switch>
         </forge-list-item>
         <forge-list-item>
-          <label for="trailing-switch-2">List Item</label>
-          <forge-switch id="trailing-switch-2" slot="trailing" checked aria-label="Toggle list item"></forge-switch>
+          <label for="end-switch-2">List Item</label>
+          <forge-switch id="end-switch-2" slot="end" checked aria-label="Toggle list item"></forge-switch>
         </forge-list-item>
         <forge-list-item>
-          <label for="trailing-switch-3">List Item</label>
-          <forge-switch id="trailing-switch-3" slot="trailing" aria-label="Toggle list item"></forge-switch>
+          <label for="end-switch-3">List Item</label>
+          <forge-switch id="end-switch-3" slot="end" aria-label="Toggle list item"></forge-switch>
         </forge-list-item>
       </forge-list>
     </div>
@@ -503,19 +503,19 @@
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <forge-checkbox tabindex="-1" slot="leading" checked aria-label="Select list item one with ignored trailing checkbox"></forge-checkbox>
+          <forge-checkbox tabindex="-1" slot="start" checked aria-label="Select list item one with ignored end checkbox"></forge-checkbox>
           <button>List Item</button>
-          <forge-checkbox tabindex="-1" slot="trailing" forge-ignore aria-label="Select list item with trailing checkbox and ignored leading checkbox"></forge-checkbox>
+          <forge-checkbox tabindex="-1" slot="end" forge-ignore aria-label="Select list item with end checkbox and ignored start checkbox"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <forge-checkbox tabindex="-1" slot="leading" aria-label="Select list item with leading checkbox and ignored trailing checkbox"></forge-checkbox>
+          <forge-checkbox tabindex="-1" slot="start" aria-label="Select list item with start checkbox and ignored end checkbox"></forge-checkbox>
           <button>List Item</button>
-          <forge-checkbox tabindex="-1" slot="trailing" forge-ignore aria-label="Select list item two with ignored trailing checkbox"></forge-checkbox>
+          <forge-checkbox tabindex="-1" slot="end" forge-ignore aria-label="Select list item two with ignored end checkbox"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <forge-checkbox tabindex="-1" slot="leading" aria-label="Select list item"></forge-checkbox>
+          <forge-checkbox tabindex="-1" slot="start" aria-label="Select list item"></forge-checkbox>
           <button>List Item</button>
-          <forge-checkbox tabindex="-1" slot="trailing" forge-ignore aria-label="Select list item three with ignored trailing checkbox"></forge-checkbox>
+          <forge-checkbox tabindex="-1" slot="end" forge-ignore aria-label="Select list item three with ignored end checkbox"></forge-checkbox>
         </forge-list-item>
       </forge-list>
     </div>
@@ -551,33 +551,33 @@
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <button type="button">List Item (ignore leading)</button>
-          <forge-checkbox slot="leading" tabindex="-1" forge-ignore aria-label="Select list item with ignored leading checkbox"></forge-checkbox>
+          <button type="button">List Item (ignore start)</button>
+          <forge-checkbox slot="start" tabindex="-1" forge-ignore aria-label="Select list item with ignored start checkbox"></forge-checkbox>
         </forge-list-item>
         <forge-list-item>
           List Item w/switch
-          <forge-switch slot="trailing" aria-label="Toggle list item with trailing switch"></forge-switch>
+          <forge-switch slot="end" aria-label="Toggle list item with end switch"></forge-switch>
         </forge-list-item>
 
         <forge-list-item>
           <button>List Item ignore switch</button>
-          <forge-switch slot="trailing" tabindex="-1" aria-label="Toggle list item with ignored trailing switch" forge-ignore></forge-switch>
+          <forge-switch slot="end" tabindex="-1" aria-label="Toggle list item with ignored end switch" forge-ignore></forge-switch>
         </forge-list-item>
 
         <forge-list-item>
           <button type="button" aria-labelledby="li-3"></button>
-          <span id="li-3">List Item (ignore trailing)</span>
-          <forge-checkbox slot="trailing" tabindex="-1" forge-ignore aria-label="Select list item with ignored trailing checkbox"></forge-checkbox>
+          <span id="li-3">List Item (ignore end)</span>
+          <forge-checkbox slot="end" tabindex="-1" forge-ignore aria-label="Select list item with ignored end checkbox"></forge-checkbox>
         </forge-list-item>
 
         <forge-list-item>
-          List Item w/leading
-          <forge-checkbox slot="leading" aria-label="Select list item with leading labeled button"></forge-checkbox>
+          List Item w/start
+          <forge-checkbox slot="start" aria-label="Select list item with start labeled button"></forge-checkbox>
         </forge-list-item>
 
         <forge-list-item>
-          List Item Two w/trailing
-          <forge-checkbox slot="trailing" aria-label="Select list item with checkable trailing checkbox"></forge-checkbox>
+          List Item Two w/end
+          <forge-checkbox slot="end" aria-label="Select list item with checkable end checkbox"></forge-checkbox>
         </forge-list-item>
 
         <forge-list-item>
@@ -591,13 +591,13 @@
         </forge-list-item>
 
         <forge-list-item>
-          <forge-icon-button slot="leading" aria-label="Test leading button">
+          <forge-icon-button slot="start" aria-label="Test start button">
             <forge-icon name="forge_logo"></forge-icon>
           </forge-icon-button>
 
           <button type="button">List Item w/icon button</button>
           
-          <forge-icon-button slot="trailing" aria-label="Test trailing button">
+          <forge-icon-button slot="end" aria-label="Test end button">
             <forge-icon name="forge_logo"></forge-icon>
           </forge-icon-button>
         </forge-list-item>
@@ -646,15 +646,15 @@
       <forge-list>
         <forge-list-item>
           <a href="javascript: console.log('https://www.google.com/');">Google</a>
-          <forge-icon slot="trailing"  name="open_in_new"></forge-icon>
+          <forge-icon slot="end"  name="open_in_new"></forge-icon>
         </forge-list-item>
         <forge-list-item>
           <a href="javascript: console.log('https://www.bing.com/');">Bing</a>
-          <forge-icon slot="trailing"  name="open_in_new"></forge-icon>
+          <forge-icon slot="end"  name="open_in_new"></forge-icon>
         </forge-list-item>
         <forge-list-item>
           <a href="javascript: console.log('https://www.yahoo.com/');">Yahoo</a>
-          <forge-icon slot="trailing" name="open_in_new"></forge-icon>
+          <forge-icon slot="end" name="open_in_new"></forge-icon>
         </forge-list-item>
       </forge-list>
     </div>
diff --git a/src/lib/core/styles/tokens/list/list-item/_tokens.scss b/src/lib/core/styles/tokens/list/list-item/_tokens.scss
index 4c01d2982..987ad4809 100644
--- a/src/lib/core/styles/tokens/list/list-item/_tokens.scss
+++ b/src/lib/core/styles/tokens/list/list-item/_tokens.scss
@@ -26,8 +26,8 @@ $tokens: (
   // Selected
   selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)),
   selected-opacity: utils.module-val(list-item, selected-opacity, theme.emphasis(lowest)),
-  selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color),
-  selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color),
+  selected-start-color: utils.module-ref(list-item, selected-start-color, selected-color),
+  selected-end-color: utils.module-ref(list-item, selected-end-color, selected-color),
   selected-text-color: utils.module-val(list-item, selected-text-color, theme.variable(text-medium)),
 
   // Disabled
@@ -47,11 +47,11 @@ $tokens: (
   dense-indent: utils.module-val(list-item, dense-indent, spacing.variable(xxlarge)),
   dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(xsmall)),
 
-  // Leading
-  leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
+  // Start
+  start-selected-color: utils.module-ref(list-item, start-selected-color, selected-color),
 
-  // Trailing
-  trailing-selected-color: utils.module-ref(list-item, trailing-selected-color, selected-color),
+  // end
+  end-selected-color: utils.module-ref(list-item, end-selected-color, selected-color),
 
   // Wrap
   wrap-padding: utils.module-val(list-item, wrap-padding, spacing.variable(xsmall) spacing.variable(medium)),
diff --git a/src/lib/list/list-item/_core.scss b/src/lib/list/list-item/_core.scss
index bf422038d..75bbc9041 100644
--- a/src/lib/list/list-item/_core.scss
+++ b/src/lib/list/list-item/_core.scss
@@ -89,19 +89,19 @@
   }
 }
 
-@mixin leading-selected {
-  color: #{token(leading-selected-color)};
+@mixin start-selected {
+  color: #{token(start-selected-color)};
 }
 
-@mixin trailing-selected {
-  color: #{token(trailing-selected-color)};
+@mixin end-selected {
+  color: #{token(end-selected-color)};
 }
 
 @mixin text-container-selected {
   color: #{token(selected-color)};
 }
 
-@mixin leading-trailing-selected {
+@mixin start-end-selected {
   color: #{token(selected-color)};
 }
 
@@ -156,7 +156,7 @@
   margin-inline-start: #{token(dense-indent)};
 }
 
-@mixin leading-trailing-base {
+@mixin start-end-base {
   color: #{token(text-color)};
   display: inline-flex;
   flex-shrink: 0;
diff --git a/src/lib/list/list-item/list-item-adapter.ts b/src/lib/list/list-item/list-item-adapter.ts
index 8e5486c72..8ccd6af45 100644
--- a/src/lib/list/list-item/list-item-adapter.ts
+++ b/src/lib/list/list-item/list-item-adapter.ts
@@ -25,8 +25,8 @@ export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
 export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
   private readonly _rootElement: HTMLElement;
   private readonly _defaultSlotElement: HTMLSlotElement;
-  private readonly _leadingSlotElement: HTMLSlotElement;
-  private readonly _trailingSlotElement: HTMLSlotElement;
+  private readonly _startSlotElement: HTMLSlotElement;
+  private readonly _endSlotElement: HTMLSlotElement;
   private _focusIndicatorElement: IFocusIndicatorComponent | undefined;
   private _stateLayerElement: IStateLayerComponent | undefined;
   private _disabledAttrObserver: MutationObserver | undefined;
@@ -39,8 +39,8 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
     super(component);
     this._rootElement = getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.ROOT);
     this._defaultSlotElement = getShadowElement(component, 'slot:not([name])') as HTMLSlotElement;
-    this._leadingSlotElement = getShadowElement(component, 'slot[name=leading]') as HTMLSlotElement;
-    this._trailingSlotElement = getShadowElement(component, 'slot[name=trailing]') as HTMLSlotElement;
+    this._startSlotElement = getShadowElement(component, 'slot[name=start]') as HTMLSlotElement;
+    this._endSlotElement = getShadowElement(component, 'slot[name=end]') as HTMLSlotElement;
   }
 
   public get interactiveElement(): HTMLElement | HTMLAnchorElement | undefined {
@@ -113,8 +113,8 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
   }
 
   private _onSlotChange(evt: Event): void {
-    // We only care about slot changes in the default slot, leading slot, and trailing slot to search for interactive elements
-    const interactiveSlotNames = ['', 'leading', 'trailing'];
+    // We only care about slot changes in the default slot, start/leading slot, and end/trailing slot to search for interactive elements
+    const interactiveSlotNames = ['', 'start', 'end', 'leading', 'trailing'];
     const isInteractiveSlot = interactiveSlotNames.includes((evt.target as HTMLSlotElement).name);
     if (!isInteractiveSlot) {
       return;
@@ -127,10 +127,10 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
 
     // We always want to check for form control-like elements first as those take precedence over slotted anchor and button
     // elements as the interactive element.
-    const assignedLeadingElements = this._leadingSlotElement.assignedElements({ flatten: true });
-    const assignedTrailingElements = this._trailingSlotElement.assignedElements({ flatten: true });
-    const assignedLeadingTrailingElements = [...assignedLeadingElements, ...assignedTrailingElements];
-    const slottedFormControl = assignedLeadingTrailingElements.find(e => e.matches(LIST_ITEM_CONSTANTS.selectors.FORM_CONTROL_LIKE)) as HTMLElement | undefined;
+    const assignedStartElements = this._startSlotElement.assignedElements({ flatten: true });
+    const assignedEndElements = this._endSlotElement.assignedElements({ flatten: true });
+    const assignedStartEndElements = [...assignedStartElements, ...assignedEndElements];
+    const slottedFormControl = assignedStartEndElements.find(e => e.matches(LIST_ITEM_CONSTANTS.selectors.FORM_CONTROL_LIKE)) as HTMLElement | undefined;
     if (slottedFormControl) {
       this._attachInteractiveFormControl(slottedFormControl);
       return;
diff --git a/src/lib/list/list-item/list-item-constants.ts b/src/lib/list/list-item/list-item-constants.ts
index 597872ad4..fd35a5b6a 100644
--- a/src/lib/list/list-item/list-item-constants.ts
+++ b/src/lib/list/list-item/list-item-constants.ts
@@ -31,11 +31,11 @@ const ids = {
 
 const selectors = {
   ROOT: `.${classes.ROOT}`,
-  FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=leading],[slot=trailing]):not([forge-ignore])',
+  FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])',
   BUTTON_LIKE: ':is(button,[role=button][tabindex]:not([tabindex=-1]),[forge-list-item-interactive]):not([forge-ignore])',
   IGNORE: '[forge-ignore],[data-forge-ignore]',
   INTERNAL_ANCHOR: `#${ids.INTERNAL_ANCHOR}`,
-  SLOTTED_LEADING_TRAILING: ':is([slot=leading],[slot=trailing])'
+  SLOTTED_START_END: ':is([slot=start],[slot=end],[slot=leading],[slot=trailing])'
 };
 
 const events = {
diff --git a/src/lib/list/list-item/list-item-foundation.ts b/src/lib/list/list-item/list-item-foundation.ts
index 8835ede19..8e33bce18 100644
--- a/src/lib/list/list-item/list-item-foundation.ts
+++ b/src/lib/list/list-item/list-item-foundation.ts
@@ -56,13 +56,13 @@ export class ListItemFoundation implements IListItemFoundation {
 
   private _onKeydown(evt: KeyboardEvent): void {
     const composedElements = evt.composedPath().filter((el: Element) => el.nodeType === Node.ELEMENT_NODE);
-    const isFromLeadingTrailingSlot = composedElements.some((el: HTMLElement) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_LEADING_TRAILING));
+    const isFromStartEndSlot = composedElements.some((el: HTMLElement) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END));
 
     if (evt.key === 'Enter' || evt.key === ' ') {
       evt.stopPropagation();
     }
 
-    if (isFromLeadingTrailingSlot) {
+    if (isFromStartEndSlot) {
       if (evt.key === 'Enter' || evt.key === ' ') {
         this._adapter.animateStateLayer();
       }
diff --git a/src/lib/list/list-item/list-item.html b/src/lib/list/list-item/list-item.html
index 89da62ec6..db45e51ff 100644
--- a/src/lib/list/list-item/list-item.html
+++ b/src/lib/list/list-item/list-item.html
@@ -1,11 +1,15 @@
 <template>
   <div class="forge-list-item" part="root">
-    <slot name="leading"></slot>
+    <slot name="start">
+      <slot name="leading"></slot>
+    </slot>
     <div class="text-container" part="text-container">
       <slot></slot>
       <slot name="secondary-text"></slot>
       <slot name="tertiary-text"></slot>
     </div>
-    <slot name="trailing"></slot>
+    <slot name="end">
+      <slot name="trailing"></slot>
+    </slot>
   </div>
 </template>
diff --git a/src/lib/list/list-item/list-item.scss b/src/lib/list/list-item/list-item.scss
index b87eba319..edd01273e 100644
--- a/src/lib/list/list-item/list-item.scss
+++ b/src/lib/list/list-item/list-item.scss
@@ -93,22 +93,26 @@ $_host-tokens: [indent dense-indent disabled-cursor];
   }
 }
 
-// Dense leading/trailing
+// Dense start/end
 :host([selected]) {
   .forge-list-item {
     @include selected;
 
+    ::slotted([slot=start]),
+    ::slotted([slot=end]),
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
-      @include leading-trailing-selected;
+      @include start-end-selected;
     }
 
+    ::slotted([slot=start]),
     ::slotted([slot=leading]) {
-      @include leading-selected;
+      @include start-selected;
     }
 
+    ::slotted([slot=end]),
     ::slotted([slot=trailing]) {
-      @include trailing-selected;
+      @include end-selected;
     }
   }
 
@@ -155,31 +159,35 @@ slot[name=tertiary-text] {
   @include anchor;
 }
 
-// Leading/trailing slotted elements
+// Start/end slotted elements
+::slotted([slot=start]),
+::slotted([slot=end]),
 ::slotted([slot=leading]),
 ::slotted([slot=trailing]) {
-  @include leading-trailing-base;
+  @include start-end-base;
 }
 
 // Interactive slotted form controls to hide state-layer and focus-indicator
 :host(:not([noninteractive])) {
-  ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=leading],[slot=trailing]):not([forge-ignore])) {
+  ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])) {
     @include focus-indicator.provide-theme(( display: none ));
     @include state-layer.provide-theme(( display: none ));
   }
 }
 
-// Leading slotted elements
+// Start slotted elements
+::slotted([slot=start]),
 ::slotted([slot=leading]) {
   :host([selected]) & {
-    @include leading-selected;
+    @include start-selected;
   }
 }
 
-// Trailing slotted elements
+// End slotted elements
+::slotted([slot=end]),
 ::slotted([slot=trailing]) {
   :host([selected]) & {
-    @include trailing-selected;
+    @include end-selected;
   }
 }
 
diff --git a/src/lib/list/list-item/list-item.ts b/src/lib/list/list-item/list-item.ts
index 45a89a9df..e8cf4dc27 100644
--- a/src/lib/list/list-item/list-item.ts
+++ b/src/lib/list/list-item/list-item.ts
@@ -63,15 +63,10 @@ declare global {
  * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
  * 
  * @slot - The primary text.
- * @slot primary-text - The primary text. A named alias for the default slot.
  * @slot secondary-text - The secondary text.
  * @slot tertiary-text - The tertiary text.
- * @slot title - The title element. An alias for the primary-text slot for backwards compatibility.
- * @slot subtitle - The subtitle element. An alias for the secondary-text slot for backwards compatibility.
- * @slot tertiary-title - The tertiary title element. An alias for the tertiary-text slot for backwards compatibility.
- * @slot leading - The leading content.
- * @slot trailing - The trailing element.
- * @slot avatar - The avatar content.
+ * @slot start - The start content.
+ * @slot end - The end element.
  * 
  * @csspart root - The root container element.
  * @csspart text-container - The container for the text content.
@@ -94,8 +89,8 @@ declare global {
  * @cssproperty --forge-list-item-text-line-height - The line height of the text.
  * @cssproperty --forge-list-item-selected-color - The color when in the selected state.
  * @cssproperty --forge-list-item-opacity - The opacity of the background color when in the disabled state.
- * @cssproperty --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
- * @cssproperty --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-selected-start-color - The color of the start content when in the selected state.
+ * @cssproperty --forge-list-item-selected-end-color - The color of the end content when in the selected state.
  * @cssproperty --forge-list-item-selected-text-color - The color of the text when in the selected state.
  * @cssproperty --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
  * @cssproperty --forge-list-item-disabled-cursor - The cursor when in the disabled state.
@@ -108,8 +103,8 @@ declare global {
  * @cssproperty --forge-list-item-dense-font-size - The font size when in the dense state.
  * @cssproperty --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
  * @cssproperty --forge-list-item-dense-gap - The gap between the slotted content when in the dense state.
- * @cssproperty --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
- * @cssproperty --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
+ * @cssproperty --forge-list-item-start-selected-color - The color of the start content when in the selected state.
+ * @cssproperty --forge-list-item-end-selected-color - The color of the end content when in the selected state.
  * @cssproperty --forge-list-item-avatar-background-color - The background color of the avatar container.
  * @cssproperty --forge-list-item-avatar-color - The foreground color of the avatar container.
  * @cssproperty --forge-list-item-avatar-shape - The shape of the avatar container.
diff --git a/src/lib/list/list.test.ts b/src/lib/list/list.test.ts
index 26b966aab..9850256c1 100644
--- a/src/lib/list/list.test.ts
+++ b/src/lib/list/list.test.ts
@@ -231,7 +231,7 @@ describe('List', () => {
     it('should have focus indicator when checkbox is present', async () => {
       const el = await fixture<IListComponent>(html`
         <forge-list-item>
-          <input type="checkbox" slot="leading" />
+          <input type="checkbox" slot="start" />
           Test Item
         </forge-list-item>
       `);
@@ -243,7 +243,7 @@ describe('List', () => {
     it('should have focus indicator when radio button is present', async () => {
       const el = await fixture<IListComponent>(html`
         <forge-list-item>
-          <input type="radio" slot="leading" />
+          <input type="radio" slot="start" />
           Test Item
         </forge-list-item>
       `);
@@ -308,7 +308,7 @@ describe('List', () => {
     it('should have state layer when checkbox is present', async () => {
       const el = await fixture<IListComponent>(html`
         <forge-list-item>
-          <input type="checkbox" slot="leading" />
+          <input type="checkbox" slot="start" />
           Test Item
         </forge-list-item>
       `);
@@ -320,7 +320,7 @@ describe('List', () => {
     it('should have state layer when radio button is present', async () => {
       const el = await fixture<IListComponent>(html`
         <forge-list-item>
-          <input type="radio" slot="leading" />
+          <input type="radio" slot="start" />
           Test Item
         </forge-list-item>
       `);
@@ -362,7 +362,7 @@ describe('List', () => {
         <forge-list>
           <forge-list-item>
             Test Item
-            <input type="checkbox" slot="leading" />
+            <input type="checkbox" slot="start" />
           </forge-list-item>
         </forge-list>
       `);
@@ -747,12 +747,12 @@ describe('List', () => {
   });
 
   describe('with form control', () => {
-    it('should toggle slotted leading form control when clicked', async () => {
+    it('should toggle slotted start form control when clicked', async () => {
       const el = await fixture<IListComponent>(html`
         <forge-list>
           <forge-list-item>
             Test Item
-            <input type="checkbox" slot="leading" />
+            <input type="checkbox" slot="start" />
           </forge-list-item>
         </forge-list>
       `);
@@ -766,12 +766,12 @@ describe('List', () => {
       expect(checkbox.checked).to.be.true;
     });
 
-    it('should not toggle leading checkbox if forge-ignore attribute is present', async () => {
+    it('should not toggle start checkbox if forge-ignore attribute is present', async () => {
       const el = await fixture<IListComponent>(html`
         <forge-list>
           <forge-list-item>
             Test Item
-            <input type="checkbox" slot="leading" forge-ignore />
+            <input type="checkbox" slot="start" forge-ignore />
           </forge-list-item>
         </forge-list>
       `);
@@ -790,7 +790,7 @@ describe('List', () => {
         <forge-list>
           <forge-list-item>
             <label for="the-checkbox">Test Item</label>
-            <input type="checkbox" id="the-checkbox" slot="leading" />
+            <input type="checkbox" id="the-checkbox" slot="start" />
           </forge-list-item>
         </forge-list>
       `);
@@ -814,7 +814,7 @@ describe('List', () => {
         <forge-list>
           <forge-list-item>
             Test Item
-            <input type="checkbox" slot="leading" />
+            <input type="checkbox" slot="start" />
           </forge-list-item>
         </forge-list>
       `);
@@ -865,8 +865,8 @@ async function createFixture({
       .selectedValue=${selectedValue}>
       <forge-list-item value="1">
         <button ?disabled=${disabled}>One</button>
-        ${withCheckbox ? html`<input type="checkbox" slot="trailing" />` : null}
-        ${withRadioButton ? html`<input type="radio" slot="trailing" />` : null}
+        ${withCheckbox ? html`<input type="checkbox" slot="end" />` : null}
+        ${withRadioButton ? html`<input type="radio" slot="end" />` : null}
       </forge-list-item>
       <forge-list-item value="2"><button>Two</button></forge-list-item>
       <forge-list-item value="3"><button>Three</button></forge-list-item>