fix(vue): correct prop merging in the asChild factory

`Dynamic` merged the parent attrs with the child's props, then handed the result
to `cloneVNode` without clearing the child's own props. `cloneVNode` merges again,
so the child's `class` landed twice (`class="child parent child"`) and its event
handlers were re-added alongside the composed ones. Cloning from a vnode with
cleared props makes the second merge a no-op, which also removes the loop that
existed to undo the handler half of the same problem.

`Dynamic` also took `children[0]` blindly. A leading comment (a plain comment or
the placeholder a false `v-if` leaves behind) meant the props were applied to the
comment and silently dropped. It now targets the first non-comment child and
replaces it in place, so the other children keep their order.

Class merge order now matches React (`parent child`).

Docs: the composition guide claimed the factory example rendered a `span` with
props that appear in no example. It renders `<a href="#">Ark UI</a>` in React,
Solid, and Vue alike. Also switched the Vue example to `as-child`, the dominant
spelling in this package's examples.

Author: segunadebayo

.changeset/vue-aschild-duplicate-class.md

@@ -0,0 +1,8 @@
+---
+"@ark-ui/vue": patch
+---
+
+- Fixed `asChild` duplicating the child element's `class`, so `<ark.div class="parent" as-child><span class="child">`
+  rendered `class="child parent child"` instead of `class="parent child"`.
+- Fixed `asChild` applying props to a leading comment node, which silently dropped them when a comment or a false `v-if`
+  preceded the child element.

packages/vue/src/components/factory.test.tsx

@@ -1,5 +1,6 @@
 import user from '@testing-library/user-event'
 import { render, screen } from '@testing-library/vue'
+import { createCommentVNode, defineComponent, h, nextTick, ref } from 'vue'
 import { ark } from './factory.ts'
 
 const ComponentUnderTest = (
@@ -33,6 +34,75 @@ describe('Factory', () => {
     expect(screen.getByText('Ark UI')).toBeVisible()
   })
 
+  it('should not duplicate the class of a plain child element', () => {
+    render(
+      <ark.div class="parent" asChild>
+        <span data-testid="child" class="child">
+          Ark UI
+        </span>
+      </ark.div>,
+    )
+    const child = screen.getByTestId('child')
+    expect(child.className.split(/\s+/).filter(Boolean).sort()).toEqual(['child', 'parent'])
+  })
+
+  it('should call each handler of a plain child element once', async () => {
+    const onClickParent = vi.fn()
+    const onClickChild = vi.fn()
+    render(
+      <ark.div onClick={onClickParent} asChild>
+        <button type="button" data-testid="child" onClick={onClickChild} />
+      </ark.div>,
+    )
+    await user.click(screen.getByTestId('child'))
+    expect(onClickParent).toHaveBeenCalledTimes(1)
+    expect(onClickChild).toHaveBeenCalledTimes(1)
+  })
+
+  it('should apply props to the first non-comment child', () => {
+    render(
+      defineComponent({
+        setup: () => () =>
+          h(ark.div, { class: 'parent', asChild: true }, () => [
+            createCommentVNode('placeholder'),
+            h('span', { 'data-testid': 'child', class: 'child' }, 'Ark UI'),
+          ]),
+      }),
+    )
+    const child = screen.getByTestId('child')
+    expect(child.className.split(/\s+/).filter(Boolean).sort()).toEqual(['child', 'parent'])
+  })
+
+  it('should patch reactive props onto the same child element', async () => {
+    const parentClass = ref('a')
+    const { container } = render(
+      defineComponent({
+        setup: () => () =>
+          h(ark.div, { class: parentClass.value, asChild: true }, () => [
+            h('span', { 'data-testid': 'child', class: 'child' }, 'Ark UI'),
+          ]),
+      }),
+    )
+    const before = screen.getByTestId('child')
+    expect(before.className.split(/\s+/).filter(Boolean).sort()).toEqual(['a', 'child'])
+
+    parentClass.value = 'b'
+    await nextTick()
+
+    const after = container.querySelector('[data-testid="child"]')
+    expect(after).toBe(before)
+    expect(after?.className.split(/\s+/).filter(Boolean).sort()).toEqual(['b', 'child'])
+  })
+
+  it('should render comment-only children untouched', () => {
+    const { container } = render(
+      defineComponent({
+        setup: () => () => h(ark.div, { class: 'parent', asChild: true }, () => [createCommentVNode('v-if')]),
+      }),
+    )
+    expect(container.innerHTML).toBe('<!--v-if-->')
+  })
+
   it('should merge events', async () => {
     const onClickParent = vi.fn()
     const onClickChild = vi.fn()

packages/vue/src/components/popover/examples/factory.vue

@@ -3,7 +3,7 @@ import { ark } from '@ark-ui/vue/factory'
 </script>
 
 <template>
-  <ark.span asChild>
+  <ark.span as-child>
     <a href="#">Ark UI</a>
   </ark.span>
 </template>

packages/vue/src/utils/dynamic.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from '@zag-js/vue'
-import { Fragment, type VNode, cloneVNode, defineComponent } from 'vue'
+import { Comment, Fragment, type VNode, cloneVNode, defineComponent } from 'vue'
 
 export const Dynamic = defineComponent({
   name: 'Dynamic',
@@ -8,20 +8,20 @@ export const Dynamic = defineComponent({
     return () => {
       if (!slots.default) return null
       const children = renderSlotFragments(slots.default())
-      const [firstChildren, ...otherChildren] = children
+      const index = children.findIndex((child) => child.type !== Comment)
+      if (index === -1) return children
 
-      if (firstChildren && Object.keys(attrs).length > 0) {
+      const firstChildren = children[index]
+
+      if (Object.keys(attrs).length > 0) {
         delete firstChildren.props?.ref
+        // props are cleared below so `cloneVNode` doesn't merge the child's own props a second time
         const mergedProps = mergeProps(attrs, firstChildren.props ?? {})
-        const cloned = cloneVNode(firstChildren, mergedProps)
-        for (const prop in mergedProps) {
-          if (prop.startsWith('on')) {
-            cloned.props ||= {}
-            cloned.props[prop] = mergedProps[prop]
-          }
-        }
+        const cloned = cloneVNode({ ...firstChildren, props: {} }, mergedProps)
 
-        return children.length === 1 ? cloned : [cloned, ...otherChildren]
+        if (children.length === 1) return cloned
+        children[index] = cloned
+        return children
       }
 
       return children

website/src/content/pages/guides/composition.mdx

@@ -22,12 +22,15 @@ You can use the `ark` factory to create your own elements that work just like Ar
 
 <ExampleCode id="factory" component="popover" />
 
-This will produce the following HTML:
+The factory renders the child element in place of the `span`, so this produces:
 
 ```html
-<span id="child" class="parent child" style="background: red; color: blue;">Ark UI</span>
+<a href="#">Ark UI</a>
 ```
 
+Any props you pass to `ark.span` are merged onto the child element, which is how the factory forwards styling and behavior to
+whatever you render.
+
 ## ID Composition
 
 When composing components that need to work together, share IDs between them using the `ids` prop for proper