Finished new Tabbed implementation

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.d2f7d19d.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.55b1b295.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">

requirements.txt

@@ -22,8 +22,5 @@
 mkdocs>=1.2.2
 Pygments>=2.4
 markdown>=3.2
-# pymdown-extensions>=7.0
+pymdown-extensions>=8.2
 mkdocs-material-extensions>=1.0
-
-# Use feature branch temporarily
-pymdown-extensions @ git+https://github.com/facelessuser/pymdown-extensions.git@feature/tabbed-alternate

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -20,16 +20,14 @@
 /// DEALINGS
 ////
 
-@use "sass:selector";
-
 // ----------------------------------------------------------------------------
-// Rules
+// Rules: legacy implementation (deprecated, removed in v8)
 // ----------------------------------------------------------------------------
 
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Tabbed block content
+  // Tabbed content
   .tabbed-content {
     display: none;
     order: 99;
@@ -62,7 +60,7 @@
     }
   }
 
-  // Tabbed block container
+  // Tabbed container
   .tabbed-set {
     position: relative;
     display: flex;
@@ -124,10 +122,6 @@
   }
 }
 
-// ----------------------------------------------------------------------------
-// See https://github.com/facelessuser/pymdown-extensions/issues/1415
-// ----------------------------------------------------------------------------
-
 // ----------------------------------------------------------------------------
 // Placeholders: improve colocation for better compression
 // ----------------------------------------------------------------------------
@@ -159,10 +153,10 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset { // stylelint-disable-line
 
-  // Tab labels container
+  // Tabbed labels
   .tabbed-labels {
     display: flex;
-    max-width: 100vw; // TODO: see if we can use something else
+    max-width: 100vw;
     overflow: auto;
     box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
     scroll-snap-type: x proximity;
@@ -218,19 +212,19 @@
   // [mobile -]: Align with body copy
   @include break-to-device(mobile) {
 
-    // Top-level tab label containers
+    // Top-level tabbed labels
     > .tabbed-alternate .tabbed-labels {
-      margin: 1em px2rem(-16px);
+      margin: 0 px2rem(-16px);
       padding: 0 px2rem(16px);
       scroll-padding: 0 px2rem(16px);
     }
   }
 
-  // Tab block container
+  // Tabbed container
   .tabbed-alternate {
     flex-direction: column;
 
-    // Tab content container
+    // Tabbed content
     .tabbed-content {
       display: initial;
       order: initial;
@@ -243,8 +237,8 @@
       }
     }
 
-    // Tab content - TODO: nested tabs might break here...
-    .tabbed-subcontent { // TODO: this might not be necessary to nest under .tabbed-alternate!
+    // Tabbed block
+    .tabbed-block {
       display: none;
 
       // [print]: Intersperse labels with containers
@@ -273,7 +267,7 @@
         }
       }
 
-      // Adjust spacing for nested tab
+      // Adjust spacing for nested tabbed container
       > .tabbed-set {
         margin: 0;
       }
@@ -297,7 +291,7 @@
           }
         }
 
-        // Tab on keyboard focus
+        // Tab label on keyboard focus
         &.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) {
           @extend %tabbed-label-focus-visible;
         }