From e8c7a69e0bbaaf0b70754313e4943393ed7749ee Mon Sep 17 00:00:00 2001
From: yinonov <yinon.oved@vonage.com>
Date: Wed, 4 Jan 2023 10:19:40 +0200
Subject: [PATCH] microsoft/fast/pull/6580#issuecomment-1367536502

---
 libs/components/src/lib/tabs/README.md | 4 ++--
 libs/components/src/lib/tabs/tabs.ts   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/lib/tabs/README.md b/libs/components/src/lib/tabs/README.md
index f40e9e522f..b16b4b5455 100644
--- a/libs/components/src/lib/tabs/README.md
+++ b/libs/components/src/lib/tabs/README.md
@@ -10,7 +10,7 @@ The vwc-tabs accepts [vwc-tab](../../components/tab) and `vwc-tab-panel` element
 ```
 
 ```html preview full
-<vwc-tabs>
+<vwc-tabs activeid="Appetizers">
     <vwc-tab label="Appetizers" id="apps"></vwc-tab>
     <vwc-tab label="Entrees" id="entrees"></vwc-tab>
     <vwc-tab label="Desserts" id="desserts"></vwc-tab>
@@ -52,7 +52,7 @@ Add a `orientation` attribute to control the orientation.
 - Default: `'horizontal'`
 
 ```html preview full
-<vwc-tabs activeid="entrees" orientation="vertical">
+<vwc-tabs activeid="Entrees" orientation="vertical">
     <vwc-tab label="Appetizers" id="apps"></vwc-tab>
     <vwc-tab label="Entrees" id="entrees"></vwc-tab>
     <vwc-tab label="Desserts" id="desserts"></vwc-tab>
diff --git a/libs/components/src/lib/tabs/tabs.ts b/libs/components/src/lib/tabs/tabs.ts
index 9ce19b4bcd..422964b84d 100644
--- a/libs/components/src/lib/tabs/tabs.ts
+++ b/libs/components/src/lib/tabs/tabs.ts
@@ -1,7 +1,7 @@
 import { observable } from '@microsoft/fast-element';
 import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
 
-const TABS_ACTIVE_INDICATOR_INLINE_SIZE = "--_tabs-active-indicator-inline-size";
+const TABS_ACTIVE_INDICATOR_INLINE_SIZE = '--_tabs-active-indicator-inline-size';
 
 /**
  * Base class for tabs
@@ -14,7 +14,7 @@ export class Tabs extends FoundationTabs {
 	override orientationChanged(): void {
 		super.orientationChanged();
 		this.patchIndicatorStyleTransition();
-		if (this.orientation === "vertical") {
+		if (this.orientation === 'vertical') {
 			this.activeIndicatorRef?.style.removeProperty(TABS_ACTIVE_INDICATOR_INLINE_SIZE);
 		}
 	}
@@ -39,6 +39,6 @@ export class Tabs extends FoundationTabs {
 		const width = this.activetab?.getClientRects()[0]?.width;
 		if (!width) return;
 
-    this.activeIndicatorRef?.style.setProperty(TABS_ACTIVE_INDICATOR_INLINE_SIZE, `${width}px`);
-  }
+		this.activeIndicatorRef?.style.setProperty(TABS_ACTIVE_INDICATOR_INLINE_SIZE, `${width}px`);
+	}
 }