fix: popover examples & polyfill styles

Author: thejackshelton

apps/website/src/components/info-popup/info-popup.tsx

@@ -17,11 +17,11 @@ export const InfoPopup = component$((props: InfoProps) => {
     opacity: 0;
   }
   
-  .popover-showing {
+  .fade-info.popover-showing {
     opacity: 1;
   }
   
-  .popover-closing {
+  .fade-info.popover-closing {
     opacity: 0;
   }  
   `);

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -66,7 +66,7 @@ export const DocsNavigation = component$(
                             (location.url.pathname?.startsWith('/docs/styled/') &&
                               link.name === 'Styled')
                             ? 'bg-accent font-bold text-accent-foreground'
-                            : 'font-light',
+                            : 'font-normal',
                         )}
                         href={link.href}
                       >

apps/website/src/routes/docs/headless/popover/examples/animation.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Popover, PopoverTrigger } from '@qwik-ui/headless';
+export default component$(() => {
+  return (
+    <>
+      <PopoverTrigger popovertarget="animation-id" class="popover-trigger">
+        Popover Trigger
+      </PopoverTrigger>
+      <Popover id="animation-id" class="popover popover-animation">
+        I'm a popover!
+      </Popover>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/popover/examples/auto-placement.tsx

@@ -3,18 +3,20 @@ import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <>
-      <PopoverTrigger popovertarget="auto-1" class="popover-trigger">
-        Popover Trigger 1
-      </PopoverTrigger>
-      <Popover id="auto-1" class="popover">
-        Popover 1
-      </Popover>
-      <PopoverTrigger popovertarget="auto-2" class="popover-trigger">
-        Popover Trigger 2
-      </PopoverTrigger>
-      <Popover id="auto-2" class="popover" style={{ top: '100px' }}>
-        Popover 2
-      </Popover>
+      {[0, 1].map((i) => (
+        <>
+          <PopoverTrigger popovertarget={`auto-${i}`} class="popover-trigger">
+            Popover Trigger {i + 1}
+          </PopoverTrigger>
+          <Popover
+            style={{ top: i === 1 ? '25px' : '0' }}
+            id={`auto-${i}`}
+            class="popover"
+          >
+            Popover {i + 1}
+          </Popover>
+        </>
+      ))}
     </>
   );
 });

apps/website/src/routes/docs/headless/popover/examples/auto.tsx

@@ -7,7 +7,7 @@ export default component$(() => {
 
   return (
     <>
-      <div class="flex flex-col items-center justify-center gap-2">
+      <div class="popover-container">
         <p>auto placed on scroll 📜</p>
         <PopoverTrigger
           ref={triggerRef}
@@ -26,7 +26,7 @@ export default component$(() => {
         flip
         gutter={4}
         id="popover-id"
-        class="popover listbox !p-4"
+        class="popover"
       >
         I am anchored to the trigger!
       </Popover>

apps/website/src/routes/docs/headless/popover/examples/backdrop.tsx

@@ -9,7 +9,7 @@ export default component$(() => {
 
   return (
     <>
-      <div class="flex flex-col items-center justify-center gap-2">
+      <div class="popover-container">
         <p>I'm a mini tooltip!</p>
         <PopoverTrigger
           ref={triggerRef}
@@ -35,7 +35,7 @@ export default component$(() => {
         placement="top"
         gutter={4}
         id="floating-id"
-        class="popover listbox !p-4"
+        class="popover"
       >
         I am anchored to the trigger!
       </Popover>

apps/website/src/routes/docs/headless/popover/examples/flip.tsx

@@ -7,11 +7,10 @@ export default component$(() => {
 
   return (
     <>
-      <div class="flex flex-col items-center justify-center gap-2">
+      <div class="popover-container">
         <p>gutter of 40px!</p>
         <PopoverTrigger
           ref={triggerRef}
-          popoverTargetAction="show"
           popovertarget="gutter-id"
           class="popover-trigger"
         >
@@ -26,7 +25,7 @@ export default component$(() => {
         placement="top"
         gutter={40}
         id="gutter-id"
-        class="popover listbox !p-4"
+        class="popover"
       >
         I am anchored to the trigger!
       </Popover>

apps/website/src/routes/docs/headless/popover/examples/floating.tsx

@@ -8,11 +8,11 @@ export default component$(() => {
         Inspect the popover!
       </PopoverTrigger>
       <Popover id="inspect-id" class="popover">
-        <p class="leading-5">
+        <p>
           I'm in the <strong>:top-layer</strong> pseudo element on supported browsers like
           chrome.
         </p>
-        <p class="mt-4 leading-5">
+        <p style={{ marginTop: '1rem' }}>
           On unsupported browsers I'm in the qwik-ui-polyfill div at the end of the
           document.
         </p>