diff --git a/core/src/components/segment-content/segment-content.scss b/core/src/components/segment-content/segment-content.scss
index 9dd510b5d9..cec9a0b031 100644
--- a/core/src/components/segment-content/segment-content.scss
+++ b/core/src/components/segment-content/segment-content.scss
@@ -2,6 +2,8 @@
 
 :host {
   scroll-snap-align: center;
+
   flex-shrink: 0;
+
   width: 100%;
 }
diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx
index b61c07bdba..96389d8b2d 100644
--- a/core/src/components/segment-view/segment-view.tsx
+++ b/core/src/components/segment-view/segment-view.tsx
@@ -50,9 +50,9 @@ export class SegmentView implements ComponentInterface {
     this.el.scrollTo({
       top: 0,
       left: index * sectionWidth,
-      behavior: 'smooth'
+      behavior: 'smooth',
     });
-  }
+  };
 
   private getSegmentButtons(): HTMLIonSegmentButtonElement[] | [] {
     const { segmentEl } = this;
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index fa6e426f53..08ded86aa3 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -83,8 +83,8 @@ export class Segment implements ComponentInterface {
   protected valueChanged(value: SegmentValue | undefined, oldValue?: SegmentValue | undefined) {
     if (oldValue !== undefined && value !== undefined) {
       const buttons = this.getButtons();
-      const previous = buttons.find(button => button.value === oldValue);
-      const current = buttons.find(button => button.value === value);
+      const previous = buttons.find((button) => button.value === oldValue);
+      const current = buttons.find((button) => button.value === value);
 
       if (previous && current) {
         this.checkButton(previous, current);
diff --git a/core/src/components/segment/test/content-component/index.html b/core/src/components/segment/test/content-component/index.html
index 4c1d08bb2f..51ea3c0139 100644
--- a/core/src/components/segment/test/content-component/index.html
+++ b/core/src/components/segment/test/content-component/index.html
@@ -1,83 +1,83 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment - Content Component</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <title>Segment - Content Component</title>
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-  <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Segment - Content Component</ion-title>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-segment view="myView" value="home">
-          <ion-segment-button value="home">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Home</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="radio">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Radio</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="library">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Library</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="search">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Search</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <ion-segment-view id="myView">
-        <ion-segment-content>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Home card title</ion-card-title>
-              <ion-card-content>Home card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </ion-segment-content>
-        <ion-segment-content>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Radio card title</ion-card-title>
-              <ion-card-content>Radio card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </ion-segment-content>
-        <ion-segment-content>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Library card title</ion-card-title>
-              <ion-card-content>Library card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </ion-segment-content>
-        <ion-segment-content>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Search card title</ion-card-title>
-              <ion-card-content>Search card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </ion-segment-content>
-      </ion-segment-view>
-    </ion-content>
-  </ion-app>
-</body>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Segment - Content Component</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-segment view="myView" value="home">
+            <ion-segment-button value="home">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Home</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="radio">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Radio</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="library">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Library</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="search">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Search</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
 
+      <ion-content>
+        <ion-segment-view id="myView">
+          <ion-segment-content>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Home card title</ion-card-title>
+                <ion-card-content>Home card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </ion-segment-content>
+          <ion-segment-content>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Radio card title</ion-card-title>
+                <ion-card-content>Radio card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </ion-segment-content>
+          <ion-segment-content>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Library card title</ion-card-title>
+                <ion-card-content>Library card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </ion-segment-content>
+          <ion-segment-content>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Search card title</ion-card-title>
+                <ion-card-content>Search card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </ion-segment-content>
+        </ion-segment-view>
+      </ion-content>
+    </ion-app>
+  </body>
 </html>
diff --git a/core/src/components/segment/test/content/index.html b/core/src/components/segment/test/content/index.html
index f035686d3e..952c50d507 100644
--- a/core/src/components/segment/test/content/index.html
+++ b/core/src/components/segment/test/content/index.html
@@ -1,133 +1,133 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment - Content</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
-<head>
-  <meta charset="UTF-8" />
-  <title>Segment - Content</title>
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-  <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      #segment-view {
+        display: flex;
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
 
-  <style>
-    #segment-view {
-      display: flex;
-      overflow-x: scroll;
-      scroll-snap-type: x mandatory;
+        /* Hide scrollbar in Firefox */
+        scrollbar-width: none;
 
-      /* Hide scrollbar in Firefox */
-      scrollbar-width: none;
-
-      /* Hide scrollbar in IE and Edge */
-      -ms-overflow-style: none;
-    }
-
-    /* Hide scrollbar in webkit */
-    #segment-view::-webkit-scrollbar {
-      display: none;
-    }
-
-    #segment-view .segment-content {
-      scroll-snap-align: center;
-      flex-shrink: 0;
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <ion-app>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Segment - Content</ion-title>
-      </ion-toolbar>
-      <ion-toolbar>
-        <ion-segment value="0">
-          <ion-segment-button value="0">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Home</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="1">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Radio</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="2">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Library</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="3">
-            <ion-icon name="triangle-outline"></ion-icon>
-            <ion-label>Search</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <div id="segment-view">
-        <div id="home" class="segment-content">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Home card title</ion-card-title>
-              <ion-card-content>Home card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </div>
-        <div id="radio" class="segment-content">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Radio card title</ion-card-title>
-              <ion-card-content>Radio card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </div>
-        <div id="library" class="segment-content">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Library card title</ion-card-title>
-              <ion-card-content>Library card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </div>
-        <div id="search" class="segment-content">
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>Search card title</ion-card-title>
-              <ion-card-content>Search card content</ion-card-content>
-            </ion-card-header>
-          </ion-card>
-        </div>
-      </div>
-    </ion-content>
-  </ion-app>
-
-  <script>
-    const segment = document.querySelector('ion-segment');
-    const segmentView = document.querySelector('#segment-view');
-
-    segment.addEventListener('ionChange', function(event) {
-      const index = event.detail.value;
-      const sectionWidth = segmentView.offsetWidth;
-      segmentView.scrollTo({
-        top: 0,
-        left: index * sectionWidth,
-        behavior: 'smooth'
-      });
-    });
-
-    segmentView.addEventListener('scroll', function(event) {
-      // Calculate the index of the current section when the scrolling ends
-      var atSnappingPoint = event.target.scrollLeft % event.target.offsetWidth === 0;
-
-      if (atSnappingPoint) {
-        const index = Math.round(event.target.scrollLeft / event.target.offsetWidth);
-        segment.value = `${index}`;
+        /* Hide scrollbar in IE and Edge */
+        -ms-overflow-style: none;
       }
-    });
-  </script>
-</body>
 
+      /* Hide scrollbar in webkit */
+      #segment-view::-webkit-scrollbar {
+        display: none;
+      }
+
+      #segment-view .segment-content {
+        scroll-snap-align: center;
+        flex-shrink: 0;
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Segment - Content</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-segment value="0">
+            <ion-segment-button value="0">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Home</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Radio</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Library</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Search</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <div id="segment-view">
+          <div id="home" class="segment-content">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Home card title</ion-card-title>
+                <ion-card-content>Home card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </div>
+          <div id="radio" class="segment-content">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Radio card title</ion-card-title>
+                <ion-card-content>Radio card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </div>
+          <div id="library" class="segment-content">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Library card title</ion-card-title>
+                <ion-card-content>Library card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </div>
+          <div id="search" class="segment-content">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>Search card title</ion-card-title>
+                <ion-card-content>Search card content</ion-card-content>
+              </ion-card-header>
+            </ion-card>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const segment = document.querySelector('ion-segment');
+      const segmentView = document.querySelector('#segment-view');
+
+      segment.addEventListener('ionChange', function (event) {
+        const index = event.detail.value;
+        const sectionWidth = segmentView.offsetWidth;
+        segmentView.scrollTo({
+          top: 0,
+          left: index * sectionWidth,
+          behavior: 'smooth',
+        });
+      });
+
+      segmentView.addEventListener('scroll', function (event) {
+        // Calculate the index of the current section when the scrolling ends
+        var atSnappingPoint = event.target.scrollLeft % event.target.offsetWidth === 0;
+
+        if (atSnappingPoint) {
+          const index = Math.round(event.target.scrollLeft / event.target.offsetWidth);
+          segment.value = `${index}`;
+        }
+      });
+    </script>
+  </body>
 </html>