@vector-im/compound-web 7.10.0 → 7.10.2

package/README.md

@@ -6,7 +6,7 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=compound-web&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=compound-web)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=compound-web&metric=coverage)](https://sonarcloud.io/summary/new_code?id=compound-web)
 
-React implementation of Compound – Element's design system – See full documentation on https://compound.element.io and the [Figma component library](https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=129%3A4461&t=0cvCO0bpqRPGgkwa-1)
+React implementation of Compound – Element's design system – See full documentation on https://compound.element.io
 
 ## Development
 

package/dist/components/ActivityMarker/UnreadCounter.module.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const styles = {
-  "unread-counter": "_unread-counter_1ibqq_8"
+  "unread-counter": "_unread-counter_9mg0k_8"
 };
 exports.default = styles;
 //# sourceMappingURL=UnreadCounter.module.css.cjs.map

package/dist/components/ActivityMarker/UnreadCounter.module.css.js

@@ -1,5 +1,5 @@
 const styles = {
-  "unread-counter": "_unread-counter_1ibqq_8"
+  "unread-counter": "_unread-counter_9mg0k_8"
 };
 export {
   styles as default

package/dist/components/Menu/CheckboxMenuItem.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const MenuItem = require("./MenuItem.cjs");
+const Checkbox = require("../Form/Controls/Checkbox/Checkbox.cjs");
+const CheckboxMenuItem = React.forwardRef(
+  function CheckboxMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
+    const toggleId = React.useId();
+    const onChange = React.useCallback(() => {
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem.MenuItem,
+      {
+        as: "div",
+        role: "menuitemcheckbox",
+        "aria-checked": checked,
+        className,
+        label,
+        onSelect,
+        disabled,
+        Icon: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox.CheckboxInput,
+          {
+            id: toggleId,
+            ref,
+            "aria-hidden": true,
+            checked,
+            disabled,
+            onChange
+          }
+        )
+      }
+    );
+  }
+);
+exports.CheckboxMenuItem = CheckboxMenuItem;
+//# sourceMappingURL=CheckboxMenuItem.cjs.map

package/dist/components/Menu/CheckboxMenuItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxMenuItem.cjs","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { ComponentProps, forwardRef, useCallback, useId } from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CheckboxMenuItem","useId","useCallback","jsx","MenuItem","CheckboxInput"],"mappings":";;;;;;AAyBO,MAAM,mBAAmBA,MAAA;AAAA,EAC9B,SAASC,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAS,GAChD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAM;AAGjB,UAAA,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,EAAE;AAMvC,WAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACED,2BAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAAA;AAGN;;"}

package/dist/components/Menu/CheckboxMenuItem.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useCallback } from "react";
+import { MenuItem } from "./MenuItem.js";
+import { CheckboxInput } from "../Form/Controls/Checkbox/Checkbox.js";
+const CheckboxMenuItem = forwardRef(
+  function CheckboxMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
+    const toggleId = useId();
+    const onChange = useCallback(() => {
+    }, []);
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        as: "div",
+        role: "menuitemcheckbox",
+        "aria-checked": checked,
+        className,
+        label,
+        onSelect,
+        disabled,
+        Icon: /* @__PURE__ */ jsx(
+          CheckboxInput,
+          {
+            id: toggleId,
+            ref,
+            "aria-hidden": true,
+            checked,
+            disabled,
+            onChange
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  CheckboxMenuItem
+};
+//# sourceMappingURL=CheckboxMenuItem.js.map

package/dist/components/Menu/CheckboxMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxMenuItem.js","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, { ComponentProps, forwardRef, useCallback, useId } from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["CheckboxMenuItem"],"mappings":";;;;AAyBO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAS,GAChD,KACA;AACA,UAAM,WAAW,MAAM;AAGjB,UAAA,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,EAAE;AAMvC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/index.cjs

@@ -13,10 +13,12 @@ const IndicatorIcon = require("./components/Icon/IndicatorIcon/IndicatorIcon.cjs
 const Link = require("./components/Link/Link.cjs");
 const Menu = require("./components/Menu/Menu.cjs");
 const MenuItem = require("./components/Menu/MenuItem.cjs");
+const MenuTitle = require("./components/Menu/MenuTitle.cjs");
 const Progress = require("./components/Progress/Progress.cjs");
 const Search = require("./components/Search/Search.cjs");
 const Separator = require("./components/Separator/Separator.cjs");
 const ToggleMenuItem = require("./components/Menu/ToggleMenuItem.cjs");
+const CheckboxMenuItem = require("./components/Menu/CheckboxMenuItem.cjs");
 const Tooltip = require("./components/Tooltip/Tooltip.cjs");
 const TooltipProvider = require("./components/Tooltip/TooltipProvider.cjs");
 const Toast = require("./components/Toast/Toast.cjs");
@@ -73,10 +75,12 @@ exports.IndicatorIcon = IndicatorIcon.IndicatorIcon;
 exports.Link = Link.Link;
 exports.Menu = Menu.Menu;
 exports.MenuItem = MenuItem.MenuItem;
+exports.MenuTitle = MenuTitle.MenuTitle;
 exports.Progress = Progress.Progress;
 exports.Search = Search.Search;
 exports.Separator = Separator.Separator;
 exports.ToggleMenuItem = ToggleMenuItem.ToggleMenuItem;
+exports.CheckboxMenuItem = CheckboxMenuItem.CheckboxMenuItem;
 exports.Tooltip = Tooltip.Tooltip;
 exports.TooltipProvider = TooltipProvider.TooltipProvider;
 exports.Toast = Toast.Toast;

package/dist/index.cjs.map

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

package/dist/index.d.ts

@@ -17,10 +17,12 @@ export { Link } from './components/Link/Link';
 export { NavBar, NavItem } from './components/Nav';
 export { Menu } from './components/Menu/Menu';
 export { MenuItem } from './components/Menu/MenuItem';
+export { MenuTitle } from './components/Menu/MenuTitle';
 export { Progress } from './components/Progress/Progress';
 export { Search } from './components/Search/Search';
 export { Separator } from './components/Separator/Separator';
 export { ToggleMenuItem } from './components/Menu/ToggleMenuItem';
+export { CheckboxMenuItem } from './components/Menu/CheckboxMenuItem';
 export { Tooltip } from './components/Tooltip/Tooltip';
 export { TooltipProvider } from './components/Tooltip/TooltipProvider';
 export { ReleaseAnnouncement } from './components/ReleaseAnnouncement';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,GACH,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EACL,WAAW,EAEX,WAAW,IAAI,OAAO,EACtB,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,aAAa,IAAI,QAAQ,EACzB,YAAY,EACZ,UAAU,EAEV,UAAU,IAAI,KAAK,EACnB,aAAa,EACb,WAAW,EAEX,WAAW,IAAI,MAAM,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,IAAI,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -11,10 +11,12 @@ import { IndicatorIcon } from "./components/Icon/IndicatorIcon/IndicatorIcon.js"
 import { Link } from "./components/Link/Link.js";
 import { Menu } from "./components/Menu/Menu.js";
 import { MenuItem } from "./components/Menu/MenuItem.js";
+import { MenuTitle } from "./components/Menu/MenuTitle.js";
 import { Progress } from "./components/Progress/Progress.js";
 import { Search } from "./components/Search/Search.js";
 import { Separator } from "./components/Separator/Separator.js";
 import { ToggleMenuItem } from "./components/Menu/ToggleMenuItem.js";
+import { CheckboxMenuItem } from "./components/Menu/CheckboxMenuItem.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { TooltipProvider } from "./components/Tooltip/TooltipProvider.js";
 import { Toast } from "./components/Toast/Toast.js";
@@ -67,6 +69,7 @@ export {
   CheckboxInput as Checkbox,
   CheckboxControl,
   CheckboxInput2 as CheckboxInput,
+  CheckboxMenuItem,
   ContextMenu,
   TextControl as Control,
   Dropdown,
@@ -93,6 +96,7 @@ export {
   MFAInput,
   Menu,
   MenuItem,
+  MenuTitle,
   Message,
   NavBar,
   NavItem,

package/dist/index.js.map

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

package/dist/style.css

@@ -1397,6 +1397,117 @@ ring after a simple click */
   border-color: var(--cpd-color-border-interactive-hovered);
 }
 /*
+Copyright 2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2023 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.
+*/
+
+._container_1hel1_10 {
+  --size: 20px;
+
+  display: grid;
+  inline-size: var(--size);
+  block-size: var(--size);
+}
+
+._input_1hel1_18,
+._ui_1hel1_19 {
+  box-sizing: border-box;
+  grid-area: 1/1;
+  inline-size: var(--size);
+  block-size: var(--size);
+}
+
+._input_1hel1_18 {
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+._ui_1hel1_19 {
+  pointer-events: none;
+  border-radius: 4px; /* TODO: Ought to be a token */
+  border: 1px solid;
+  border-color: var(--cpd-color-border-interactive-primary);
+
+  /** Default, rest state */
+  color: transparent;
+}
+
+._ui_1hel1_19 svg {
+  inline-size: var(--size);
+  block-size: var(--size);
+
+  /* compensate for the parent border */
+  margin: -1px;
+}
+
+._input_1hel1_18:checked + ._ui_1hel1_19 {
+  color: var(--cpd-color-icon-on-solid-primary);
+  background-color: var(--cpd-color-bg-accent-rest);
+  border-color: var(--cpd-color-bg-accent-rest);
+}
+
+._input_1hel1_18:focus-visible + ._ui_1hel1_19 {
+  outline: 2px solid var(--cpd-color-border-focused);
+  outline-offset: 1px;
+}
+
+._input_1hel1_18[disabled] + ._ui_1hel1_19 {
+  border-color: var(--cpd-color-border-disabled);
+  background: var(--cpd-color-bg-canvas-disabled);
+}
+
+._input_1hel1_18[readonly] {
+  pointer-events: none;
+}
+
+._input_1hel1_18[readonly] + ._ui_1hel1_19 {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+._input_1hel1_18[disabled]:checked + ._ui_1hel1_19 {
+  border-color: var(--cpd-color-bg-action-primary-disabled);
+  background: var(--cpd-color-bg-action-primary-disabled);
+}
+
+._input_1hel1_18[readonly]:checked + ._ui_1hel1_19 {
+  color: var(--cpd-color-icon-secondary);
+}
+
+@media (hover) {
+  ._input_1hel1_18:not([disabled], [readonly], :checked):hover + ._ui_1hel1_19 {
+    color: var(--cpd-color-icon-quaternary);
+    border-color: var(--cpd-color-bg-accent-hovered);
+
+    /** TODO: have the shadow in the design tokens */
+    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
+  }
+
+  ._input_1hel1_18:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
+    border-color: var(--cpd-color-bg-accent-hovered);
+    background: var(--cpd-color-bg-accent-hovered);
+  }
+
+  ._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
+    border-color: var(--cpd-color-bg-critical-hovered);
+    background: var(--cpd-color-bg-critical-hovered);
+  }
+}
+
+._input_1hel1_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1hel1_19 {
+  border-color: var(--cpd-color-border-critical-primary);
+}
+
+._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1hel1_19 {
+  background-color: var(--cpd-color-bg-critical-primary);
+  border-color: var(--cpd-color-bg-critical-primary);
+}
+/*
 Copyright 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -1885,117 +1996,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._container_1hel1_10 {
-  --size: 20px;
-
-  display: grid;
-  inline-size: var(--size);
-  block-size: var(--size);
-}
-
-._input_1hel1_18,
-._ui_1hel1_19 {
-  box-sizing: border-box;
-  grid-area: 1/1;
-  inline-size: var(--size);
-  block-size: var(--size);
-}
-
-._input_1hel1_18 {
-  opacity: 0;
-  margin: 0;
-  cursor: pointer;
-}
-
-._ui_1hel1_19 {
-  pointer-events: none;
-  border-radius: 4px; /* TODO: Ought to be a token */
-  border: 1px solid;
-  border-color: var(--cpd-color-border-interactive-primary);
-
-  /** Default, rest state */
-  color: transparent;
-}
-
-._ui_1hel1_19 svg {
-  inline-size: var(--size);
-  block-size: var(--size);
-
-  /* compensate for the parent border */
-  margin: -1px;
-}
-
-._input_1hel1_18:checked + ._ui_1hel1_19 {
-  color: var(--cpd-color-icon-on-solid-primary);
-  background-color: var(--cpd-color-bg-accent-rest);
-  border-color: var(--cpd-color-bg-accent-rest);
-}
-
-._input_1hel1_18:focus-visible + ._ui_1hel1_19 {
-  outline: 2px solid var(--cpd-color-border-focused);
-  outline-offset: 1px;
-}
-
-._input_1hel1_18[disabled] + ._ui_1hel1_19 {
-  border-color: var(--cpd-color-border-disabled);
-  background: var(--cpd-color-bg-canvas-disabled);
-}
-
-._input_1hel1_18[readonly] {
-  pointer-events: none;
-}
-
-._input_1hel1_18[readonly] + ._ui_1hel1_19 {
-  border-color: var(--cpd-color-border-interactive-secondary);
-  background: var(--cpd-color-bg-subtle-secondary);
-}
-
-._input_1hel1_18[disabled]:checked + ._ui_1hel1_19 {
-  border-color: var(--cpd-color-bg-action-primary-disabled);
-  background: var(--cpd-color-bg-action-primary-disabled);
-}
-
-._input_1hel1_18[readonly]:checked + ._ui_1hel1_19 {
-  color: var(--cpd-color-icon-secondary);
-}
-
-@media (hover) {
-  ._input_1hel1_18:not([disabled], [readonly], :checked):hover + ._ui_1hel1_19 {
-    color: var(--cpd-color-icon-quaternary);
-    border-color: var(--cpd-color-bg-accent-hovered);
-
-    /** TODO: have the shadow in the design tokens */
-    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
-  }
-
-  ._input_1hel1_18:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
-    border-color: var(--cpd-color-bg-accent-hovered);
-    background: var(--cpd-color-bg-accent-hovered);
-  }
-
-  ._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
-    border-color: var(--cpd-color-bg-critical-hovered);
-    background: var(--cpd-color-bg-critical-hovered);
-  }
-}
-
-._input_1hel1_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1hel1_19 {
-  border-color: var(--cpd-color-border-critical-primary);
-}
-
-._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1hel1_19 {
-  background-color: var(--cpd-color-bg-critical-primary);
-  border-color: var(--cpd-color-bg-critical-primary);
-}
-/*
-Copyright 2025 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-Copyright 2023 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.
-*/
-
 ._container_1e0uz_10 {
   --size: 20px;
 
@@ -2642,8 +2642,8 @@ Please see LICENSE files in the repository root for full details.
  * Please see LICENSE files in the repository root for full details.
  */
 
-._unread-counter_1ibqq_8 {
-  border-radius: 100%;
+._unread-counter_9mg0k_8 {
+  border-radius: 38px;
   font: var(--cpd-font-body-xs-semibold);
   color: var(--cpd-color-text-on-solid-primary);
   background-color: var(--cpd-color-icon-success-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "7.10.0",
+  "version": "7.10.2",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/ActivityMarker/UnreadCounter.module.css

@@ -6,7 +6,7 @@
  */
 
 .unread-counter {
-  border-radius: 100%;
+  border-radius: 38px;
   font: var(--cpd-font-body-xs-semibold);
   color: var(--cpd-color-text-on-solid-primary);
   background-color: var(--cpd-color-icon-success-primary);

package/src/index.ts

@@ -34,10 +34,12 @@ export { Link } from "./components/Link/Link";
 export { NavBar, NavItem } from "./components/Nav";
 export { Menu } from "./components/Menu/Menu";
 export { MenuItem } from "./components/Menu/MenuItem";
+export { MenuTitle } from "./components/Menu/MenuTitle";
 export { Progress } from "./components/Progress/Progress";
 export { Search } from "./components/Search/Search";
 export { Separator } from "./components/Separator/Separator";
 export { ToggleMenuItem } from "./components/Menu/ToggleMenuItem";
+export { CheckboxMenuItem } from "./components/Menu/CheckboxMenuItem";
 export { Tooltip } from "./components/Tooltip/Tooltip";
 export { TooltipProvider } from "./components/Tooltip/TooltipProvider";
 export { ReleaseAnnouncement } from "./components/ReleaseAnnouncement";