Prototyped new tabbed implementation

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f7f47774.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.66338c14.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
@@ -223,7 +223,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.29db7785.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.b9a68a6f.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

mkdocs.yml

@@ -160,7 +160,8 @@ markdown_extensions:
         - name: mermaid
           class: mermaid-experimental
           format: !!python/name:pymdownx.superfences.fence_code_format
-  - pymdownx.tabbed
+  - pymdownx.tabbed:
+      alternate_style: true
   - pymdownx.tasklist:
       custom_checkbox: true
   - pymdownx.tilde

requirements.txt

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

src/assets/javascripts/bundle.ts

@@ -21,20 +21,25 @@
  */
 
 import "focus-visible"
-import { NEVER, Subject, defer, merge } from "rxjs"
+import { NEVER, Subject, defer, fromEvent, merge, of } from "rxjs"
 import {
   delay,
   filter,
   map,
+  mapTo,
+  mergeMap,
   mergeWith,
   shareReplay,
-  switchMap
+  switchMap,
+  tap
 } from "rxjs/operators"
 
 import { configuration, feature } from "./_"
 import {
   at,
   getElement,
+  getElementOrThrow,
+  getElements,
   requestJSON,
   setToggle,
   watchDocument,
@@ -252,3 +257,20 @@ window.screen$    = screen$            /* Screen observable */
 window.print$     = print$             /* Print mode observable */
 window.alert$     = alert$             /* Alert subject */
 window.component$ = component$         /* Component observable */
+
+/* ----------------------------------------------------------------------------
+ * Temporary, before we integrate this into master
+ * ------------------------------------------------------------------------- */
+
+document$
+  .pipe(
+    switchMap(() => of(...getElements(".tabbed-alternate > input"))
+      .pipe(
+        mergeMap(el => fromEvent(el, "change").pipe(mapTo(el))),
+        map(el => getElementOrThrow(`label[for=${el.id}]`))
+      )
+    )
+  )
+    .subscribe(el => {
+      el.scrollIntoView({ behavior: "smooth",  block: "nearest" })
+    })

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

@@ -20,6 +20,8 @@
 /// DEALINGS
 ////
 
+@use "sass:selector";
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -121,3 +123,132 @@
     }
   }
 }
+
+// ----------------------------------------------------------------------------
+// See https://github.com/facelessuser/pymdown-extensions/issues/1415
+// ----------------------------------------------------------------------------
+
+// ----------------------------------------------------------------------------
+// Placeholders: improve colocation for better compression
+// ----------------------------------------------------------------------------
+
+// Tab label placeholder
+%tabbed-label {
+  color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+}
+
+// Tab label on keyboard focus placeholder
+%tabbed-label-focus-visible {
+  background-color: var(--md-accent-fg-color--transparent);
+}
+
+// Tab content placeholder
+%tabbed-content {
+  display: block;
+}
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset { // stylelint-disable-line
+
+  // Tab labels container
+  .tabbed-labels {
+    display: flex;
+    width: 100%;
+    overflow: auto;
+    box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest) inset;
+    scroll-snap-type: x proximity;
+    -ms-overflow-style: none;          // IE, Edge
+    scrollbar-width: none;             // Firefox
+
+    // Webkit scrollbar
+    &::-webkit-scrollbar {
+      display: none;                   // Chrome, Safari
+    }
+
+    // Tab label
+    > label {
+      z-index: 1;
+      width: auto;
+      padding: px2em(12px, 12.8px) 1.25em px2em(10px, 12.8px);
+      color: var(--md-default-fg-color--light);
+      font-weight: 700;
+      font-size: px2rem(12.8px);
+      white-space: nowrap;
+      border-bottom: px2rem(2px) solid transparent;
+      scroll-snap-align: start;
+      border-top-left-radius: px2rem(2px);
+      border-top-right-radius: px2rem(2px);
+      cursor: pointer;
+      transition: background-color 250ms, color 250ms;
+
+      // Tab label on hover
+      &:hover {
+        color: var(--md-accent-fg-color);
+      }
+    }
+  }
+
+  // Tab block container
+  .tabbed-alternate {
+
+    // Tab content container
+    .tabbed-content {
+      all: initial;
+      width: 100%;
+    }
+
+    // Tab content
+    .tabbed-subcontent {
+      display: none;
+
+      // Code block is the only child of a tab - remove margin and mirror
+      // previous (now deprecated) SuperFences code block grouping behavior
+      > pre:only-child,
+      > .highlight:only-child pre,
+      > .highlighttable:only-child {
+        margin: 0;
+
+        // Omit rounded borders
+        > code {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+
+      // Adjust spacing for nested tab
+      > .tabbed-set {
+        margin: 0;
+      }
+    }
+
+    // Tab label states
+    @for $i from 10 through 1 {
+      input:nth-child(#{$i}) {
+
+        // Tab is active
+        &:checked {
+
+          // Tab label
+          ~ .tabbed-labels > :nth-child(#{$i}) {
+            @extend %tabbed-label;
+          }
+
+          // Tab content
+          ~ .tabbed-content > :nth-child(#{$i}) {
+            @extend %tabbed-content;
+          }
+        }
+
+        // Tab on keyboard focus
+        &.focus-visible ~ .tabbed-labels > :nth-child(#{$i}) {
+          @extend %tabbed-label-focus-visible;
+        }
+      }
+    }
+  }
+}