@vector-im/compound-web 9.0.1 → 9.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "9.0.1",
+  "version": "9.2.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -51,7 +51,7 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
-    "@element-hq/element-web-playwright-common": "^2.0.0",
+    "@element-hq/element-web-playwright-common": "^3.0.0",
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
@@ -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/Badge/Badge.module.css

@@ -11,37 +11,70 @@ Please see LICENSE files in the repository root for full details.
   align-items: center;
   border-radius: 9999px; /* pill effect */
   padding: var(--cpd-space-1x) var(--cpd-space-3x);
+  box-sizing: border-box;
+  min-block-size: 28px;
+}
+
+.has-icon {
+  padding-inline-start: var(--cpd-space-2x);
 }
 
 .badge[data-kind="default"] {
-  border: 1px solid var(--cpd-color-alpha-gray-400);
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+
+  /* To keep the same height than the other badges despite the border  */
+  padding-block: calc(var(--cpd-space-1x) - 1px);
   outline: none;
-  color: var(--cpd-color-gray-1100);
+  color: var(--cpd-color-text-primary);
+
+  svg {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
 .badge[data-kind="grey"] {
-  background: var(--cpd-color-alpha-gray-300);
-  color: var(--cpd-color-gray-1100);
+  background: var(--cpd-color-bg-badge-secondary);
+  color: var(--cpd-color-text-primary);
+
+  svg {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
 .badge[data-kind="on-solid"] {
-  background: var(--cpd-color-alpha-gray-1200);
+  background: var(--cpd-color-bg-badge-primary);
   color: var(--cpd-color-text-on-solid-primary);
+
+  svg {
+    color: var(--cpd-color-icon-on-solid-primary);
+  }
 }
 
 .badge[data-kind="blue"] {
-  background: var(--cpd-color-alpha-blue-300);
-  color: var(--cpd-color-blue-1100);
+  background: var(--cpd-color-bg-badge-info);
+  color: var(--cpd-color-text-badge-info);
+
+  svg {
+    color: var(--cpd-color-icon-info-primary);
+  }
 }
 
 .badge[data-kind="green"] {
-  background: var(--cpd-color-alpha-green-300);
-  color: var(--cpd-color-green-1100);
+  background: var(--cpd-color-bg-badge-accent);
+  color: var(--cpd-color-text-badge-accent);
+
+  svg {
+    color: var(--cpd-color-icon-accent-primary);
+  }
 }
 
 .badge[data-kind="red"] {
-  background: var(--cpd-color-alpha-red-300);
-  color: var(--cpd-color-red-1100);
+  background: var(--cpd-color-bg-badge-critical);
+  color: var(--cpd-color-text-critical-primary);
+
+  svg {
+    color: var(--cpd-color-icon-critical-primary);
+  }
 }
 
 @media (forced-colors: active) {

package/src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { type PropsWithChildren } from "react";
+import React, { type ComponentType, type PropsWithChildren } from "react";
 import styles from "./Badge.module.css";
 import { Typography } from "../Typography/Typography";
 
@@ -19,6 +19,10 @@ type BadgeProps = {
    * The type of badge.
    */
   kind?: "default" | "grey" | "on-solid" | "blue" | "green" | "red";
+  /**
+   * An icon to display within the badge.
+   */
+  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;
 };
 
 /**
@@ -26,10 +30,13 @@ type BadgeProps = {
  */
 export const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({
   children,
+  Icon,
   kind = "default",
   className,
 }) => {
-  const classes = classnames(styles.badge, className);
+  const classes = classnames(styles.badge, className, {
+    [styles["has-icon"]]: !!Icon,
+  });
   return (
     <Typography
       as="span"
@@ -38,6 +45,7 @@ export const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({
       className={classes}
       data-kind={kind}
     >
+      {Icon && <Icon width="16" height="16" aria-hidden={true} />}
       {children}
     </Typography>
   );

package/src/components/Button/IconButton/IconButton.tsx

@@ -47,6 +47,10 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
    * Optional tooltip for the button
    */
   tooltip?: string;
+  /**
+   * The placement of the tooltip, if `tooltip` is provided.
+   */
+  tooltipPlacement?: React.ComponentProps<typeof Tooltip>["placement"];
   /**
    * Hide the background when the button is not active or hovered.
    * @default false
@@ -71,6 +75,7 @@ export const IconButton = forwardRef<
     disabled,
     destructive,
     tooltip,
+    tooltipPlacement,
     noBackground = false,
     ...props
   },
@@ -106,5 +111,11 @@ export const IconButton = forwardRef<
     </UnstyledButton>
   );
 
-  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;
+  return tooltip ? (
+    <Tooltip label={tooltip} placement={tooltipPlacement}>
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  );
 });

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/ContextMenu.tsx

@@ -18,6 +18,10 @@ import {
   Portal,
   Content,
   ContextMenuItem,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuPortal,
 } from "@radix-ui/react-context-menu";
 import { FloatingMenu } from "./FloatingMenu";
 import { Drawer } from "vaul";
@@ -27,6 +31,7 @@ import {
   MenuContext,
   type MenuData,
   type MenuItemWrapperProps,
+  type SubMenuWrapperProps,
 } from "./MenuContext";
 import { DrawerMenu } from "./DrawerMenu";
 import { getPlatform } from "../../utils/platform";
@@ -73,6 +78,24 @@ const ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({
   </ContextMenuItem>
 );
 
+const ContextSubMenuWrapper: FC<SubMenuWrapperProps> = ({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+}) => (
+  <ContextMenuSub open={open} onOpenChange={onOpenChange}>
+    <ContextMenuSubTrigger asChild>{trigger}</ContextMenuSubTrigger>
+    <ContextMenuPortal>
+      <ContextMenuSubContent asChild alignOffset={-20}>
+        <FloatingMenu title="" showTitle={false}>
+          {children}
+        </FloatingMenu>
+      </ContextMenuSubContent>
+    </ContextMenuPortal>
+  </ContextMenuSub>
+);
+
 /**
  * A menu opened by right-clicking or long-pressing another UI element.
  */
@@ -100,6 +123,7 @@ export const ContextMenu: FC<Props> = ({
   const context: MenuData = useMemo(
     () => ({
       MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,
+      SubMenuWrapper: drawer ? null : ContextSubMenuWrapper,
       onOpenChange,
     }),
     [onOpenChange],

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/Menu/Menu.tsx

@@ -5,13 +5,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type FC, type ReactNode, useMemo } from "react";
+import React, {
+  type FC,
+  type ReactNode,
+  useMemo,
+  useEffect,
+  useState,
+} from "react";
 import {
   Root,
   Trigger,
   Portal,
   Content,
   DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
 } from "@radix-ui/react-dropdown-menu";
 import { FloatingMenu } from "./FloatingMenu";
 import { Drawer } from "vaul";
@@ -21,6 +31,7 @@ import {
   MenuContext,
   type MenuData,
   type MenuItemWrapperProps,
+  type SubMenuWrapperProps,
 } from "./MenuContext";
 import { DrawerMenu } from "./DrawerMenu";
 import { getPlatform } from "../../utils/platform";
@@ -84,6 +95,49 @@ const DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({
   </DropdownMenuItem>
 );
 
+/** Duration of the parent menu's slide-in animation (ms). */
+const MENU_ANIMATION_DURATION = 180;
+
+const DropdownSubMenuWrapper: FC<SubMenuWrapperProps> = ({
+  trigger,
+  children,
+  open: openProp,
+  onOpenChange,
+}) => {
+  // When the submenu is programmatically opened at the same time as the parent
+  // menu (e.g. open={true} on mount), the parent is still mid-animation and
+  // the trigger position hasn't settled. Defer the open so the submenu
+  // positions correctly after the parent animation completes.
+  const [deferredOpen, setDeferredOpen] = useState(false);
+
+  useEffect(() => {
+    if (openProp) {
+      const timer = setTimeout(
+        () => setDeferredOpen(true),
+        MENU_ANIMATION_DURATION,
+      );
+      return () => clearTimeout(timer);
+    } else {
+      setDeferredOpen(false);
+    }
+  }, [openProp]);
+
+  const open = openProp ? deferredOpen : openProp;
+
+  return (
+    <DropdownMenuSub open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuSubTrigger asChild>{trigger}</DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent asChild alignOffset={-20}>
+          <FloatingMenu title="" showTitle={false}>
+            {children}
+          </FloatingMenu>
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  );
+};
+
 /**
  * A menu opened by pressing a button.
  */
@@ -105,6 +159,7 @@ export const Menu: FC<Props> = ({
   const context: MenuData = useMemo(
     () => ({
       MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,
+      SubMenuWrapper: drawer ? null : DropdownSubMenuWrapper,
       onOpenChange,
     }),
     [onOpenChange],

package/src/components/Menu/MenuContext.tsx

@@ -17,11 +17,34 @@ export interface MenuItemWrapperProps {
   children: ReactNode;
 }
 
+export interface SubMenuWrapperProps {
+  /**
+   * The trigger element that opens the submenu (typically a MenuItem).
+   */
+  trigger: ReactNode;
+  /**
+   * The submenu contents.
+   */
+  children: ReactNode;
+  /**
+   * Whether the submenu is open (controlled).
+   */
+  open?: boolean;
+  /**
+   * Event handler called when the open state of the submenu changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
 export interface MenuData {
   /**
    * A component that wraps interactive menu items.
    */
   MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;
+  /**
+   * A component that wraps submenus.
+   */
+  SubMenuWrapper: ComponentType<SubMenuWrapperProps> | null;
   /**
    * Event handler called when the open state of the menu changes.
    */

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

@@ -23,7 +23,8 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-action-secondary-rest);
 }
 
-.item.interactive {
+.item.interactive,
+.item[data-state] {
   cursor: pointer;
 }
 
@@ -88,12 +89,31 @@ button.item {
   color: var(--cpd-color-icon-critical-primary);
 }
 
+/* Submenu triggers: always show the chevron and apply hover style when open */
+.item[data-state] > .nav-hint {
+  display: initial;
+}
+
+.item[data-state] > .nav-hint ~ * {
+  display: none;
+}
+
+.item[data-state="open"][data-kind="primary"] {
+  background: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.item[data-state="open"][data-kind="critical"] {
+  background: var(--cpd-color-bg-critical-subtle);
+}
+
 @media (hover) {
-  .item.interactive[data-kind="primary"]:hover {
+  .item.interactive[data-kind="primary"]:hover,
+  .item[data-state][data-kind="primary"]:hover {
     background: var(--cpd-color-bg-action-secondary-hovered);
   }
 
-  .item.interactive[data-kind="critical"]:hover {
+  .item.interactive[data-kind="critical"]:hover,
+  .item[data-state][data-kind="critical"]:hover {
     background: var(--cpd-color-bg-critical-subtle);
   }
 
@@ -107,11 +127,13 @@ button.item {
   }
 }
 
-.item.interactive[data-kind="primary"]:active {
+.item.interactive[data-kind="primary"]:active,
+.item[data-state][data-kind="primary"]:active {
   background: var(--cpd-color-bg-action-secondary-pressed);
 }
 
-.item.interactive[data-kind="critical"]:active {
+.item.interactive[data-kind="critical"]:active,
+.item[data-state][data-kind="critical"]:active {
   background: var(--cpd-color-bg-critical-subtle-hovered);
 }
 

package/src/components/Menu/SubMenu.tsx

@@ -0,0 +1,62 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type FC, type ReactNode, useContext } from "react";
+import { MenuContext } from "./MenuContext";
+
+interface Props {
+  /**
+   * The trigger element that opens the submenu. This should be a MenuItem.
+   */
+  trigger: ReactNode;
+  /**
+   * Whether the submenu is open (controlled).
+   */
+  open?: boolean;
+  /**
+   * Event handler called when the open state of the submenu changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * The submenu contents (typically MenuItem elements).
+   */
+  children: ReactNode;
+}
+
+/**
+ * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+ * component and the children are the submenu items.
+ */
+export const SubMenu: FC<Props> = ({
+  trigger,
+  open,
+  onOpenChange,
+  children,
+}) => {
+  const context = useContext(MenuContext);
+
+  // When there's no SubMenuWrapper (e.g. drawer on mobile), flatten the
+  // submenu items inline — nested flyouts don't work well in drawers.
+  if (context?.SubMenuWrapper == null) {
+    return (
+      <>
+        {trigger}
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <context.SubMenuWrapper
+      trigger={trigger}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      {children}
+    </context.SubMenuWrapper>
+  );
+};

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/components/Toast/Toast.module.css

@@ -7,11 +7,14 @@ Please see LICENSE files in the repository root for full details.
 
 .toast-container {
   inline-size: fit-content;
-  background-color: var(--cpd-color-alpha-gray-1300);
+  background-color: var(--cpd-color-bg-action-primary-rest);
   color: var(--cpd-color-text-on-solid-primary);
   border-radius: 99px;
-  font-size: var(--cpd-font-body-sm-medium);
   padding: var(--cpd-space-2x) var(--cpd-space-4x);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--cpd-space-2x);
 }
 
 @media (forced-colors: active) {
@@ -19,3 +22,30 @@ Please see LICENSE files in the repository root for full details.
     outline: 1px solid transparent;
   }
 }
+
+.icon {
+  flex-shrink: 0;
+}
+
+.has-close {
+  gap: var(--cpd-space-3x);
+}
+
+.content {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--cpd-space-2x);
+}
+
+.close {
+  align-self: flex-start;
+  padding: var(--cpd-space-0-5x) !important;
+
+  &:not(:hover, :focus-visible) {
+    * {
+      /* Override default color of icon button. The container background is different than the default canvas color */
+      color: var(--cpd-color-icon-on-solid-primary) !important;
+    }
+  }
+}