Updated popover docs to show onToggle (#904)

Author: DigiNanigans

apps/website/src/routes/docs/headless/popover/examples/toggle-event.tsx

@@ -0,0 +1,20 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Popover } from '@qwik-ui/headless';
+export default component$(() => {
+  const toggleStatus = useSignal<'open' | 'closed'>('closed');
+
+  return (
+    <Popover.Root>
+      <p>Panel is {toggleStatus.value}!</p>
+      <Popover.Trigger class="popover-trigger">Popover Trigger</Popover.Trigger>
+      <Popover.Panel
+        class="popover-panel"
+        onToggle$={(e) => {
+          toggleStatus.value = e.newState;
+        }}
+      >
+        My Hero!
+      </Popover.Panel>
+    </Popover.Root>
+  );
+});

apps/website/src/routes/docs/headless/popover/index.mdx

@@ -243,6 +243,14 @@ Above is an example of how we programmatically open and close the popover in the
 
 > In the native spec, these are methods, although we want to ensure code executes on interaction in all browsers, including the polyfill.
 
+### Handling state changes
+
+<Showcase name="toggle-event" />
+
+Use the `onToggle$` prop on the `<Popover.Panel>` to listen for changes to the popover visibility.
+
+The example above uses a `Signal` to track whether the popover is triggered or not.
+
 ## Floating Behavior
 
 By default, the Qwik UI Popover will float below the trigger component.
@@ -478,6 +486,19 @@ To read more about the popover API you can check it out on:
   ]}
 />
 
+### Popover Panel
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'onToggle',
+      type: 'QRL',
+      description: 'Function called when the popover opens or closes',
+      info: 'QRL<(event: CorrectedToggleEvent, element: HTMLDivElement) => void>',
+    },
+  ]}
+/>
+
 ### usePopover hook
 
 <APITable