fix(Checkbox,Switch,Select): expose handlers in slot attrs for renderless mode (#298)

* fix(Checkbox,Switch,Select): expose handlers in slot attrs for renderless mode

CheckboxSelectAll, SwitchSelectAll, and SelectActivator bound onClick and
onKeydown via `@click`/`@keydown` directives on <Atom> and omitted both from
the slot attrs. In renderless mode Atom renders no element, so the directives
bind nothing and the consumer's spread `attrs` lacks the handlers — a
renderless custom element couldn't toggle/select or respond to the keyboard.

Move onClick/onKeydown into each component's slot attrs (and type) and drop
the directives. SelectAll components route them through their existing
mergeProps(attrs, slotProps.attrs); SelectActivator binds slotProps.attrs
directly. Single binding to Atom, no double-fire. Same renderless
handler-loss family as ComboboxItem/SelectItem (already correct) and the
dialog action components.

* test(Checkbox,Switch,Select): cover renderless onClick/onKeydown for select-all and activator

Author: johnleider

packages/0/src/components/Checkbox/CheckboxSelectAll.vue

@@ -61,6 +61,8 @@
       'tabindex': 0 | undefined
       'data-state': CheckboxState
       'data-disabled': true | undefined
+      'onClick': () => void
+      'onKeydown': (e: KeyboardEvent) => void
     }
   }
 </script>
@@ -159,6 +161,8 @@
       'tabindex': isDisabled.value ? undefined : 0,
       'data-state': dataState.value,
       'data-disabled': isDisabled.value ? true : undefined,
+      onClick,
+      onKeydown,
     },
   }))
 </script>
@@ -168,8 +172,6 @@
     v-bind="mergeProps(attrs, slotProps.attrs)"
     :as
     :renderless
-    @click="onClick"
-    @keydown="onKeydown"
   >
     <slot v-bind="slotProps" />
   </Atom>

packages/0/src/components/Checkbox/index.test.ts

@@ -1017,6 +1017,15 @@ describe('checkbox', () => {
         expect(wrapper.find('.custom').exists()).toBe(true)
         expect(capturedProps.attrs.role).toBe('checkbox')
       })
+
+      it('should expose onClick and onKeydown in slot attrs for renderless mode', () => {
+        const { selectAllProps } = mountGroup({ withSelectAll: true })
+
+        // Pre-fix these handlers lived on @click/@keydown directives (lost in
+        // renderless mode); they must be exposed through slot attrs instead.
+        expect(selectAllProps!().attrs.onClick).toBeTypeOf('function')
+        expect(selectAllProps!().attrs.onKeydown).toBeTypeOf('function')
+      })
     })
   })
 

packages/0/src/components/Select/SelectActivator.vue

@@ -40,6 +40,8 @@
       'aria-haspopup': 'listbox'
       'aria-controls': string
       'data-open': true | undefined
+      'onClick': () => void
+      'onKeydown': (e: KeyboardEvent) => void
     }
   }
 </script>
@@ -121,6 +123,8 @@
       'aria-haspopup': 'listbox',
       'aria-controls': context.listboxId,
       'data-open': context.isOpen.value || undefined,
+      onClick,
+      onKeydown,
     },
   }))
 </script>
@@ -131,8 +135,6 @@
     :as
     :style
     v-bind="slotProps.attrs"
-    @click="onClick"
-    @keydown="onKeydown"
   >
     <slot v-bind="slotProps" />
   </Atom>

packages/0/src/components/Select/index.test.ts

@@ -979,6 +979,29 @@ describe('select', () => {
   })
 
   describe('root slot props', () => {
+    it('should expose onClick and onKeydown in Select.Activator slot attrs', () => {
+      let captured: any
+      mount(
+        defineComponent({
+          render () {
+            return h(Select.Root as any, {}, {
+              default: () => h(Select.Activator as any, {}, {
+                default: (props: any) => {
+                  captured = props
+                  return h('button', 'open')
+                },
+              }),
+            })
+          },
+        }),
+      )
+
+      // Pre-fix these handlers lived on @click/@keydown directives (lost in
+      // renderless mode); they must be exposed through slot attrs instead.
+      expect(captured.attrs.onClick).toBeTypeOf('function')
+      expect(captured.attrs.onKeydown).toBeTypeOf('function')
+    })
+
     it('should expose isOpen, open, close, toggle, id, isDisabled', async () => {
       let rootSlotProps: any
 

packages/0/src/components/Switch/SwitchSelectAll.vue

@@ -69,6 +69,8 @@
       'tabindex': 0 | undefined
       'data-state': SwitchState
       'data-disabled': true | undefined
+      'onClick': () => void
+      'onKeydown': (e: KeyboardEvent) => void
     }
   }
 </script>
@@ -154,6 +156,8 @@
       'tabindex': isDisabled.value ? undefined : 0,
       'data-state': dataState.value,
       'data-disabled': isDisabled.value ? true : undefined,
+      onClick,
+      onKeydown,
     },
   }))
 </script>
@@ -163,8 +167,6 @@
     v-bind="mergeProps(attrs, slotProps.attrs)"
     :as
     :renderless
-    @click="onClick"
-    @keydown="onKeydown"
   >
     <slot v-bind="slotProps" />
   </Atom>

packages/0/src/components/Switch/index.test.ts

@@ -776,6 +776,15 @@ describe('switch', () => {
       expect(wrapper.find('.custom').exists()).toBe(true)
       expect(capturedProps.attrs.role).toBe('switch')
     })
+
+    it('should expose onClick and onKeydown in slot attrs for renderless mode', () => {
+      const { selectAllProps } = mountGroup({ withSelectAll: true })
+
+      // Pre-fix these handlers lived on @click/@keydown directives (lost in
+      // renderless mode); they must be exposed through slot attrs instead.
+      expect(selectAllProps!().attrs.onClick).toBeTypeOf('function')
+      expect(selectAllProps!().attrs.onKeydown).toBeTypeOf('function')
+    })
   })
 
   // eslint-disable-next-line vitest/prefer-lowercase-title