Fixed tab indicator animation for right-to-left languages

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ffa0dd14.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.3714f473.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">
@@ -213,7 +213,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.1cbe63b4.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f881a9a8.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/content/tabs/index.ts

@@ -23,6 +23,9 @@
 import {
   Observable,
   Subject,
+  animationFrameScheduler,
+  auditTime,
+  combineLatest,
   defer,
   finalize,
   fromEvent,
@@ -30,6 +33,8 @@ import {
   mapTo,
   merge,
   startWith,
+  takeLast,
+  takeUntil,
   tap
 } from "rxjs"
 
@@ -37,7 +42,8 @@ import {
   getElement,
   getElementOffset,
   getElementSize,
-  getElements
+  getElements,
+  watchElementSize
 } from "~/browser"
 
 import { Component } from "../../_"
@@ -97,19 +103,29 @@ export function watchContentTabs(
 export function mountContentTabs(
   el: HTMLElement
 ): Observable<Component<ContentTabs>> {
+  const { matches: reduce } = matchMedia("(prefers-reduced-motion)")
+
+  /* Mount component on subscription */
   const container = getElement(".tabbed-labels", el)
   return defer(() => {
     const push$ = new Subject<ContentTabs>()
-    push$.subscribe({
+    combineLatest([push$, watchElementSize(el)])
+      .pipe(
+        auditTime(1, animationFrameScheduler),
+        takeUntil(push$.pipe(takeLast(1)))
+      )
+        .subscribe({
 
           /* Handle emission */
-      next({ active }) {
+          next([{ active }]) {
             const offset = getElementOffset(active)
+            if (!reduce) {
               const { width } = getElementSize(active)
 
               /* Set tab indicator offset and width */
               el.style.setProperty("--md-indicator-x", `${offset.x}px`)
               el.style.setProperty("--md-indicator-width", `${width}px`)
+            }
 
             /* Smoothly scroll container */
             container.scrollTo({

src/assets/javascripts/components/top/index.ts

@@ -148,7 +148,7 @@ export function mountBackToTop(
     /* Handle complete */
     complete() {
       el.style.top = ""
-      el.removeAttribute("data-md-state")
+      el.setAttribute("data-md-state", "hidden")
       el.removeAttribute("tabindex")
     }
   })

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

@@ -87,14 +87,18 @@
       display: contents;
     }
 
+    // [screen and no reduced motion]: Disable animation
+    @media screen and (prefers-reduced-motion: no-preference) {
+
       // [js]: Show animated tab indicator
       .js & {
         position: relative;
 
         // Tab indicator
-      &::after {
+        &::before {
           position: absolute;
           bottom: 0;
+          left: 0;
           display: block;
           width: var(--md-indicator-width);
           height: 2px;
@@ -107,6 +111,7 @@
           content: "";
         }
       }
+    }
 
     // Webkit scrollbar
     &::-webkit-scrollbar {
@@ -229,6 +234,11 @@
   @media screen {
     color: var(--md-accent-fg-color);
 
+    // [reduced motion]: Show border
+    @media (prefers-reduced-motion) {
+      border-color: var(--md-accent-fg-color);
+    }
+
     // [no-js]: Show border (indicator is animated with JavaScript)
     .no-js & {
       border-color: var(--md-accent-fg-color);

src/assets/stylesheets/main/layout/_tooltip.scss

@@ -85,7 +85,7 @@
     max-height   0ms 250ms,
     z-index    250ms;
 
-  // [reduced-motion]: Disable animation
+  // [reduced motion]: Disable animation
   @media (prefers-reduced-motion) {
     transition: none;
   }
@@ -101,7 +101,7 @@
       max-height 250ms,
       z-index      0ms;
 
-    // [reduced-motion]: Disable animation
+    // [reduced motion]: Disable animation
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -194,7 +194,7 @@
       animation: pulse 2000ms infinite;
       content: "";
 
-      // [reduced-motion]: Disable animation
+      // [reduced motion]: Disable animation
       @media (prefers-reduced-motion) {
         transition: none;
         animation: none;
@@ -212,7 +212,7 @@
           background-color 250ms;
         animation: none;
 
-        // [reduced-motion]: Disable animation
+        // [reduced motion]: Disable animation
         @media (prefers-reduced-motion) {
           transition: none;
         }
@@ -225,7 +225,7 @@
       transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
       content: attr(data-md-annotation-id);
 
-      // [reduced-motion]: Disable animation
+      // [reduced motion]: Disable animation
       @media (prefers-reduced-motion) {
         transition: none;
       }