@vector-im/compound-web 8.3.5 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.3.5",
+  "version": "8.4.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -56,7 +56,7 @@
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
     "@storybook/addon-a11y": "^10.0.0",
-    "@storybook/addon-designs": "11.1.1",
+    "@storybook/addon-designs": "11.1.2",
     "@storybook/addon-docs": "^10.0.0",
     "@storybook/addon-links": "^10.0.0",
     "@storybook/addon-themes": "^10.0.0",
@@ -65,7 +65,7 @@
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@tsconfig/node22": "^22.0.0",
+    "@tsconfig/node24": "^24.0.0",
     "@tsconfig/vite-react": "^7.0.0",
     "@types/eslint": "^9.0.0",
     "@types/node": "^24.0.0",
@@ -82,16 +82,16 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^10.0.0",
-    "jsdom": "^27.0.0",
-    "prettier": "3.7.4",
+    "jsdom": "^28.0.0",
+    "prettier": "3.8.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^6.0.0",
     "serve": "^14.2.1",
     "storybook": "^10.0.0",
-    "stylelint": "^16.13.2",
-    "stylelint-config-standard": "^39.0.0",
+    "stylelint": "^17.0.0",
+    "stylelint-config-standard": "^40.0.0",
     "stylelint-plugin-defensive-css": "^1.0.0",
     "stylelint-use-logical": "^2.1.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.0",

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

@@ -61,6 +61,10 @@ Please see LICENSE files in the repository root for full details.
   outline-offset: 1px;
 }
 
+.input[disabled] {
+  cursor: not-allowed;
+}
+
 .input[disabled] + .ui {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);

package/src/components/Form/Controls/EditInPlace/EditInPlace.tsx

@@ -236,7 +236,7 @@ export const EditInPlace = forwardRef<HTMLInputElement, Props>(
     );
 
     const onInputHandler = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
+      (e: React.InputEvent<HTMLInputElement>) => {
         dispatch(Event.Touch);
         onInput?.(e);
       },

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

@@ -80,6 +80,10 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-subtle-secondary);
 }
 
+.input[disabled] {
+  cursor: not-allowed;
+}
+
 .input[disabled] + .ui {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);

package/src/components/Menu/ContextMenu.tsx

@@ -23,7 +23,6 @@ import { FloatingMenu } from "./FloatingMenu";
 import { Drawer } from "vaul";
 import classnames from "classnames";
 import drawerStyles from "./DrawerMenu.module.css";
-import contextStyles from "./ContextMenu.module.css";
 import {
   MenuContext,
   type MenuData,
@@ -141,7 +140,7 @@ export const ContextMenu: FC<Props> = ({
     <Root onOpenChange={onOpenChange}>
       {trigger}
       <Portal>
-        <Content asChild className={classnames(contextStyles.content)}>
+        <Content asChild>
           <FloatingMenu showTitle={showTitle} title={title}>
             {children}
           </FloatingMenu>

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

@@ -34,21 +34,10 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-@keyframes slide-out {
-  to {
-    opacity: 0;
-    transform: translate(0, var(--cpd-space-2x));
-  }
-}
-
 .menu[data-state="open"] {
   animation: slide-in 180ms;
 }
 
-.menu[data-state="closed"] {
-  animation: slide-out 110ms;
-}
-
 @keyframes fade-in {
   from {
     opacity: 0;

package/src/components/Menu/FloatingMenu.tsx

@@ -42,6 +42,7 @@ interface Props extends ComponentPropsWithoutRef<"div"> {
 export const FloatingMenu = forwardRef<HTMLDivElement, Props>(
   ({ title, showTitle = true, className, children, ...props }, ref) => {
     const titleId = useId();
+
     return (
       <div
         role="menu"

package/src/components/Menu/Menu.tsx

@@ -26,6 +26,11 @@ import { DrawerMenu } from "./DrawerMenu";
 import { getPlatform } from "../../utils/platform";
 
 interface Props {
+  /**
+   * CSS classes for the menu.
+   */
+  className?: string;
+
   /**
    * The menu title. This can be hidden with `showTitle={false}` in which case it will only
    * be a label for screen readers.
@@ -83,6 +88,7 @@ const DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({
  * A menu opened by pressing a button.
  */
 export const Menu: FC<Props> = ({
+  className,
   title,
   showTitle = true,
   open,
@@ -122,7 +128,11 @@ export const Menu: FC<Props> = ({
       <Trigger asChild>{trigger}</Trigger>
       <Portal>
         <Content asChild side={side} align={align} sideOffset={8}>
-          <FloatingMenu title={title} showTitle={showTitle}>
+          <FloatingMenu
+            className={className}
+            title={title}
+            showTitle={showTitle}
+          >
             {children}
           </FloatingMenu>
         </Content>

package/dist/components/Menu/ContextMenu.module.css.cjs

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const content = "_content_vnv5k_8";
-const contextStyles = {
-  content
-};
-exports.content = content;
-exports.default = contextStyles;
-//# sourceMappingURL=ContextMenu.module.css.cjs.map

package/dist/components/Menu/ContextMenu.module.css.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenu.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Menu/ContextMenu.module.css.js

@@ -1,9 +0,0 @@
-const content = "_content_vnv5k_8";
-const contextStyles = {
-  content
-};
-export {
-  content,
-  contextStyles as default
-};
-//# sourceMappingURL=ContextMenu.module.css.js.map

package/dist/components/Menu/ContextMenu.module.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContextMenu.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,10 +0,0 @@
-/*
- * Copyright 2025 New Vector Ltd
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-.content[data-state="closed"] {
-  animation: none;
-}