@vector-im/compound-web 9.1.0 → 9.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -83,7 +83,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^10.0.0",
     "jsdom": "^29.0.0",
-    "prettier": "3.8.1",
+    "prettier": "3.8.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",

package/src/components/Avatar/Avatar.module.css

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
   font-family: var(--cpd-font-family-sans);
   font-weight: bold;
   overflow: hidden;
-  user-select: none;
+  user-select: none; /* stylelint-disable-line defensive-css/no-user-select-none */
 
   /* Set a background color to help with visual consistency when displaying
    * avatars with a translucent background */

package/src/components/Dropdown/Dropdown.module.css

@@ -31,7 +31,9 @@ Please see LICENSE files in the repository root for full details.
     gap: var(--cpd-space-4x);
 
     svg {
-      transition: transform 0.1s linear;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: transform 0.1s linear;
+      }
     }
   }
 

package/src/components/Form/Controls/MFA/MFA.module.css

@@ -90,6 +90,7 @@ Please see LICENSE files in the repository root for full details.
   border-color: var(--cpd-color-text-critical-primary);
 }
 
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
 .control:focus ~ .digit:not([data-filled]) {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;

package/src/components/Form/Controls/Text/Text.module.css

@@ -35,6 +35,7 @@ Please see LICENSE files in the repository root for full details.
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
 .control:focus {
   outline: 2px solid var(--cpd-color-border-focused);
   border-color: transparent;

package/src/components/InlineSpinner/InlineSpinner.module.css

@@ -22,5 +22,8 @@ Please see LICENSE files in the repository root for full details.
   align-items: center;
   inline-size: 100%;
   block-size: 100%;
-  animation: 1s linear spin infinite;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: 1s linear spin infinite;
+  }
 }

package/src/components/Menu/FloatingMenu.module.css

@@ -35,6 +35,8 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .menu[data-state="open"] {
+  /* Disable linter, we have a reduced motion style below */
+  /* stylelint-disable-next-line defensive-css/require-prefers-reduced-motion */
   animation: slide-in 180ms;
 }
 

package/src/components/Nav/Nav.module.css

@@ -36,7 +36,10 @@
   block-size: 0;
   border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
   background-color: var(--cpd-color-bg-action-primary-rest);
-  transition: height 0.1s ease-in-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: height 0.1s ease-in-out;
+  }
 }
 
 .nav-tab[data-current]::before {

package/src/components/Progress/Progress.module.css

@@ -59,7 +59,11 @@ Please see LICENSE files in the repository root for full details.
 .progress-bar-indicator {
   position: absolute;
   inset: 0;
-  transition: transform 0.2s ease-in-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 0.2s ease-in-out;
+  }
+
   background-image: linear-gradient(
     135deg,
     var(--cpd-progress-bar-muted) 0%,

package/src/components/Search/Search.module.css

@@ -61,6 +61,7 @@ Please see LICENSE files in the repository root for full details.
   color: var(--cpd-color-text-secondary);
 }
 
+/* stylelint-disable-next-line defensive-css/require-focus-visible */
 .input:focus::placeholder {
   color: var(--cpd-color-text-secondary);
 }

package/src/index.ts

@@ -52,6 +52,7 @@ export { Breadcrumb } from "./components/Breadcrumb";
 export { VisualList, VisualListItem } from "./components/VisualList";
 export { ChatFilter } from "./components/ChatFilter";
 export { UnreadCounter, Pill, Unread } from "./components/ActivityMarker";
+export { PageHeader } from "./components/PageHeader/PageHeader";
 
 export {
   TextControl,