Added toasts, fixed some combobox and select issues

docs/_includes/components/combobox.njk

@@ -48,13 +48,12 @@
           <div role="group" aria-labelledby="demo-combobox-timezones-group-{{ loop.index0 }}">
             <span id="demo-combobox-timezones-group-{{ loop.index0 }}" role="heading">{{ group.label }}</span>
             {% for timezone in group.timezones %}
-            <div role="option" data-value="{{ timezone.value}}">
-              {{ timezone.label }}
-            </div>
+              <div role="option" data-value="{{ timezone.value}}">
+                {{ timezone.label }}
+              </div>
             {% endfor %}
           </div>
-          {% endfor %}
-        </div>
+        {% endfor %}
       </div>
       <hr role="separator">
       <div role="option">

docs/_includes/components/toast.njk

@@ -0,0 +1,23 @@
+<section id="toast" class="w-full rounded-lg border scroll-mt-16">
+  <header class="border-b px-4 py-3">
+    <h2 class="text-sm font-medium">Toast</h2>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-center gap-2">
+    <div class="flex flex-wrap items-center gap-2">
+      <button class="btn-outline" hx-trigger="click" hx-get="/partials/toast/success" hx-target="#toast-htmx">
+        Success
+      </button>
+      <button class="btn-outline" hx-trigger="click" hx-get="/partials/toast/error" hx-target="#toast-htmx">
+        Error
+      </button>
+      <button class="btn-outline" hx-trigger="click" hx-get="/partials/toast/info" hx-target="#toast-htmx">
+        Info
+      </button>
+      <button class="btn-outline" hx-trigger="click" hx-get="/partials/toast/warning" hx-target="#toast-htmx">
+        Warning
+      </button>
+      <div id="toast-htmx"></div>
+    </div>
+  </div>
+</section>

docs/_includes/sidebar.njk

@@ -89,6 +89,7 @@
         { "id": "table", "name": "Table" },
         { "id": "tabs", "name": "Tabs" },
         { "id": "textarea", "name": "Textarea" },
+        { "id": "toast", "name": "Toast" },
         { "id": "tooltip", "name": "Tooltip" }
       ] %}
       {% for component in components %}