fix conflict

apps/website/src/routes/docs/headless/switch/examples/hero.tsx

@@ -3,11 +3,17 @@ import { Switch } from '@qwik-ui/headless';
 
 
 export default component$(() => {
-  const checked = useSignal(true)
+  const checked = useSignal(false)
+  const count = useSignal(0);
   useStyles$(styles);
+
   return (
-    <Switch.Root class="switch" bind:checked={checked}>
-      <Switch.Label>test</Switch.Label>
+    <Switch.Root
+      class="switch"
+      bind:checked={checked}
+      onChange$={() => count.value++}
+    >
+      <Switch.Label>test{count.value}</Switch.Label>
       <Switch.Input />
     </Switch.Root>
   );

packages/kit-headless/src/components/switch/switch-input.tsx

@@ -29,14 +29,15 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
     });
     return (
       <input
-        data-checked={context.bindChecked?.value ? '' : undefined}
-        data-disabled={context.disabled ? '' : undefined}
+        data-checked={context.bindChecked?.value ? 'true' : 'false'}
+        data-disabled={context.disabled ? 'true' : 'false'}
         ref={context.switchRef}
         aria-describedby={`${id}-switch`}
         disabled={context.disabled}
         aria-checked={context.bindChecked ? 'true' : 'false'}
         type="checkbox"
         role="switch"
+        data-value
         onClick$={[handleClickSync$, handleClick$]}
         checked={context.bindChecked?.value}
         onChange$={[handleClickSync$,handleClick$]}

packages/kit-headless/src/components/switch/switch-lable.tsx

@@ -3,7 +3,7 @@ import { component$, PropsOf, Slot, useId } from '@builder.io/qwik';
 export const SwitchLable = component$<PropsOf<'lable'>>(() => {
     const id = useId()
     return (
-      <label aria-label='switch' for={`switch-${id}`}  >
+      <label aria-label='switch' for={`switch-${id}`} data-switch-lable>
         <Slot></Slot>
       </label>
     );

packages/kit-headless/src/components/switch/switch-root.tsx

@@ -27,6 +27,7 @@ export const SwitchRoot = component$(({defaultChecked, disabled, onChange$, ...r
       {...rest}
       data-checked={context.bindChecked?.value ? '' : undefined}
       data-disabled={context.disabled ? '' : undefined}
+      data-qui-switch
     >
       <Slot></Slot>
     </div>

packages/kit-headless/src/components/switch/switch.driver.ts

@@ -0,0 +1,37 @@
+import { type Locator, type Page } from '@playwright/test';
+type OpenKeys = 'ArrowUp' | 'Enter' | 'Space' | 'ArrowDown';
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getRoot = () => {
+    return rootLocator;
+  };
+
+  const getTrigger = () => {
+    return getRoot().locator('[data-value]')
+  };
+
+  const getTriggerlaBle = () => {
+    return getRoot().locator('[data-switch-lable]')
+  }
+
+  const openListbox = async (key: OpenKeys | 'click') => {
+    await getTrigger().focus();
+
+    if (key !== 'click') {
+      await getTrigger().press(key);
+    } else {
+      await getTrigger().click();
+    }
+
+  };
+
+  return {
+    ...rootLocator,
+    locator: rootLocator,
+    getRoot,
+    getTrigger,
+    openListbox,
+    getTriggerlaBle
+  };
+}

packages/kit-headless/src/components/switch/switch.test.ts

@@ -0,0 +1,41 @@
+import { type Page, test, expect } from '@playwright/test';
+import { createTestDriver } from './switch.driver';
+
+declare global {
+  interface Window {
+    onChangeTriggered: boolean;
+    onChangeHandler: () => void;
+  }
+}
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/switch/${exampleName}`);
+
+  const driver = createTestDriver(page.locator('[data-qui-switch]'));
+
+  return {
+    driver,
+  };
+}
+
+test.describe('Mouse Behavior', () => {
+  test(`GIVEN a hero switch
+        WHEN toggled
+        THEN the checked property should correctly reflect the toggle state`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await expect(d.getTrigger()).not.toBeChecked();
+    await expect(d.getTrigger()).toHaveAttribute('data-checked', 'flase');
+    await d.getTrigger().click();
+    await expect(d.getTrigger()).toHaveAttribute('data-checked', 'true');
+    await expect(d.getTrigger()).toBeChecked()
+  })
+
+  test(`GIVEN a hero switch
+    WHEN clicked
+    THEN the onChange callback should be triggered`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await expect(d.getTriggerlaBle()).toHaveText('0')
+    await d.getTrigger().click();
+    await expect(d.getTriggerlaBle()).toHaveText('1')
+  })
+
+})