docs(popover-examples): simplify styling example

Author: maiieul

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

@@ -4,17 +4,11 @@ import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <>
-      <PopoverTrigger
-        popovertarget="styling-id"
-        class="rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 text-white"
-      >
+      <PopoverTrigger popovertarget="styling-id" class="popover-trigger">
         Popover Trigger
       </PopoverTrigger>
-      {/* slate gets overrided */}
-      <Popover
-        class="rounded-base border-2 border-red-200 bg-slate-600 px-3 py-1 shadow-md [&[popover]]:bg-red-900"
-        id="styling-id"
-      >
+      {/* popover bacground-color gets overrided */}
+      <Popover class="popover [&[popover]]:bg-primary" id="styling-id">
         Popover
       </Popover>
     </>

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

@@ -136,7 +136,7 @@ Here are a couple of example components where the Popover API can be used. Inclu
   caveats that should be kept in mind when consuming the popover.
 </Note>
 
-### Psuedo Selectors
+### Pseudo Selectors
 
 #### :popover-open
 
@@ -337,13 +337,11 @@ In the previous docs examples, we use the gutter property on the listbox. Gutter
 
 <Showcase name="gutter" />
 
-> In this case, that is the listbox or unordered list, and the input element. If Flip is enabled, it will provide a gutter space for both the top and bottom.
-
 ## Styling
 
 Styles can be added normally like any other component in Qwik UI, such as adding a class. The Popover API however, exposes the `[popover]` and `:popover-open` attribute and pseudo-class selectors which can be used to style both the open and closed states.
 
-From an earlier section, we learned that the `:popover-open` psuedo-class cannot be polyfilled, and so a class is added instead.
+From an earlier section, we learned that the `:popover-open` pseudo-class cannot be polyfilled, and so a class is added instead.
 
 ```tsx
 [popover] {
@@ -408,7 +406,7 @@ If you need to override any of the listbox properties, use the following CSS var
 
 ## Animations
 
-<Showcase name="listbox-animation" />
+<Showcase name="hero" />
 
 To use an animation, add the following CSS classes to the component.