docs: update menu

Author: segunadebayo

website/data/components/context-menu.mdx

@@ -71,18 +71,18 @@ pointer is pen or touch.
 Earlier, we mentioned that each menu part has a `data-part` attribute added to
 them to select and style them in the DOM.
 
-### Focused item state
+### Highlighted item state
 
-When an item is focused, via keyboard navigation or pointer, it is given a
-`data-focus` attribute.
+When an item is highlighted, via keyboard navigation or pointer, it is given a
+`data-highlighted` attribute.
 
 ```css
-[data-part="item"][data-focus] {
-  /* styles for focused state */
+[data-part="item"][data-highlighted] {
+  /* styles for highlighted state */
 }
 
-[data-part="item"][data-type="radio|checkbox"][data-focus] {
-  /* styles for focused state */
+[data-part="item"][data-type="radio|checkbox"][data-highlighted] {
+  /* styles for highlighted state */
 }
 ```
 
@@ -114,10 +114,10 @@ When using arrows within the menu, you can style it using css variables.
 
 ### Checked option item state
 
-When an option item is checked, it is given a `data-checked` attribute.
+When an option item is checked, it is given a `data-state` attribute.
 
 ```css
-[data-part="item"][data-type="radio|checkbox"][data-checked] {
+[data-part="item"][data-type="radio|checkbox"][data-state="checked"] {
   /* styles for checked state */
 }
 ```

website/data/components/menu.mdx

@@ -99,10 +99,10 @@ menu items. To achieve this:
 <div {...api.getContentProps()}>
   {/* ... */}
   <hr {...api.getSeparatorProps()} />
-  <p {...api.getLabelProps({ htmlFor: "account" })}>Accounts</p>
-  <div {...api.getGroupProps({ id: "account" })}>
-    <button {...api.getItemProps({ id: "account-1" })}>Account 1</button>
-    <button {...api.getItemProps({ id: "account-2" })}>Account 2</button>
+  <p {...api.getItemGroupLabelProps({ htmlFor: "account" })}>Accounts</p>
+  <div {...api.getItemGroupProps({ id: "account" })}>
+    <button {...api.getItemProps({ value: "account-1" })}>Account 1</button>
+    <button {...api.getItemProps({ value: "account-2" })}>Account 2</button>
   </div>
 </div>
 //...

website/data/snippets/react/menu/option-items.mdx

@@ -24,7 +24,7 @@ export function Menu() {
 
   const api = menu.connect(service, normalizeProps)
 
-  const radios = menuOptionData.order.map((item) => ({
+  const radios = data.order.map((item) => ({
     type: "radio",
     name: "order",
     value: item.value,
@@ -33,7 +33,7 @@ export function Menu() {
     onCheckedChange: (checked) => setOrder(checked ? item.value : ""),
   }))
 
-  const checkboxes = menuOptionData.type.map((item) => ({
+  const checkboxes = data.type.map((item) => ({
     type: "checkbox",
     name: "type",
     value: item.value,