BLUE-7 prefers-reduced-motion

dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.12.0 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.12.1 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.12.0",
+    "version": "9.12.1",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.2.0",
+        "blue-web": "^1.3.2",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },

src/components/Chevron.tsx

@@ -19,6 +19,8 @@ export interface ChevronProps {
  * Chevron icon component with open state.
  */
 export default function Chevron({ open, mirrored, className, style }: ChevronProps) {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)").matches
+
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +33,7 @@ export default function Chevron({ open, mirrored, className, style }: ChevronPro
                 display: "inline-block",
                 verticalAlign: "-0.125em",
                 transform: `rotate(${open && mirrored ? -90 : open ? 90 : 0}deg)`,
-                transition: "transform 0.2s"
+                transition: prefersReducedMotion ? "none" : "transform 0.2s"
             }}
             viewBox="0 0 16 16"
         >