Hoisted active state of navigation tabs link into item

material/base.html

@@ -44,7 +44,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.92d4c850.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.0c456da8.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ecc896b0.min.css' | url }}">

material/partials/tabs-item.html

@@ -10,24 +10,24 @@
   {{ ref.title }}
 {% endmacro %}
 {% macro render(nav_item, ref = nav_item) %}
-  {% set class = "md-tabs__link" %}
+  {% set class = "md-tabs__item" %}
   {% if ref.active %}
-    {% set class = class ~ " md-tabs__link--active" %}
+    {% set class = class ~ " md-tabs__item--active" %}
   {% endif %}
   {% if nav_item.children %}
     {% set first = nav_item.children | first %}
     {% if first.children %}
       {{ render(first, ref) }}
     {% else %}
-      <li class="md-tabs__item">
-        <a href="{{ first.url | url }}" class="{{ class }}">
+      <li class="{{ class }}">
+        <a href="{{ first.url | url }}" class="md-tabs__link">
           {{ render_content(first, ref) }}
         </a>
       </li>
     {% endif %}
   {% else %}
-    <li class="md-tabs__item">
-      <a href="{{ nav_item.url | url }}" class="{{ class }}">
+    <li class="{{ class }}">
+      <a href="{{ nav_item.url | url }}" class="md-tabs__link">
         {{ render_content(nav_item) }}
       </a>
     </li>

src/assets/stylesheets/main/components/_tabs.scss

@@ -77,6 +77,12 @@
   &__item {
     height: px2rem(48px);
     padding-inline: px2rem(12px);
+
+    // Navigation tabs link in active navigation
+    &--active .md-tabs__link {
+      color: inherit;
+      opacity: 1;
+    }
   }
 
   // Navigation tabs link - could be defined as block elements and aligned via
@@ -94,8 +100,7 @@
       transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
       opacity   250ms;
 
-    // Active link and link on focus/hover
-    &--active,
+    // Navigation tabs link on focus/hover
     &:is(:focus, :hover) {
       color: inherit;
       opacity: 1;

src/partials/header.html

@@ -20,7 +20,7 @@
   IN THE SOFTWARE.
 -->
 
-<!-- Determine base classes -->
+<!-- Determine classes -->
 {% set class = "md-header" %}
 {% if "navigation.tabs.sticky" in features %}
   {% set class = class ~ " md-header--shadow md-header--lifted" %}

src/partials/nav-item.html

@@ -81,7 +81,7 @@
 <!-- Render navigation item -->
 {% macro render(nav_item, path, level) %}
 
-  <!-- Determine base classes -->
+  <!-- Determine classes -->
   {% set class = "md-nav__item" %}
   {% if nav_item.active %}
     {% set class = class ~ " md-nav__item--active" %}

src/partials/nav.html

@@ -22,7 +22,7 @@
 
 {% import "partials/nav-item.html" as item with context %}
 
-<!-- Determine base classes -->
+<!-- Determine classes -->
 {% set class = "md-nav md-nav--primary" %}
 {% if "navigation.tabs" in features %}
   {% set class = class ~ " md-nav--lifted" %}

src/partials/tabs-item.html

@@ -37,10 +37,10 @@
 <!-- Render navigation item -->
 {% macro render(nav_item, ref = nav_item) %}
 
-  <!-- Determine class according to state -->
-  {% set class = "md-tabs__link" %}
+  <!-- Determine classes -->
+  {% set class = "md-tabs__item" %}
   {% if ref.active %}
-    {% set class = class ~ " md-tabs__link--active" %}
+    {% set class = class ~ " md-tabs__item--active" %}
   {% endif %}
 
   <!-- Navigation item with nested items -->
@@ -53,8 +53,8 @@
 
     <!-- Nested navigation item -->
     {% else %}
-      <li class="md-tabs__item">
-        <a href="{{ first.url | url }}" class="{{ class }}">
+      <li class="{{ class }}">
+        <a href="{{ first.url | url }}" class="md-tabs__link">
           {{ render_content(first, ref) }}
         </a>
       </li>
@@ -62,8 +62,8 @@
 
   <!-- Navigation item -->
   {% else %}
-    <li class="md-tabs__item">
-      <a href="{{ nav_item.url | url }}" class="{{ class }}">
+    <li class="{{ class }}">
+      <a href="{{ nav_item.url | url }}" class="md-tabs__link">
         {{ render_content(nav_item) }}
       </a>
     </li>