feat: Add package managers data and update tabs documentation

core/scss/ui/_nav.scss

@@ -44,6 +44,10 @@
     margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 
   .nav-link.active,

shared/includes/docs/tabs-package.html

@@ -1,20 +1,20 @@
-{% assign packages = 'npm,pnpm,yarn' | split: ',' -%}
-<ul class="nav nav-tabs" id="myTab" role="tablist">
-	{%- for package in packages -%}
+<ul class="nav nav-bordered mb-2" role="tablist">
+	{%- for manager in package-managers -%}
 	<li class="nav-item" role="presentation">
-		<button class="nav-link{% if forloop.index == 1 %} active{% endif %}" id="{{ package }}-tab" data-bs-toggle="tab" data-bs-target="#{{ package }}" type="button" role="tab"
+		<button class="nav-link{% if forloop.index == 1 %} active{% endif %}" id="{{ manager.name }}-tab" data-bs-toggle="tab" data-bs-target="#{{ manager.name }}" type="button" role="tab"
 			aria-controls="home" aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}">
-			{{ package }}
+			{{ manager.icon | replace: '<svg ', '<svg class="me-2" ' }}
+			{{ manager.name }}
 		</button>
 	</li>
 	{%- endfor -%}
 </ul>
 <div class="tab-content">
-{%- for package in packages -%}
-<div class="tab-pane{% if forloop.index == 1 %} show active{% endif %}" id="{{ package }}" role="tabpanel" aria-labelledby="{{ package }}-tab">
+{%- for manager in package-managers -%}
+<div class="tab-pane{% if forloop.index == 1 %} show active{% endif %}" id="{{ manager.name }}" role="tabpanel" aria-labelledby="{{ manager.name }}-tab">
 
 ```bash
-{{ package }} install {{ include.name }}
+{{ manager.command }} install {{ include.name }}
 ```
 
 </div>