docs: update

Author: segunadebayo

website/data/components/checkbox.mdx

@@ -133,7 +133,7 @@ to them to select and style them in the DOM.
 
 ### Checked state
 
-When the checkbox input is checked, the `data-checked` attribute is added to the
+When the checkbox input is checked, the `data-state` attribute is added to the
 root, control and label parts.
 
 ```css

website/data/components/combobox.mdx

@@ -363,7 +363,7 @@ label, control and input parts.
 
 ### Selected State
 
-When a combobox item is selected, the `data-selected` attribute is added to the
+When a combobox item is selected, the `data-state` attribute is added to the
 item part.
 
 ```css

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

@@ -1,7 +1,20 @@
 ```tsx
 import * as menu from "@zag-js/menu"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { createMemo, createUniqueId, For } from "solid-js"
+import { createMemo, createSignal, createUniqueId, For } from "solid-js"
+
+const data = {
+  order: [
+    { label: "Ascending", value: "asc" },
+    { label: "Descending", value: "desc" },
+    { label: "None", value: "none" },
+  ],
+  type: [
+    { label: "Email", value: "email" },
+    { label: "Phone", value: "phone" },
+    { label: "Address", value: "address" },
+  ],
+}
 
 export function Menu() {
   const service = useMachine(menu.machine, { id: createUniqueId() })
@@ -12,7 +25,7 @@ export function Menu() {
   const [type, setType] = createSignal([])
 
   const radios = createMemo(() =>
-    menuOptionData.order.map((item) => ({
+    data.order.map((item) => ({
       type: "radio",
       value: item.value,
       label: item.label,
@@ -23,7 +36,7 @@ export function Menu() {
   )
 
   const checkboxes = createMemo(() =>
-    menuOptionData.type.map((item) => ({
+    data.type.map((item) => ({
       type: "checkbox",
       value: item.value,
       label: item.label,

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

@@ -2,15 +2,30 @@
 <script setup>
   import * as menu from "@zag-js/menu"
   import { normalizeProps, useMachine } from "@zag-js/vue"
-  import { computed } from "vue"
-  import { data } from "./data"
+  import { computed, ref } from "vue"
+
+  const data = {
+    order: [
+      { label: "Ascending", value: "asc" },
+      { label: "Descending", value: "desc" },
+      { label: "None", value: "none" },
+    ],
+    type: [
+      { label: "Email", value: "email" },
+      { label: "Phone", value: "phone" },
+      { label: "Address", value: "address" },
+    ],
+  }
+
+  const orderRef = ref("")
+  const typeRef = ref([])
 
   const service = useMachine(menu.machine, { id: "1" })
 
   const api = computed(() => menu.connect(service, normalizeProps))
 
   const radios = computed(() =>
-    menuOptionData.order.map((item) => ({
+    data.order.map((item) => ({
       label: item.label,
       id: item.value,
       type: "radio",
@@ -23,7 +38,7 @@
   )
 
   const checkboxes = computed(() =>
-    menuOptionData.type.map((item) => ({
+    data.type.map((item) => ({
       id: item.value,
       label: item.label,
       type: "checkbox",