From 9480051d8f69c8a0556c3b8f9484db17aacf81f0 Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Wed, 24 Jun 2026 08:51:00 -0600
Subject: [PATCH 1/6] feat: add master and develop buttons to Library page

---
 static/css/v3/branch-buttons.css           | 71 ++++++++++++++++++++++
 static/css/v3/library-page.css             | 17 ++++++
 templates/includes/icon.html               |  2 +
 templates/v3/includes/_branch_buttons.html | 31 ++++++++++
 templates/v3/library_page.html             |  6 +-
 5 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 static/css/v3/branch-buttons.css
 create mode 100644 templates/v3/includes/_branch_buttons.html

diff --git a/static/css/v3/branch-buttons.css b/static/css/v3/branch-buttons.css
new file mode 100644
index 000000000..abf47e163
--- /dev/null
+++ b/static/css/v3/branch-buttons.css
@@ -0,0 +1,71 @@
+/*
+  Branch Buttons
+  Small, unobtrusive Master ("M") / Develop ("D") branch links.
+  Bordered icon square with an amber corner badge. Matches Figma node 7696:45822.
+  Depends on: foundations.css, semantics.css, spacing.css, border-radius.css
+*/
+
+.branch-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+.branch-button {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 29px;
+  height: 28px;
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+.branch-button__square {
+  position: absolute;
+  top: 4px;
+  left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background-color: var(--color-surface-weak);
+  border: 1px solid var(--color-stroke-weak);
+  border-radius: var(--border-radius-s);
+  transition: border-color 0.15s ease;
+}
+
+.branch-button__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-primary);
+}
+
+.branch-button__badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 12px;
+  padding: 2px;
+  border-radius: 60px;
+  background-color: var(--color-button-accent);
+  color: var(--color-text-on-accent);
+  font-size: 8px;
+  line-height: 1;
+  letter-spacing: -0.08px;
+  text-align: center;
+}
+
+.branch-button:hover .branch-button__square {
+  border-color: var(--color-stroke-brand-accent);
+}
+
+.branch-button:focus-visible {
+  outline: 2px solid var(--color-stroke-brand-accent);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-s);
+}
diff --git a/static/css/v3/library-page.css b/static/css/v3/library-page.css
index c1f8b41e0..8abc60cb3 100644
--- a/static/css/v3/library-page.css
+++ b/static/css/v3/library-page.css
@@ -18,6 +18,23 @@
     padding: 0 var(--space-large);
 }
 
+/* Filter toolbar row: filters fill the row, branch buttons sit at the far right,
+   bottom-aligned with the filter dropdowns. */
+.library-page__filter-row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-medium);
+}
+
+.library-page__filter-row .library-filter {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.library-page__filter-row .branch-buttons {
+    flex: 0 0 auto;
+}
+
 /* === Hero === */
 
 .library-page-hero {
diff --git a/templates/includes/icon.html b/templates/includes/icon.html
index cb5357ea2..463cbb41a 100644
--- a/templates/includes/icon.html
+++ b/templates/includes/icon.html
@@ -139,6 +139,8 @@
     <path d="M12 1.33334H10.6667V2.66668H9.33337V4.00001H8.00004V5.33334H6.66671V6.66668H5.33337V8.00001H4.00004V9.33334H2.66671V10.6667H1.33337V14.6667H5.33337V13.3333H6.66671V12H8.00004V10.6667H9.33337V9.33334H10.6667V8.00001H12V6.66668H13.3334V5.33334H14.6667V4.00001H13.3334V2.66668H12V1.33334ZM12 6.66668H10.6667V8.00001H9.33337V9.33334H8.00004V10.6667H6.66671V12H5.33337V10.6667H4.00004V9.33334H5.33337V8.00001H6.66671V6.66668H8.00004V5.33334H9.33337V4.00001H10.6667V5.33334H12V6.66668ZM4.00004 10.6667H2.66671V13.3333H5.33337V12H4.00004V10.6667Z" />
   {% elif icon_name == "pixel-share" %}
     <path d="M2.66671 4H7.33337V5.33333H2.66671V10.6667H7.33337V12H1.33337V4H2.66671ZM13.3334 4H8.66671V5.33333H13.3334V10.6667H8.66671V12H14.6667V4H13.3334ZM11.3334 7.33333H4.66671V8.66667H11.3334V7.33333Z" />
+  {% elif icon_name == "git-branch" %}
+    <path d="M2.4 0H4V9.6H6.4V12H12V6.4H9.6V0H16V6.4H13.6V13.6H6.4V16H0V9.6H2.4V0ZM14.4 4.8V1.6H11.2V4.8H14.4ZM4.8 13.6V11.2H1.6V14.4H4.8V13.6Z" />
   {% elif icon_name == "file-multiple" %}
     <path d="M14 12H4.66667V1.33337H10V2.66671H11.3333V4.00004H10V5.33337H11.3333V4.00004H12.6667V5.33337H14V12ZM6 2.66671V10.6667H12.6667V6.66671H8.66667V2.66671H6ZM2 4.00004H3.33333V13.3334H11.3333V14.6667H2V4.00004Z" />
   {% elif icon_name == "rss" %}
diff --git a/templates/v3/includes/_branch_buttons.html b/templates/v3/includes/_branch_buttons.html
new file mode 100644
index 000000000..2c6691f6b
--- /dev/null
+++ b/templates/v3/includes/_branch_buttons.html
@@ -0,0 +1,31 @@
+{% comment %}
+  V3 Branch Buttons — two small, unobtrusive links to the Master and Develop
+  branch resources, per Rob's approved design (Figma node 7696:45822).
+
+  Each button is a bordered icon square with a small amber corner badge showing
+  a single letter ("M" / "D"). The full words "Master" / "Develop" are exposed
+  via title + aria-label for accessibility (the AC requires those exact words).
+
+  Styles: static/css/v3/branch-buttons.css (link it in the page's extra_head).
+
+  Variables:
+    master_url   (required) — href for the Master branch resource.
+    develop_url  (required) — href for the Develop branch resource.
+
+  Usage:
+    {% include "v3/includes/_branch_buttons.html" with master_url=master_url develop_url=develop_url %}
+{% endcomment %}
+<div class="branch-buttons" role="group" aria-label="Switch branch">
+  <a class="branch-button" href="{{ master_url }}" title="Master" aria-label="Master">
+    <span class="branch-button__square">
+      {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+    </span>
+    <span class="branch-button__badge" aria-hidden="true">M</span>
+  </a>
+  <a class="branch-button" href="{{ develop_url }}" title="Develop" aria-label="Develop">
+    <span class="branch-button__square">
+      {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+    </span>
+    <span class="branch-button__badge" aria-hidden="true">D</span>
+  </a>
+</div>
diff --git a/templates/v3/library_page.html b/templates/v3/library_page.html
index 6ebba3c53..338fa4fd1 100644
--- a/templates/v3/library_page.html
+++ b/templates/v3/library_page.html
@@ -14,6 +14,7 @@
 {% block extra_head %}
   {{ block.super }}
   <link href="{% static 'css/v3/library-page.css' %}" rel="stylesheet" />
+  <link href="{% static 'css/v3/branch-buttons.css' %}" rel="stylesheet" />
   <script src="{% static 'js/v3/fuse.min.js' %}" defer></script>
   <noscript>
     <style>
@@ -393,8 +394,11 @@ <h1 class="hero-title">Find a battle-tested library for the problem you're solvi
           </div>
       </section>
     <form action="" method="get">
-      <div id="library-page-filter-container" class="mb-xl">
+      <div id="library-page-filter-container" class="mb-xl library-page__filter-row">
         {% include 'v3/includes/_library_filter.html' with filter_id='library-page-filter' fields=library_filter_fields clear_url=library_filter_clear_url %}
+        {% url 'libraries-list' version_slug='master' library_view_str=library_view_str as master_branch_url %}
+        {% url 'libraries-list' version_slug='develop' library_view_str=library_view_str as develop_branch_url %}
+        {% include 'v3/includes/_branch_buttons.html' with master_url=master_branch_url develop_url=develop_branch_url %}
       </div>
     </form>
     {% if library_view_str == 'list' %}

From 4fe83212678537e588b72377166cb7fc245d8ea6 Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Wed, 24 Jun 2026 09:20:22 -0600
Subject: [PATCH 2/6] feat: add master and develop buttons to Sub Library page

---
 templates/v3/includes/_branch_buttons.html  | 23 +++++++++++++--------
 templates/v3/includes/_hero_library.html    |  6 +++++-
 templates/v3/libraries/library-subpage.html |  5 +++--
 templates/v3/library_page.html              |  4 +---
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/templates/v3/includes/_branch_buttons.html b/templates/v3/includes/_branch_buttons.html
index 2c6691f6b..24fc0fcb0 100644
--- a/templates/v3/includes/_branch_buttons.html
+++ b/templates/v3/includes/_branch_buttons.html
@@ -1,28 +1,33 @@
+{% load branch_url_tag %}
 {% comment %}
-  V3 Branch Buttons — two small, unobtrusive links to the Master and Develop
-  branch resources, per Rob's approved design (Figma node 7696:45822).
+  V3 Branch Buttons — two small, unobtrusive links that switch the current page
+  to the Master / Develop Boost version, per Rob's approved design (Figma node
+  7696:45822).
 
   Each button is a bordered icon square with a small amber corner badge showing
   a single letter ("M" / "D"). The full words "Master" / "Develop" are exposed
   via title + aria-label for accessibility (the AC requires those exact words).
 
-  Styles: static/css/v3/branch-buttons.css (link it in the page's extra_head).
+  URLs are derived from the current view via branch_url_tag (same pattern as the
+  legacy libraries/includes/dev_master_links.html), so this partial is page-
+  agnostic: it reuses request.resolver_match and just swaps in the branch as the
+  version_slug. Works on any versioned page (library list, library detail, ...).
+
+  Requires the `request` context processor (project default). No variables.
 
-  Variables:
-    master_url   (required) — href for the Master branch resource.
-    develop_url  (required) — href for the Develop branch resource.
+  Styles: static/css/v3/branch-buttons.css (link it in the page's extra_head).
 
   Usage:
-    {% include "v3/includes/_branch_buttons.html" with master_url=master_url develop_url=develop_url %}
+    {% include "v3/includes/_branch_buttons.html" %}
 {% endcomment %}
 <div class="branch-buttons" role="group" aria-label="Switch branch">
-  <a class="branch-button" href="{{ master_url }}" title="Master" aria-label="Master">
+  <a class="branch-button" href="{% branch_url_tag request.resolver_match.view_name branch='master' kwargs=request.resolver_match.kwargs %}" title="Master" aria-label="Master">
     <span class="branch-button__square">
       {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
     </span>
     <span class="branch-button__badge" aria-hidden="true">M</span>
   </a>
-  <a class="branch-button" href="{{ develop_url }}" title="Develop" aria-label="Develop">
+  <a class="branch-button" href="{% branch_url_tag request.resolver_match.view_name branch='develop' kwargs=request.resolver_match.kwargs %}" title="Develop" aria-label="Develop">
     <span class="branch-button__square">
       {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
     </span>
diff --git a/templates/v3/includes/_hero_library.html b/templates/v3/includes/_hero_library.html
index abe432575..8571715b6 100644
--- a/templates/v3/includes/_hero_library.html
+++ b/templates/v3/includes/_hero_library.html
@@ -17,6 +17,7 @@
     hero_image_url     (optional) — Image URL. If omitted, image block is not shown.
     hero_background_image_url (optional) — Background image URL for the hero container.
     is_flagship_lib    (optional) — Boolean value stating whether or not this is the hero for a flagship library. If it isn't, styles are a bit different.
+    show_branch_buttons (optional) — Boolean. If truthy, renders the small Master/Develop version-switch buttons (v3/includes/_branch_buttons.html) in the tags row. Off by default so the buttons only appear on library sub-pages, not other heroes (community, release, examples). Requires branch-buttons.css linked on the page.
 
   If none of category_tags/version_tag/added_text are passed, the tags row is
   hidden. If none of doc_url/source_url/slack_url/github_url/rss_url are
@@ -37,7 +38,7 @@
     <div class="hero-library__main">
     <div class="hero-library__content">
       <div class="hero-library__meta">
-        {% if category_tags or version_tag or added_text %}
+        {% if category_tags or version_tag or added_text or show_branch_buttons %}
         <div class="hero-library__tags">
           {% for tag in category_tags %}
           {% include "v3/includes/_category_tag.html" with tag_label=tag.label url=tag.url|default:"#" variant="neutral" size="default" %}
@@ -50,6 +51,9 @@
             <span class="hero-library__added">{{ added_text }}</span>
           </div>
           {% endif %}
+          {% if show_branch_buttons %}
+          {% include "v3/includes/_branch_buttons.html" %}
+          {% endif %}
         </div>
         {% endif %}
         <div class="hero-library__text-block">
diff --git a/templates/v3/libraries/library-subpage.html b/templates/v3/libraries/library-subpage.html
index 05855e965..015fb5f14 100644
--- a/templates/v3/libraries/library-subpage.html
+++ b/templates/v3/libraries/library-subpage.html
@@ -6,6 +6,7 @@
 {% block extra_head %}
   {{ block.super }}
   <link href="{% static 'css/v3/library-subpage.css' %}" rel="stylesheet">
+  <link href="{% static 'css/v3/branch-buttons.css' %}" rel="stylesheet">
 {% endblock %}
 
 {% block content %}
@@ -13,9 +14,9 @@
   {% with cpp_ver=library_version.get_cpp_standard_minimum_display|default:"C++03" %}
     {% with added_text=object.first_boost_version.display_name %}
       {% if is_flagship_lib %}
-        {% include "v3/includes/_hero_library.html" with title=object.display_name description=library_version.description|default:object.description category_tags=category_tags_v3 version_tag=cpp_ver added_text=added_text doc_url=documentation_url source_url=github_url slack_url=slack_url github_url=object.github_issues_url is_flagship_lib=True hero_image_url_light=library_hero_image_url_light hero_image_url_dark=library_hero_image_url_dark %}
+        {% include "v3/includes/_hero_library.html" with title=object.display_name description=library_version.description|default:object.description category_tags=category_tags_v3 version_tag=cpp_ver added_text=added_text doc_url=documentation_url source_url=github_url slack_url=slack_url github_url=object.github_issues_url is_flagship_lib=True hero_image_url_light=library_hero_image_url_light hero_image_url_dark=library_hero_image_url_dark show_branch_buttons=True %}
       {% else %}
-        {% include "v3/includes/_hero_library.html" with title=object.display_name description=library_version.description|default:object.description category_tags=category_tags_v3 version_tag=cpp_ver added_text=added_text doc_url=documentation_url source_url=github_url slack_url=slack_url github_url=object.github_issues_url %}
+        {% include "v3/includes/_hero_library.html" with title=object.display_name description=library_version.description|default:object.description category_tags=category_tags_v3 version_tag=cpp_ver added_text=added_text doc_url=documentation_url source_url=github_url slack_url=slack_url github_url=object.github_issues_url show_branch_buttons=True %}
       {% endif %}
     {% endwith %}
   {% endwith %}
diff --git a/templates/v3/library_page.html b/templates/v3/library_page.html
index 338fa4fd1..03911ae5f 100644
--- a/templates/v3/library_page.html
+++ b/templates/v3/library_page.html
@@ -396,9 +396,7 @@ <h1 class="hero-title">Find a battle-tested library for the problem you're solvi
     <form action="" method="get">
       <div id="library-page-filter-container" class="mb-xl library-page__filter-row">
         {% include 'v3/includes/_library_filter.html' with filter_id='library-page-filter' fields=library_filter_fields clear_url=library_filter_clear_url %}
-        {% url 'libraries-list' version_slug='master' library_view_str=library_view_str as master_branch_url %}
-        {% url 'libraries-list' version_slug='develop' library_view_str=library_view_str as develop_branch_url %}
-        {% include 'v3/includes/_branch_buttons.html' with master_url=master_branch_url develop_url=develop_branch_url %}
+        {% include 'v3/includes/_branch_buttons.html' %}
       </div>
     </form>
     {% if library_view_str == 'list' %}

From b34c5e7a2906fd9b193f65afa1b4583dba070887 Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Wed, 24 Jun 2026 11:37:52 -0600
Subject: [PATCH 3/6] fix: align buttons appropriately according to Figma
 template

---
 static/css/v3/branch-buttons.css         | 23 +++++++++++++++++++++++
 templates/v3/includes/_hero_library.html | 10 +++++-----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/static/css/v3/branch-buttons.css b/static/css/v3/branch-buttons.css
index abf47e163..f4fd31837 100644
--- a/static/css/v3/branch-buttons.css
+++ b/static/css/v3/branch-buttons.css
@@ -69,3 +69,26 @@
   outline-offset: 2px;
   border-radius: var(--border-radius-s);
 }
+
+/* In the library sub-page hero the buttons are a direct child of __main
+   (sibling of the content column), pinned to the far right and bottom-aligned
+   with the actions row — matching Figma node 7146-55502 (hero is items-end).
+   The right edge is inset by --space-large so it lines up with the right edge
+   of the content cards below (.library-subpage-container has 16px side padding).
+   Figma node 7696-45623. */
+.hero-library__main > .branch-buttons {
+  align-self: flex-end;
+  flex-shrink: 0;
+  margin-right: var(--space-large);
+}
+
+/* Mobile: __main becomes a column, so the buttons stack below the actions row.
+   Left-align them with the cards' left edge (block + cards both pad 8px here)
+   and add a little separation. Figma node 7611-62006. */
+@media (max-width: 767px) {
+  .hero-library__main > .branch-buttons {
+    align-self: flex-start;
+    margin-right: 0;
+    margin-top: var(--space-large);
+  }
+}
diff --git a/templates/v3/includes/_hero_library.html b/templates/v3/includes/_hero_library.html
index 8571715b6..190d5bf16 100644
--- a/templates/v3/includes/_hero_library.html
+++ b/templates/v3/includes/_hero_library.html
@@ -17,7 +17,7 @@
     hero_image_url     (optional) — Image URL. If omitted, image block is not shown.
     hero_background_image_url (optional) — Background image URL for the hero container.
     is_flagship_lib    (optional) — Boolean value stating whether or not this is the hero for a flagship library. If it isn't, styles are a bit different.
-    show_branch_buttons (optional) — Boolean. If truthy, renders the small Master/Develop version-switch buttons (v3/includes/_branch_buttons.html) in the tags row. Off by default so the buttons only appear on library sub-pages, not other heroes (community, release, examples). Requires branch-buttons.css linked on the page.
+    show_branch_buttons (optional) — Boolean. If truthy, renders the small Master/Develop version-switch buttons (v3/includes/_branch_buttons.html) at the far right of the actions/links row. Off by default so the buttons only appear on library sub-pages, not other heroes (community, release, examples). Requires branch-buttons.css linked on the page.
 
   If none of category_tags/version_tag/added_text are passed, the tags row is
   hidden. If none of doc_url/source_url/slack_url/github_url/rss_url are
@@ -38,7 +38,7 @@
     <div class="hero-library__main">
     <div class="hero-library__content">
       <div class="hero-library__meta">
-        {% if category_tags or version_tag or added_text or show_branch_buttons %}
+        {% if category_tags or version_tag or added_text %}
         <div class="hero-library__tags">
           {% for tag in category_tags %}
           {% include "v3/includes/_category_tag.html" with tag_label=tag.label url=tag.url|default:"#" variant="neutral" size="default" %}
@@ -51,9 +51,6 @@
             <span class="hero-library__added">{{ added_text }}</span>
           </div>
           {% endif %}
-          {% if show_branch_buttons %}
-          {% include "v3/includes/_branch_buttons.html" %}
-          {% endif %}
         </div>
         {% endif %}
         <div class="hero-library__text-block">
@@ -97,6 +94,9 @@
       {% endwith %}
     </div>
     {% endif %}
+    {% if show_branch_buttons %}
+    {% include "v3/includes/_branch_buttons.html" %}
+    {% endif %}
     </div>
     {% include "v3/includes/_version_alert.html" %}
   </div>

From ffa2f8ed81ee4e2f382a344cf6a255c88091913f Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Tue, 30 Jun 2026 09:07:23 -0600
Subject: [PATCH 4/6] fix: address PR comments

---
 static/css/v3/branch-buttons.css           | 16 ++------
 templates/v3/includes/_branch_buttons.html | 46 ++++++++++------------
 2 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/static/css/v3/branch-buttons.css b/static/css/v3/branch-buttons.css
index f4fd31837..bcd7b9915 100644
--- a/static/css/v3/branch-buttons.css
+++ b/static/css/v3/branch-buttons.css
@@ -1,7 +1,5 @@
 /*
-  Branch Buttons
-  Small, unobtrusive Master ("M") / Develop ("D") branch links.
-  Bordered icon square with an amber corner badge. Matches Figma node 7696:45822.
+  Branch Buttons — small Master ("M") / Develop ("D") version-switch links.
   Depends on: foundations.css, semantics.css, spacing.css, border-radius.css
 */
 
@@ -70,21 +68,15 @@
   border-radius: var(--border-radius-s);
 }
 
-/* In the library sub-page hero the buttons are a direct child of __main
-   (sibling of the content column), pinned to the far right and bottom-aligned
-   with the actions row — matching Figma node 7146-55502 (hero is items-end).
-   The right edge is inset by --space-large so it lines up with the right edge
-   of the content cards below (.library-subpage-container has 16px side padding).
-   Figma node 7696-45623. */
+/* Sub-page hero: far right, bottom-aligned with the actions row; right edge
+   inset to line up with the content cards below. */
 .hero-library__main > .branch-buttons {
   align-self: flex-end;
   flex-shrink: 0;
   margin-right: var(--space-large);
 }
 
-/* Mobile: __main becomes a column, so the buttons stack below the actions row.
-   Left-align them with the cards' left edge (block + cards both pad 8px here)
-   and add a little separation. Figma node 7611-62006. */
+/* Mobile: stacks below the actions row, left-aligned with the cards. */
 @media (max-width: 767px) {
   .hero-library__main > .branch-buttons {
     align-self: flex-start;
diff --git a/templates/v3/includes/_branch_buttons.html b/templates/v3/includes/_branch_buttons.html
index 24fc0fcb0..665d0dd81 100644
--- a/templates/v3/includes/_branch_buttons.html
+++ b/templates/v3/includes/_branch_buttons.html
@@ -1,35 +1,29 @@
-{% load branch_url_tag %}
-{% comment %}
-  V3 Branch Buttons — two small, unobtrusive links that switch the current page
-  to the Master / Develop Boost version, per Rob's approved design (Figma node
-  7696:45822).
-
-  Each button is a bordered icon square with a small amber corner badge showing
-  a single letter ("M" / "D"). The full words "Master" / "Develop" are exposed
-  via title + aria-label for accessibility (the AC requires those exact words).
-
-  URLs are derived from the current view via branch_url_tag (same pattern as the
-  legacy libraries/includes/dev_master_links.html), so this partial is page-
-  agnostic: it reuses request.resolver_match and just swaps in the branch as the
-  version_slug. Works on any versioned page (library list, library detail, ...).
-
-  Requires the `request` context processor (project default). No variables.
-
-  Styles: static/css/v3/branch-buttons.css (link it in the page's extra_head).
-
-  Usage:
-    {% include "v3/includes/_branch_buttons.html" %}
-{% endcomment %}
+{% load branch_url_tag %} {% comment %} V3 Branch Buttons Links that switch the
+current page to the Master / Develop Boost version. URLs are derived from the
+current view via branch_url_tag, which swaps the version_slug. Requires the
+`request` context processor (project default). {% endcomment %}
 <div class="branch-buttons" role="group" aria-label="Switch branch">
-  <a class="branch-button" href="{% branch_url_tag request.resolver_match.view_name branch='master' kwargs=request.resolver_match.kwargs %}" title="Master" aria-label="Master">
+  <a
+    class="branch-button"
+    href="{% branch_url_tag request.resolver_match.view_name branch='master' kwargs=request.resolver_match.kwargs %}"
+    title="Master"
+    aria-label="Master"
+  >
     <span class="branch-button__square">
-      {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+      {% include "includes/icon.html" with icon_name="git-branch"
+      icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
     </span>
     <span class="branch-button__badge" aria-hidden="true">M</span>
   </a>
-  <a class="branch-button" href="{% branch_url_tag request.resolver_match.view_name branch='develop' kwargs=request.resolver_match.kwargs %}" title="Develop" aria-label="Develop">
+  <a
+    class="branch-button"
+    href="{% branch_url_tag request.resolver_match.view_name branch='develop' kwargs=request.resolver_match.kwargs %}"
+    title="Develop"
+    aria-label="Develop"
+  >
     <span class="branch-button__square">
-      {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+      {% include "includes/icon.html" with icon_name="git-branch"
+      icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
     </span>
     <span class="branch-button__badge" aria-hidden="true">D</span>
   </a>

From 55afc236bd8062588b9c65053fce53121a6427d2 Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Tue, 30 Jun 2026 09:25:37 -0600
Subject: [PATCH 5/6] refactor: load branch-buttons CSS via components.css

---
 static/css/v3/components.css                |  1 +
 templates/v3/includes/_branch_buttons.html  | 33 ++++++++-------------
 templates/v3/includes/_hero_library.html    |  2 +-
 templates/v3/libraries/library-subpage.html |  1 -
 templates/v3/library_page.html              |  1 -
 5 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/static/css/v3/components.css b/static/css/v3/components.css
index 290733966..2e77e0792 100644
--- a/static/css/v3/components.css
+++ b/static/css/v3/components.css
@@ -42,6 +42,7 @@
 @import "./user-card.css";
 @import "./post-filter.css";
 @import "./library-filter.css";
+@import "./branch-buttons.css";
 @import "./contributors-list.css";
 @import "./card-group.css";
 @import "./post-card.css";
diff --git a/templates/v3/includes/_branch_buttons.html b/templates/v3/includes/_branch_buttons.html
index 665d0dd81..e48849f5e 100644
--- a/templates/v3/includes/_branch_buttons.html
+++ b/templates/v3/includes/_branch_buttons.html
@@ -1,29 +1,22 @@
-{% load branch_url_tag %} {% comment %} V3 Branch Buttons Links that switch the
-current page to the Master / Develop Boost version. URLs are derived from the
-current view via branch_url_tag, which swaps the version_slug. Requires the
-`request` context processor (project default). {% endcomment %}
+{% load branch_url_tag %}
+{% comment %}
+  V3 Branch Buttons
+
+  Links that switch the current page to the Master / Develop Boost version.
+  URLs are derived from the current view via branch_url_tag, which swaps the
+  version_slug — so this partial is page-agnostic and takes no variables.
+  Requires the `request` context processor (project default).
+{% endcomment %}
 <div class="branch-buttons" role="group" aria-label="Switch branch">
-  <a
-    class="branch-button"
-    href="{% branch_url_tag request.resolver_match.view_name branch='master' kwargs=request.resolver_match.kwargs %}"
-    title="Master"
-    aria-label="Master"
-  >
+  <a class="branch-button" href="{% branch_url_tag request.resolver_match.view_name branch='master' kwargs=request.resolver_match.kwargs %}" title="Master" aria-label="Master">
     <span class="branch-button__square">
-      {% include "includes/icon.html" with icon_name="git-branch"
-      icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+      {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
     </span>
     <span class="branch-button__badge" aria-hidden="true">M</span>
   </a>
-  <a
-    class="branch-button"
-    href="{% branch_url_tag request.resolver_match.view_name branch='develop' kwargs=request.resolver_match.kwargs %}"
-    title="Develop"
-    aria-label="Develop"
-  >
+  <a class="branch-button" href="{% branch_url_tag request.resolver_match.view_name branch='develop' kwargs=request.resolver_match.kwargs %}" title="Develop" aria-label="Develop">
     <span class="branch-button__square">
-      {% include "includes/icon.html" with icon_name="git-branch"
-      icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+      {% include "includes/icon.html" with icon_name="git-branch" icon_class="branch-button__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
     </span>
     <span class="branch-button__badge" aria-hidden="true">D</span>
   </a>
diff --git a/templates/v3/includes/_hero_library.html b/templates/v3/includes/_hero_library.html
index 190d5bf16..30b9e5d2e 100644
--- a/templates/v3/includes/_hero_library.html
+++ b/templates/v3/includes/_hero_library.html
@@ -17,7 +17,7 @@
     hero_image_url     (optional) — Image URL. If omitted, image block is not shown.
     hero_background_image_url (optional) — Background image URL for the hero container.
     is_flagship_lib    (optional) — Boolean value stating whether or not this is the hero for a flagship library. If it isn't, styles are a bit different.
-    show_branch_buttons (optional) — Boolean. If truthy, renders the small Master/Develop version-switch buttons (v3/includes/_branch_buttons.html) at the far right of the actions/links row. Off by default so the buttons only appear on library sub-pages, not other heroes (community, release, examples). Requires branch-buttons.css linked on the page.
+    show_branch_buttons (optional) — Boolean. If truthy, renders the small Master/Develop version-switch buttons (v3/includes/_branch_buttons.html) at the far right of the actions/links row. Off by default so the buttons only appear on library sub-pages, not other heroes (community, release, examples).
 
   If none of category_tags/version_tag/added_text are passed, the tags row is
   hidden. If none of doc_url/source_url/slack_url/github_url/rss_url are
diff --git a/templates/v3/libraries/library-subpage.html b/templates/v3/libraries/library-subpage.html
index 015fb5f14..f1dd98897 100644
--- a/templates/v3/libraries/library-subpage.html
+++ b/templates/v3/libraries/library-subpage.html
@@ -6,7 +6,6 @@
 {% block extra_head %}
   {{ block.super }}
   <link href="{% static 'css/v3/library-subpage.css' %}" rel="stylesheet">
-  <link href="{% static 'css/v3/branch-buttons.css' %}" rel="stylesheet">
 {% endblock %}
 
 {% block content %}
diff --git a/templates/v3/library_page.html b/templates/v3/library_page.html
index 03911ae5f..9f71909ea 100644
--- a/templates/v3/library_page.html
+++ b/templates/v3/library_page.html
@@ -14,7 +14,6 @@
 {% block extra_head %}
   {{ block.super }}
   <link href="{% static 'css/v3/library-page.css' %}" rel="stylesheet" />
-  <link href="{% static 'css/v3/branch-buttons.css' %}" rel="stylesheet" />
   <script src="{% static 'js/v3/fuse.min.js' %}" defer></script>
   <noscript>
     <style>

From bc9d342851e826959a8ab888f3ddf562ecb772ba Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Tue, 30 Jun 2026 09:36:37 -0600
Subject: [PATCH 6/6] fix: avoid mutating resolver_match.kwargs in
 branch_url_tag

---
 libraries/templatetags/branch_url_tag.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libraries/templatetags/branch_url_tag.py b/libraries/templatetags/branch_url_tag.py
index baf8e97db..1433561be 100644
--- a/libraries/templatetags/branch_url_tag.py
+++ b/libraries/templatetags/branch_url_tag.py
@@ -6,5 +6,4 @@
 
 @register.simple_tag()
 def branch_url_tag(view: str, branch: str, kwargs: dict):
-    kwargs["version_slug"] = branch
-    return reverse(view, kwargs=kwargs)
+    return reverse(view, kwargs={**kwargs, "version_slug": branch})