feat: move some styling to popcicle from global css

examples/dropdown_menu.gleam

···
       list.flatten([
         [
           class(
-            "p-1 min-w-[8rem] outline-none shadow-md bg-white rounded-md border border-zinc-200 overflow-hidden w-56",
+            "p-1 min-w-[8rem] outline-none shadow-md bg-white rounded-md border border-zinc-200 overflow-hidden w-56 transition-all duration-200",
           ),
         ],
         attributes,

gleam.toml

···
 name = "popcicle"
-version = "1.0.1"
+version = "1.0.2"
 target = "javascript"
 description = "Simple to use, styleable popovers for Lustre"
 licences = ["Apache-2.0"]

src/popcicle.gleam

···
 import gleam/bool
 import gleam/dynamic
 import gleam/int
-import gleam/io
 import gleam/list
 import gleam/result
-import lustre
-import lustre/attribute.{attribute, class}
-import lustre/effect
-import lustre/element.{type Element, element} as lu_element
-import lustre/element/html.{div, style, text}
+import lustre/attribute.{attribute}
+import lustre/element.{type Element} as _
+import lustre/element/html.{div, style}
 import lustre/event
 import plinth/browser/document
 import plinth/browser/element.{get_attribute, set_attribute} as pl_element
···
     css: "
 div[data-popcicle-open] {
   position: absolute;
-  z-index: 9999;
-  transition: all;
-  transition-duration: 200ms;
 }
 
 div[data-popcicle-open=\"0\"] {
···
   )
 }
 
+/// A simple popcicle will add the element in the child parameter where the
+/// function is called. Then when that element is pressed (show_on=popcicle.Click) or
+/// hovered (show_on=popcicle.Hover), it will show the popcicle as a popover
+/// positioned by the position parameter. By default the popcicle and it's
+/// button comes completely unstyled and you *can* use it that way however, it
+/// is highly recommened you create your own styled functions. If you don't
+/// want to do that then there is a prestyled component based on shadcn/ui that
+/// you can simply copy into your project: [Dropdown Menu](https://github.com/dinkelspiel/popcicle/blob/master/examples/dropdown_menu.gleam)
+///
 pub fn popcicle(
   child: Element(a),
   position: PrefferedPosition,

www/priv/static/www.css

···
   transition-duration: 150ms;
 }
 
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .hover\:bg-zinc-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 245 / var(--tw-bg-opacity));

www/priv/static/www.mjs

···
         toList([
           toList([
             class$(
-              "p-1 min-w-[8rem] outline-none shadow-md bg-white rounded-md border border-zinc-200 overflow-hidden w-56"
+              "p-1 min-w-[8rem] outline-none shadow-md bg-white rounded-md border border-zinc-200 overflow-hidden w-56 transition-all duration-200"
             )
           ]),
           attributes

www/src/popcicle/components/dropdown_menu.gleam

···
       list.flatten([
         [
           class(
-            "p-1 min-w-[8rem] outline-none shadow-md bg-white rounded-md border border-zinc-200 overflow-hidden w-56",
+            "p-1 min-w-[8rem] outline-none shadow-md bg-white rounded-md border border-zinc-200 overflow-hidden w-56 transition-all duration-200",
           ),
         ],
         attributes,