jekyll-theme-zer0 1.29.0 → 1.31.0

data/_includes/core/header.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-011 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   HEADER - Main Navigation and Site Header
   ===================================================================
@@ -36,48 +36,67 @@
   - When `position: navbar`, the bar mounts inside `#top-progress-target` below
   - Otherwise it floats fixed to the viewport (top or bottom)
   ===================================================================
--->
+{% endcomment %}
 
-<!-- ================================ -->
-<!-- SKIP TO CONTENT LINK            -->
-<!-- ================================ -->
-<!-- UI strings resolve per page language (core/i18n.html sets `ui`) -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} SKIP TO CONTENT LINK            {% endcomment %}
+{% comment %} ================================ {% endcomment %}
+{% comment %} UI strings resolve per page language (core/i18n.html sets `ui`) {% endcomment %}
 {%- include core/i18n.html -%}
-<!-- Accessibility: allows keyboard users to skip navigation -->
+{% comment %} Accessibility: allows keyboard users to skip navigation {% endcomment %}
 <a href="#main-content" class="visually-hidden-focusable position-absolute top-0 start-0 z-3 m-3 btn btn-primary">
   {{ ui.skip_main_content | default: "Skip to main content" }}
 </a>
 
 <header id="navbar" class="container-fluid text-center fixed-top" role="banner">
 
-    <!-- ================================ -->
-    <!-- TOP NAVIGATION BAR              -->
-    <!-- ================================ -->
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} TOP NAVIGATION BAR              {% endcomment %}
+    {% comment %} ================================ {% endcomment %}
     <div class="navbar navbar-expand-lg bg-body-tertiary flex-nowrap w-100 bottom-shadow">
 
-        <!-- ========================== -->
-        <!-- MAIN NAVIGATION CONTAINER -->
-        <!-- ========================== -->
+        {% comment %} ========================== {% endcomment %}
+        {% comment %} MAIN NAVIGATION CONTAINER {% endcomment %}
+        {% comment %} ========================== {% endcomment %}
         <nav class="container-fluid order-2 order-lg-1 d-flex align-items-center gap-1 flex-nowrap navbar-main w-100" aria-label="Primary navigation">
 
-            <!-- Leading cluster: sidebar toggle + brand + titles (grid column 1 on lg+) -->
+            {% comment %} Leading cluster: sidebar toggle + brand + titles (grid column 1 on lg+) {% endcomment %}
             <div class="navbar-main-start d-flex align-items-center gap-1 gap-lg-2 min-w-0 flex-shrink-1 flex-grow-1">
 
-            <!-- ========================== -->
-            <!-- MOBILE MENU CONTROLS      -->
-            <!-- ========================== -->
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} MOBILE MENU CONTROLS      {% endcomment %}
+            {% comment %} ========================== {% endcomment %}
             
-            <!-- Left Sidebar Toggle - Mobile view only. Uses the shared
+            {% comment %} Left Sidebar Toggle - Mobile view only. Uses the shared
                  resolver (navigation/sidebar-config.html) so this gate can
-                 never drift from the default layout's aside. -->
+                 never drift from the default layout's aside. {% endcomment %}
             {% include navigation/sidebar-config.html %}
 
-            {% if sidebar_has_content %}
-              {%- comment -%}
-                When site.navigation.unified_mobile_drawer is true, the sidebar
-                toggle opens the consolidated drawer (Browse tab pre-selected)
-                instead of the legacy #bdSidebar offcanvas.
-              {%- endcomment -%}
+            {%- comment -%}
+              Two conditions, and BOTH are required (issue #373).
+
+              `sidebar_has_content` asks "is there nav content to show". It is
+              not enough on its own: this include is pulled in by
+              _layouts/root.html, so it renders on EVERY layout, while
+              `#bdSidebar` is emitted by _layouts/default.html alone. On a
+              layout that inherits root directly — admin, stats, 404, section,
+              home … — the toggle rendered pointing at an offcanvas that was
+              never in the document: a dead control, and aria-controls
+              dangling into nothing for assistive tech. Measured before the
+              fix: 37 of 415 built pages.
+
+              The unified drawer is exempt because #zer0UnifiedDrawer IS
+              emitted from root.html, so it exists on every layout — that
+              target is always real and the toggle is always live.
+            {%- endcomment -%}
+            {% if sidebar_has_content and site.navigation.unified_mobile_drawer %}
+              {%- assign _sidebar_toggle_ok = true -%}
+            {% elsif sidebar_has_content and sidebar_offcanvas_rendered %}
+              {%- assign _sidebar_toggle_ok = true -%}
+            {% else %}
+              {%- assign _sidebar_toggle_ok = false -%}
+            {% endif %}
+            {% if _sidebar_toggle_ok %}
               {%- if site.navigation.unified_mobile_drawer -%}
                 {%- assign _sidebar_target = "#zer0UnifiedDrawer" -%}
                 {%- assign _sidebar_controls = "zer0UnifiedDrawer" -%}
@@ -98,11 +117,11 @@
             </div>
             {% endif %}
 
-            <!-- ========================== -->
-            <!-- BRAND AND HOME NAVIGATION -->
-            <!-- ========================== -->
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} BRAND AND HOME NAVIGATION {% endcomment %}
+            {% comment %} ========================== {% endcomment %}
             <div class="navbar-brand-group d-inline-flex align-items-center gap-2">
-                <!-- Home Navigation Button (Desktop only) -->
+                {% comment %} Home Navigation Button (Desktop only) {% endcomment %}
                 <div class="navbar-home-links d-none" role="navigation" aria-label="Quick navigation">
                     {%- assign nav_home = site.data.navigation.home -%}
                     {%- if nav_home and nav_home.size > 0 -%}
@@ -118,18 +137,18 @@
                     {%- endif -%}
                 </div>
                 
-                <!-- Brand Logo Link to Root -->
-                <!-- Logo path configured in _config.yml -->
+                {% comment %} Brand Logo Link to Root {% endcomment %}
+                {% comment %} Logo path configured in _config.yml {% endcomment %}
                 {% capture logo_path %}{{ site.logo }}{% endcapture %}
                 <a class="navbar-brand" href="{{ site.baseurl }}/" aria-label="Home - {{ site.title }}" {% if page.url == '/' %}aria-current="page"{% endif %}>
                     <img src="{{ logo_path | relative_url }}" alt="{{ site.title }} logo" width="30" height="30">
                 </a>
             </div>
             
-            <!-- ========================== -->
-            <!-- SITE BRANDING SECTION     -->
-            <!-- ========================== -->
-            <!-- Site title and subtitle display -->
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} SITE BRANDING SECTION     {% endcomment %}
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} Site title and subtitle display {% endcomment %}
             {% include core/branding.html %}
 
             </div>
@@ -141,21 +160,21 @@
             {%- endcomment -%}
             {% include navigation/navbar-mobile-quicklinks.html %}
     
-            <!-- ========================== -->
-            <!-- MAIN NAVIGATION MENU      -->
-            <!-- ========================== -->
-            <!-- Primary navigation items from _data/navigation.yml -->
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} MAIN NAVIGATION MENU      {% endcomment %}
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} Primary navigation items from _data/navigation.yml {% endcomment %}
             {% include navigation/navbar.html %}
 
-            <!-- ========================== -->
-            <!-- UTILITY CONTROLS          -->
-            <!-- ========================== -->
+            {% comment %} ========================== {% endcomment %}
+            {% comment %} UTILITY CONTROLS          {% endcomment %}
+            {% comment %} ========================== {% endcomment %}
             <div class="navbar-utility-controls d-flex align-items-center flex-shrink-0" role="group" aria-label="Utility controls">
-                <!-- Language selection lives in the Settings offcanvas
+                {% comment %} Language selection lives in the Settings offcanvas
                      (components/info-section.html, Appearance tab) so the bar
-                     keeps its width for the main navigation items. -->
+                     keeps its width for the main navigation items. {% endcomment %}
 
-                <!-- Search Modal Toggle -->
+                {% comment %} Search Modal Toggle {% endcomment %}
                 <button
                     class="btn nav-search-button"
                     type="button"
@@ -170,7 +189,7 @@
                     <kbd class="nav-search-kbd d-none d-xl-inline-flex" aria-hidden="true">/</kbd>
                 </button>
 
-                <!-- Settings Offcanvas Toggle -->
+                {% comment %} Settings Offcanvas Toggle {% endcomment %}
                 <button
                     class="btn nav-settings-button d-none d-lg-inline-flex"
                     type="button"
@@ -183,7 +202,7 @@
                     <i class="{{site.default_icon}} bi-gear" aria-hidden="true"></i>
                 </button>
 
-                <!-- Navigation Menu Toggle - Mobile view -->
+                {% comment %} Navigation Menu Toggle - Mobile view {% endcomment %}
                 {%- if site.navigation.unified_mobile_drawer -%}
                   {%- assign _menu_target = "#zer0UnifiedDrawer" -%}
                   {%- assign _menu_controls = "zer0UnifiedDrawer" -%}
@@ -191,27 +210,39 @@
                   {%- assign _menu_target = "#bdNavbar" -%}
                   {%- assign _menu_controls = "bdNavbar" -%}
                 {%- endif -%}
+                {% comment %} Below lg this is a LABELLED control, not a bare glyph (#405).
+                     Two toggles coexist here — the sidebar hamburger and this one — and
+                     three-dots vs. list gave no clue which opened what. The gear is
+                     `d-lg-none`-excluded above (desktop only; on mobile its contents are
+                     reached through the drawer), so labelling this one is what makes the
+                     pair unambiguous.
+                     aria-label matches the visible "Menu" text verbatim (rather than the
+                     older, more descriptive "Toggle main navigation") so the accessible
+                     name CONTAINS the visible label in every locale — WCAG 2.5.3 Label in
+                     Name — instead of only coincidentally in English. {% endcomment %}
+                {%- assign _menu_toggle_label = ui.nav_menu_toggle_label | default: "Menu" -%}
                 <div class="bd-navbar-toggle d-lg-none">
-                    <button class="navbar-toggler p-2"
+                    <button class="navbar-toggler navbar-toggler-labeled p-2"
                             type="button"
                             data-bs-toggle="offcanvas"
                             data-bs-target="{{ _menu_target }}"
                             aria-controls="{{ _menu_controls }}"
-                            aria-label="Toggle main navigation"
+                            aria-label="{{ _menu_toggle_label }}"
                             aria-expanded="false">
                         <span class="bi bi-three-dots" aria-hidden="true"></span>
+                        <span class="navbar-toggler-text">{{ _menu_toggle_label }}</span>
                     </button>
                 </div>
             </div>
         </nav>
     </div>
 
-    <!-- ========================== -->
-    <!-- PROGRESS BAR MOUNT POINT  -->
-    <!-- ========================== -->
-    <!-- Nanobar mounts here when site.nanobar.position == "navbar" so the bar
+    {% comment %} ========================== {% endcomment %}
+    {% comment %} PROGRESS BAR MOUNT POINT  {% endcomment %}
+    {% comment %} ========================== {% endcomment %}
+    {% comment %} Nanobar mounts here when site.nanobar.position == "navbar" so the bar
          renders as a thin strip directly under the header. For "top" / "bottom"
-         the bar floats fixed to the viewport and no mount is needed. -->
+         the bar floats fixed to the viewport and no mount is needed. {% endcomment %}
     {%- assign _nb_pos = site.nanobar.position | default: "top" -%}
     {%- if site.nanobar.enabled != false and _nb_pos == "navbar" -%}
     <div id="top-progress-target" class="nanobar-mount" aria-hidden="true"></div>

data/_includes/core/tokens-inline.html

@@ -16,21 +16,36 @@
 
   Only emits a key if the config value is present, so the default cascade
   remains intact when consumers omit `theme_color` from _config.yml.
+
+  Precedence (T-048 / #459): the active skin beats `theme_color`.
+  The skin palettes in _sass/theme/_skins.scss set --zer0-color-primary,
+  --zer0-color-link and --zer0-color-accent together with --bs-primary.
+  So the config values for those three tokens are only emitted when no
+  palette skin is active. Otherwise this block would win on source order,
+  because `:root` and `[data-theme-skin]` have the same specificity, and the
+  theme layer would disagree with Bootstrap. `palette_skins` must list every
+  skin that _skins.scss gives a palette; test/visual/features/appearance.spec.js
+  checks that.
   ===================================================================
 {%- endcomment -%}
 {%- assign tc = site.theme_color -%}
+{%- assign palette_skins = "air,aqua,dirt,neon,mint,plum,sunrise" | split: "," -%}
 {%- if tc -%}
 <style id="zer0-tokens-inline">
 :root {
-  {%- if tc.main %} --zer0-color-primary: {{ tc.main }};{%- endif %}
   {%- if tc.secondary %} --zer0-color-secondary: {{ tc.secondary }};{%- endif %}
   {%- if tc.red %} --zer0-color-danger: {{ tc.red }};{%- endif %}
   {%- if tc.yellow %} --zer0-color-warning: {{ tc.yellow }};{%- endif %}
   {%- if tc.green %} --zer0-color-success: {{ tc.green }};{%- endif %}
   {%- if tc.teal %} --zer0-color-info: {{ tc.teal }};{%- endif %}
+}
+{%- if tc.main or tc.blue or tc.purple %}
+:root{% for s in palette_skins %}:not([data-theme-skin="{{ s }}"]){% endfor %} {
+  {%- if tc.main %} --zer0-color-primary: {{ tc.main }};{%- endif %}
   {%- if tc.blue %} --zer0-color-link: {{ tc.blue }};{%- endif %}
   {%- if tc.purple %} --zer0-color-accent: {{ tc.purple }};{%- endif %}
 }
+{%- endif %}
 </style>
 {%- endif -%}
 

data/_includes/docs/bootstrap-docs.html

@@ -1,6 +1,6 @@
-<!-- Style.html 
+{% comment %} Style.html 
      _includes/style.html 
--->
+{% endcomment %}
 
 <div class="bd-cheatsheet container-fluid">
     <section id="content">
@@ -933,7 +933,7 @@
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </div><!-- /btn-group -->
+          </div>{% comment %} /btn-group {% endcomment %}
           <div class="btn-group">
             <button type="button" class="btn btn-secondary">Secondary</button>
             <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -944,7 +944,7 @@
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </div><!-- /btn-group -->
+          </div>{% comment %} /btn-group {% endcomment %}
           <div class="btn-group">
             <button type="button" class="btn btn-success">Success</button>
             <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -955,7 +955,7 @@
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </div><!-- /btn-group -->example-divider
+          </div>{% comment %} /btn-group {% endcomment %}example-divider
           <div class="btn-group">
             <button type="button" class="btn btn-info">Info</button>
             <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -966,7 +966,7 @@
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </div><!-- /btn-group -->
+          </div>{% comment %} /btn-group {% endcomment %}
           <div class="btn-group">
             <button type="button" class="btn btn-warning">Warning</button>
             <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -977,7 +977,7 @@
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </div><!-- /btn-group -->
+          </div>{% comment %} /btn-group {% endcomment %}
           <div class="btn-group">
             <button type="button" class="btn btn-danger">Danger</button>
             <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -988,7 +988,7 @@
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-          </div><!-- /btn-group -->
+          </div>{% comment %} /btn-group {% endcomment %}
           </div></div>
           <div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
           <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">

data/_includes/landing/landing-install-cards.html

@@ -1,4 +1,4 @@
-<!-- Installation method cards; uses site.resources.* and environment where helpful -->
+{% comment %} Installation method cards; uses site.resources.* and environment where helpful {% endcomment %}
 <div class="row g-4 justify-content-center">
   <div class="col-12 col-sm-10 col-md-6 col-lg-4">
     <div class="card h-100 border-0 shadow-sm">
@@ -55,7 +55,7 @@ cd &lt;you&gt;.github.io
   </div>
 </div>
 
-<!-- Contributing guide call-to-action placed below all cards -->
+{% comment %} Contributing guide call-to-action placed below all cards {% endcomment %}
 <div class="text-center mt-4">
   <a class="btn btn-outline-secondary" href="{{ site.resources.contributing | default: '' | join: '' | default: '#' }}" target="_blank" rel="noopener">
     <i class="bi bi-journal-text me-2"></i>Read the Contributing Guide

data/_includes/landing/landing-quick-links.html

@@ -1,4 +1,4 @@
-<!-- Quick Links bar for landing page; uses site.resources config -->
+{% comment %} Quick Links bar for landing page; uses site.resources config {% endcomment %}
 <div class="bg-dark text-white py-3">
   <div class="container-xl px-4 px-md-5">
     <div class="row g-3 justify-content-center text-center align-items-center">

data/_includes/navigation/admin-nav.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-050 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   ADMIN NAV — Data-driven sidebar navigation for admin/settings pages
   ===================================================================
@@ -15,7 +15,7 @@
                 _data/navigation/admin.yml
   Used by: _layouts/admin.html
   ===================================================================
--->
+{% endcomment %}
 
 {% assign current_path = page.url %}
 {% assign admin_items = site.data.navigation.admin %}

data/_includes/navigation/nav-tree.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   NAV TREE - Flat YAML Navigation Renderer
   ===================================================================
@@ -28,7 +28,7 @@
   Usage:
   include navigation/nav-tree.html nav="docs"
   ===================================================================
--->
+{% endcomment %}
 
 {% assign navigation = site.data.navigation[include.nav] %}
 
@@ -42,7 +42,7 @@
     
     <li class="mb-1 nav-tree-item" data-depth="0">
       {% if has_children %}
-        <!-- Parent item with children - collapsible -->
+        {% comment %} Parent item with children - collapsible {% endcomment %}
         <div class="d-flex align-items-center">
           {% if item.url %}
             <a href="{{ item.url | relative_url }}" 
@@ -73,7 +73,7 @@
           {% endif %}
         </div>
         
-        <!-- Children container (Level 1) -->
+        {% comment %} Children container (Level 1) {% endcomment %}
         <div class="collapse{% if is_expanded %} show{% endif %}" id="{{ item_id }}">
           <ul class="list-unstyled fw-normal ps-3 nav-tree-children">
             {% for child in item.children %}
@@ -84,7 +84,7 @@
               
               <li class="mb-1 nav-tree-item" data-depth="1">
                 {% if child_has_children %}
-                  <!-- Level 1 parent with children -->
+                  {% comment %} Level 1 parent with children {% endcomment %}
                   <div class="d-flex align-items-center">
                     {% if child.url %}
                       <a href="{{ child.url | relative_url }}" 
@@ -114,7 +114,7 @@
                     {% endif %}
                   </div>
                   
-                  <!-- Children container (Level 2) -->
+                  {% comment %} Children container (Level 2) {% endcomment %}
                   <div class="collapse{% if child_expanded %} show{% endif %}" id="{{ child_id }}">
                     <ul class="list-unstyled fw-normal ps-3 nav-tree-children">
                       {% for grandchild in child.children %}
@@ -137,7 +137,7 @@
                     </ul>
                   </div>
                 {% else %}
-                  <!-- Level 1 leaf item -->
+                  {% comment %} Level 1 leaf item {% endcomment %}
                   {% if child.url %}
                     <a href="{{ child.url | relative_url }}" 
                        class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if child_active %} active{% endif %}">
@@ -156,7 +156,7 @@
           </ul>
         </div>
       {% else %}
-        <!-- Root level leaf item -->
+        {% comment %} Root level leaf item {% endcomment %}
         {% if item.url %}
           <a href="{{ item.url | relative_url }}" 
              class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none{% if is_active %} active{% endif %}">

data/_includes/navigation/navbar.html

@@ -1,25 +1,25 @@
 {% comment %} Features: ZER0-049, ZER0-055 {% endcomment %}
-<!-- 
+{% comment %} 
     file: navbar.html
     path: /includes/navbar.html
     includes:
     purpose: Offcanvas main navigation following Bootstrap 5 best practices
              with hover-activated dropdowns for desktop and accessible interactions
- -->
+ {% endcomment %}
 
-<!-- Navigation Links - Responsive Offcanvas (inline at lg+, offcanvas below) -->
+{% comment %} Navigation Links - Responsive Offcanvas (inline at lg+, offcanvas below) {% endcomment %}
 {%- include core/i18n.html -%}
 <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="mainNavOffcanvasLabel">
 
-    <!-- Main Navigation Header - Offcanvas -->
+    {% comment %} Main Navigation Header - Offcanvas {% endcomment %}
     <div class="offcanvas-header border-bottom">
         <h2 class="offcanvas-title h5 mb-0" id="mainNavOffcanvasLabel">{{ ui.main_nav_label | default: "Main Navigation" }}</h2>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close navigation menu" data-bs-target="#bdNavbar"></button>
     </div>
 
-    <!-- Main Navigation Body - Offcanvas -->
+    {% comment %} Main Navigation Body - Offcanvas {% endcomment %}
     <div class="offcanvas-body">
-        <!-- Desktop: width is the grid middle track; labels ellipsis or icon-only via container query -->
+        {% comment %} Desktop: width is the grid middle track; labels ellipsis or icon-only via container query {% endcomment %}
         <div class="bd-navbar-nav-viewport">
         <ul class="navbar-nav justify-content-lg-center text-start flex-grow-1">
             <li class="nav-item d-lg-none">
@@ -44,12 +44,12 @@
 
                 {%- if has_children -%}
                     <li class="nav-item dropdown d-flex align-items-center nav-hover-dropdown">
-                        <!-- Parent link navigates directly -->
+                        {% comment %} Parent link navigates directly {% endcomment %}
                         <a
                             class="nav-link"
                             href="{{ link.url | relative_url }}"
                             aria-label="{{ link.title }}"
-                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            {% if link.url == page.url %}aria-current="page"{% endif %}
                             title="{{ link.title }}"
                         >
                             {%- if link.icon -%}
@@ -58,11 +58,15 @@
                             <span class="nav-link-text">{{ link.title }}</span>
                         </a>
 
-                        <!-- Split toggle opens the dropdown (click on mobile, hover on desktop) -->
-                        <!-- Note: No data-bs-toggle="dropdown" — custom JS handles all interactions
-                             to avoid Bootstrap's native handler conflicting with our toggle logic -->
+                        {% comment %} Split toggle opens the dropdown (click on mobile, hover on desktop) {% endcomment %}
+                        {% comment %} Note: No data-bs-toggle="dropdown" — custom JS handles all interactions
+                             to avoid Bootstrap's native handler conflicting with our toggle logic {% endcomment %}
+                        {% comment %} No `ms-1`: at lg+ the chevron is absolutely positioned over the
+                             parent link's reserved padding (_navbar.scss), so a left margin would
+                             re-open the dead zone between label and chevron that #405 closed. Below
+                             lg the offcanvas layout keeps them as ordinary siblings. {% endcomment %}
                         <button
-                            class="nav-link dropdown-toggle dropdown-toggle-split ms-1"
+                            class="nav-link dropdown-toggle dropdown-toggle-split"
                             type="button"
                             id="dropdown-{{ link.title | slugify }}"
                             aria-expanded="false"
@@ -78,8 +82,7 @@
                                     <a
                                         class="dropdown-item"
                                         href="{{ child.url | relative_url }}"
-
-                                        {%- if child.url == page.url -%} aria-current="page"{%- endif -%}
+                                        {% if child.url == page.url %}aria-current="page"{% endif %}
                                     >
                                         {%- if child.icon -%}
                                             <i class="{{site.default_icon}} {{ child.icon }} me-2" aria-hidden="true"></i>
@@ -96,7 +99,7 @@
                             class="nav-link"
                             href="{{ link.url | relative_url }}"
                             aria-label="{{ link.title }}"
-                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            {% if link.url == page.url %}aria-current="page"{% endif %}
                             title="{{ link.title }}"
                         >
                             {%- if link.icon -%}
@@ -125,7 +128,7 @@
                             href="{{ col_url | relative_url }}"
                             aria-label="{{ col_title }}"
                             title="{{ col_title }}"
-                            {%- if page.collection == collection.label -%} aria-current="page"{%- endif -%}
+                            {% if page.collection == collection.label %}aria-current="page"{% endif %}
                         >
                             <span class="nav-link-text">{{ col_title }}</span>
                         </a>
@@ -165,8 +168,8 @@
     </div>
 </div>
 
-<!-- 
+{% comment %} 
   Navigation styles are now in _sass/core/_navbar.scss
   Navigation scripts are now in assets/js/navigation.js
   These are loaded automatically via the theme's asset pipeline
--->
+{% endcomment %}

data/_includes/navigation/section-sidebar.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   SECTION SIDEBAR - Fixed Topic Navigation
   ===================================================================
@@ -28,7 +28,7 @@
   - Bootstrap 5 offcanvas component
   - Bootstrap Icons
   ===================================================================
--->
+{% endcomment %}
 
 {% assign sidebar_id = include.sidebar_id | default: "sectionSidebar" %}
 {% assign section_posts = include.section_posts %}
@@ -71,13 +71,13 @@
   {% endfor %}
 {% endif %}
 
-<!-- ================================ -->
-<!-- DESKTOP SIDEBAR (Fixed Sticky)   -->
-<!-- ================================ -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} DESKTOP SIDEBAR (Fixed Sticky)   {% endcomment %}
+{% comment %} ================================ {% endcomment %}
 <aside class="section-sidebar-desktop d-none d-lg-block w-100">
   <div class="position-sticky" style="top: 80px;">
     
-    <!-- Topics Card -->
+    {% comment %} Topics Card {% endcomment %}
     <div class="card border-0 shadow-sm">
       <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
         <h5 class="mb-0">
@@ -134,7 +134,7 @@
       {% endif %}
     </div>
     
-    <!-- Section Stats -->
+    {% comment %} Section Stats {% endcomment %}
     <div class="card border-0 shadow-sm mt-3">
       <div class="card-body">
         <h6 class="text-muted mb-3">
@@ -158,9 +158,9 @@
   </div>
 </aside>
 
-<!-- ================================ -->
-<!-- MOBILE OFFCANVAS SIDEBAR         -->
-<!-- ================================ -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} MOBILE OFFCANVAS SIDEBAR         {% endcomment %}
+{% comment %} ================================ {% endcomment %}
 <div class="offcanvas offcanvas-start" tabindex="-1" id="{{ sidebar_id }}" aria-labelledby="{{ sidebar_id }}Label">
   <div class="offcanvas-header bg-primary text-white">
     <h2 class="offcanvas-title h5" id="{{ sidebar_id }}Label">
@@ -208,9 +208,9 @@
   </div>
 </div>
 
-<!-- ================================ -->
-<!-- SIDEBAR STYLES                   -->
-<!-- ================================ -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} SIDEBAR STYLES                   {% endcomment %}
+{% comment %} ================================ {% endcomment %}
 <style>
   /* Sidebar Navigation */
   .sidebar-nav .nav-link {
@@ -258,9 +258,9 @@
   }
 </style>
 
-<!-- ================================ -->
-<!-- SIDEBAR JAVASCRIPT               -->
-<!-- ================================ -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} SIDEBAR JAVASCRIPT               {% endcomment %}
+{% comment %} ================================ {% endcomment %}
 <script>
 (function() {
   // Smooth scroll for sidebar links