Fixing Jinja macro and removing button-group isolate

docs/src/_includes/partials/kitchen-sink/select.njk

@@ -10,6 +10,29 @@
   <div class="p-4 gap">
     <div class="flex flex-col gap-4">
       <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        {{ select(
+          id="select-default",
+          trigger_attrs={"class": "w-[180px]"},
+          selected="blueberry",
+          items=[
+            {
+              type: "group",
+              label: "Fruits",
+              items: [
+                { type: "item", label: "Apple", value: "apple" },
+                { type: "item", label: "Banana", value: "banana" },
+                { type: "item", label: "Blueberry", value: "blueberry" }
+              ]
+            },
+            {
+              type: "group",
+              label: "Grapes",
+              items: [
+                { type: "item", label: "Pineapple", value: "pineapple" }
+              ]
+            }
+          ]
+        ) }}
         <select class="select w-[180px]">
           <optgroup label="Fruits">
             <option>Apple</option>

docs/src/assets/styles.css

@@ -2794,7 +2794,6 @@
 }
 @layer components {
   .button-group {
-    isolation: isolate;
     display: inline-flex;
     width: fit-content;
     align-items: stretch;

src/css/basecoat.css

@@ -388,7 +388,8 @@
 /* Button Group */
 @layer components {
   .button-group {
-    @apply inline-flex w-fit items-stretch isolate;
+    @apply inline-flex w-fit items-stretch;
+    /* isolate */
     
     > *:focus-visible,
     > :is(.dropdown-menu, .popover, .select) > button:focus-visible {

src/jinja/dialog.html.jinja

@@ -83,12 +83,10 @@
       </footer>
     {% endif %}
     {% if close_button %}
-      <form method="dialog">
-        <button aria-label="Close dialog">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      <button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
       </button>
-      </form>
     {% endif %}
   </div>
 </dialog>
-{% endmacro %}
+{% endmacro %}