Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952)

libs/components/src/tabs/tab-group.component.html

@@ -1,6 +1,6 @@
 <div
   role="tablist"
-  class="tw-flex tw-flex-wrap tw-pl-0 tw-my-0 tw-leading-5 tw-text-left tw-box-border"
+  class="tw-inline-flex tw-flex-wrap tw-leading-5 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
 >
   <ng-content></ng-content>
 </div>

libs/components/src/tabs/tab-item.component.ts

@@ -14,46 +14,41 @@ export class TabItemComponent {
       "tw-relative",
       "tw-py-2",
       "tw-px-4",
-      "tw-leading-5",
-      "tw-text-left",
       "tw-font-semibold",
-      "tw-bg-transparent",
       "tw-transition",
       "tw-rounded-t",
       "tw-border-0",
+      "tw-border-x",
       "tw-border-t-4",
-      "tw-border-t-transparent",
-      "tw-border-b",
-      "tw-border-b-secondary-300",
+      "tw-border-transparent",
       "tw-border-solid",
-      "tw-cursor-pointer",
-      "tw-box-border",
-      "tw-text-main",
+      "!tw-text-main",
       "hover:tw-underline",
-      "hover:tw-text-main",
+      "hover:!tw-text-main",
       "focus:tw-z-10",
       "focus:tw-outline-none",
       "focus:tw-ring-2",
       "focus:tw-ring-primary-700",
       "disabled:tw-bg-secondary-100",
-      "disabled:tw-text-muted",
+      "disabled:!tw-text-muted",
       "disabled:tw-no-underline",
       "disabled:tw-cursor-not-allowed",
     ];
   }
 
   get activeClassList(): string {
     return [
-      "tw-border-x",
+      "tw--mb-px",
       "tw-border-x-secondary-300",
       "tw-border-t-primary-500",
-      "tw-border-b-transparent",
+      "tw-border-b",
+      "tw-border-b-background",
       "tw-bg-background",
-      "tw-text-primary-500",
+      "!tw-text-primary-500",
       "hover:tw-border-t-primary-700",
       "hover:!tw-text-primary-700",
       "focus:tw-border-t-primary-700",
-      "focus:tw-text-primary-700",
+      "focus:!tw-text-primary-700",
     ].join(" ");
   }
 }