diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md
index 4a6ba4db9..927ecdc9c 100644
--- a/docs/components/tab-group.md
+++ b/docs/components/tab-group.md
@@ -40,12 +40,12 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
 </sl-tab-group>
 ```
 
-### Tabs on Left
+### Tabs on Start
 
-Tabs can be shown on the left by setting `placement` to `left`.
+Tabs can be shown on the starting side by setting `placement` to `start`.
 
 ```html preview
-<sl-tab-group placement="left">
+<sl-tab-group placement="start">
   <sl-tab slot="nav" panel="general">General</sl-tab>
   <sl-tab slot="nav" panel="custom">Custom</sl-tab>
   <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
@@ -58,12 +58,12 @@ Tabs can be shown on the left by setting `placement` to `left`.
 </sl-tab-group>
 ```
 
-### Tabs on Right
+### Tabs on End
 
-Tabs can be shown on the right by setting `placement` to `right`.
+Tabs can be shown on the ending side by setting `placement` to `end`.
 
 ```html preview
-<sl-tab-group placement="right">
+<sl-tab-group placement="end">
   <sl-tab slot="nav" panel="general">General</sl-tab>
   <sl-tab slot="nav" panel="custom">Custom</sl-tab>
   <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
diff --git a/src/components/tab-group/tab-group.scss b/src/components/tab-group/tab-group.scss
index 3af179227..b397a11b7 100644
--- a/src/components/tab-group/tab-group.scss
+++ b/src/components/tab-group/tab-group.scss
@@ -44,11 +44,11 @@
   width: var(--sl-spacing-x-large);
 }
 
-.tab-group__scroll-button--left {
+.tab-group__scroll-button--start {
   left: 0;
 }
 
-.tab-group__scroll-button--right {
+.tab-group__scroll-button--end {
   right: 0;
 }
 
@@ -124,7 +124,7 @@
 // Left
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-.tab-group--left {
+.tab-group--start {
   flex-direction: row;
 
   .tab-group__nav-container {
@@ -152,7 +152,7 @@
 // Right
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-.tab-group--right {
+.tab-group--end {
   flex-direction: row;
 
   .tab-group__nav-container {
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 48b4a1822..e7e814c6f 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -45,7 +45,7 @@ export default class SlTabGroup extends LitElement {
   @state() private hasScrollControls = false;
 
   /** The placement of the tabs. */
-  @property() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+  @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
 
   /**
    * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
@@ -298,8 +298,8 @@ export default class SlTabGroup extends LitElement {
         this.indicator.style.transform = `translateX(${offsetLeft}px)`;
         break;
 
-      case 'left':
-      case 'right':
+      case 'start':
+      case 'end':
         this.indicator.style.width = 'auto';
         this.indicator.style.height = `${height}px`;
         this.indicator.style.transform = `translateY(${offsetTop}px)`;
@@ -333,8 +333,8 @@ export default class SlTabGroup extends LitElement {
           'tab-group': true,
           'tab-group--top': this.placement === 'top',
           'tab-group--bottom': this.placement === 'bottom',
-          'tab-group--left': this.placement === 'left',
-          'tab-group--right': this.placement === 'right',
+          'tab-group--start': this.placement === 'start',
+          'tab-group--end': this.placement === 'end',
           'tab-group--has-scroll-controls': this.hasScrollControls
         })}
         @click=${this.handleClick}