Simplified reduced motion implementation for content tabs

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.3714f473.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.052bca4c.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.f881a9a8.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.adc5bf89.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

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

@@ -103,9 +103,6 @@ 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>()
@@ -119,13 +116,11 @@ export function mountContentTabs(
           /* Handle emission */
           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/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -88,7 +88,7 @@
     }
 
     // [screen and no reduced motion]: Disable animation
-    @media screen and (prefers-reduced-motion: no-preference) {
+    @media screen {
 
       // [js]: Show animated tab indicator
       .js & {
@@ -109,6 +109,11 @@
             transform 250ms;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           content: "";
+
+          // [reduced motion]: Disable animation
+          @media (prefers-reduced-motion) {
+            transition: none;
+          }
         }
       }
     }
@@ -234,11 +239,6 @@
   @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);