From a7f686e71bbf55a5c6b416d80883a81da452a82b Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Tue, 13 Jan 2026 16:37:14 +0800
Subject: [PATCH] Fixing Jinja macro and removing button-group isolate

---
 .../partials/kitchen-sink/select.njk          | 23 +++++++++++++++++++
 docs/src/assets/styles.css                    |  1 -
 src/css/basecoat.css                          |  3 ++-
 src/jinja/dialog.html.jinja                   |  8 +++----
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/docs/src/_includes/partials/kitchen-sink/select.njk b/docs/src/_includes/partials/kitchen-sink/select.njk
index 937d0aa..26f0bc4 100644
--- a/docs/src/_includes/partials/kitchen-sink/select.njk
+++ b/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>
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index fae88c8..b5c8f7f 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -2794,7 +2794,6 @@
 }
 @layer components {
   .button-group {
-    isolation: isolate;
     display: inline-flex;
     width: fit-content;
     align-items: stretch;
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index b07860a..59986b9 100644
--- a/src/css/basecoat.css
+++ b/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 {
diff --git a/src/jinja/dialog.html.jinja b/src/jinja/dialog.html.jinja
index 53e6247..b941b60 100644
--- a/src/jinja/dialog.html.jinja
+++ b/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 %}
\ No newline at end of file
+{% endmacro %}