From a2e9775a2c7e78e84eb469415a77a86d6e28530b Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Sun, 13 Jul 2025 10:39:13 +0800
Subject: [PATCH] Fixing minor bugs and starting work on carousel

---
 docs/src/assets/styles.css       |   2 +-
 docs/src/components/carousel.njk | 102 +++++++++++++++++++++++++++++
 docs/src/test.njk                | 108 +++++++++++--------------------
 src/css/basecoat.css             |   2 +-
 src/jinja/dialog.html.jinja      |   4 +-
 src/js/select.js                 |  14 ++--
 src/nunjucks/dialog.njk          |   4 +-
 7 files changed, 152 insertions(+), 84 deletions(-)
 create mode 100644 docs/src/components/carousel.njk

diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index de31d8f..f4bcd6f 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -4134,7 +4134,7 @@
       pointer-events: none;
       visibility: hidden;
       position: absolute;
-      z-index: 50;
+      z-index: 60;
       width: fit-content;
       max-width: var(--container-xs);
       --tw-scale-x: 95%;
diff --git a/docs/src/components/carousel.njk b/docs/src/components/carousel.njk
new file mode 100644
index 0000000..27bd002
--- /dev/null
+++ b/docs/src/components/carousel.njk
@@ -0,0 +1,102 @@
+---
+layout: layouts/page.njk
+title: Carousel
+description: A carousel with motion and swipe.
+toc:
+  - label: Usage
+    id: usage
+---
+
+
+<style>
+.slider {
+  width: 300px;
+  text-align: center;
+  overflow: hidden;
+}
+
+.slides {
+  display: flex;
+  
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  
+  
+  
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  
+  /*
+  scroll-snap-points-x: repeat(300px);
+  scroll-snap-type: mandatory;
+  */
+}
+.slides::-webkit-scrollbar {
+  display: none;
+}
+.slides {
+  scrollbar-width: none; /* Firefox */
+}
+.slides > div {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+  width: 300px;
+  height: 300px;
+  margin-right: 50px;
+  border-radius: 10px;
+  background: #eee;
+  transform-origin: center center;
+  transform: scale(1);
+  transition: transform 0.5s;
+  position: relative;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 100px;
+}
+
+</style>
+
+<div class="slider">
+  
+  <a href="#slide-1">1</a>
+  <a href="#slide-2">2</a>
+  <a href="#slide-3">3</a>
+  <a href="#slide-4">4</a>
+  <a href="#slide-5">5</a>
+  <a href="#slide-6">6</a>
+  <a href="#slide-7">7</a>
+  <a href="#slide-8">8</a>
+  <a href="#slide-9">9</a>
+
+  <div class="slides">
+    <div id="slide-1">
+      1
+    </div>
+    <div id="slide-2">
+      2
+    </div>
+    <div id="slide-3">
+      3
+    </div>
+    <div id="slide-4">
+      4
+    </div>
+    <div id="slide-5">
+      5
+    </div>
+    <div id="slide-6">
+      6
+    </div>
+    <div id="slide-7">
+      7
+    </div>
+    <div id="slide-8">
+      8
+    </div>
+    <div id="slide-9">
+      9
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/docs/src/test.njk b/docs/src/test.njk
index 4e32864..cae0a59 100644
--- a/docs/src/test.njk
+++ b/docs/src/test.njk
@@ -1,71 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Anchor Positioning Test (Top, End)</title>
-    <script type="module">
-        if (!("anchorName" in document.documentElement.style)) {
-            console.log("Loading CSS anchor positioning polyfill...");
-            import("https://unpkg.com/@oddbird/css-anchor-positioning");
-        }
-    </script>
-    <style>
-        body {
-            font-family: sans-serif;
-            display: grid;
-            place-items: center;
-            height: 100vh;
-            margin: 0;
-            background: #222;
-            color: #eee;
-        }
+---
+layout: layouts/layout.njk
+---
 
-        button {
-            padding: 0.5em 1em;
-            font-size: 1rem;
-            border-radius: 6px;
-            border: 1px solid #888;
-            background: #444;
-            color: #eee;
-            cursor: pointer;
-        }
-
-        [popover] {
-            border: 1px solid #888;
-            border-radius: 6px;
-            background: #333;
-            color: #eee;
-            padding: 1em;
-            margin: 0;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-        }
-
-        /* The core anchor positioning logic */
-        #my-popover {
-            position: absolute;
-            inset: auto; /* Required to override default popover centering */
-            bottom: anchor(top);   /* Position bottom of popover to top of anchor */
-            right: anchor(right);  /* Align right edge of popover with right edge of anchor */
-            margin-bottom: 8px;    /* A little space between popover and button */
-        }
-    </style>
-</head>
-<body>
-
-    <button 
-        popovertarget="my-popover" 
-        id="my-anchor-button" 
-        style="anchor-name: --my-anchor;">
-        Click Me
-    </button>
-
-    <div 
-        popover 
-        id="my-popover" 
-        style="position-anchor: --my-anchor;">
-        I should be anchored above the button, aligned to the right.
-    </div>
-
-</body>
-</html>
\ No newline at end of file
+{% from "dialog.njk" import dialog %}
+{% set footer %}
+<button class="btn-outline" onclick="this.closest('dialog').close()">Cancel</button>
+<button class="btn" onclick="this.closest('dialog').close()">Save changes</button>
+{% endset %}
+{% call dialog(
+id="demo-dialog-edit-profile",
+title="Edit profile",
+description="Make changes to your profile here. Click save when you're done.",
+trigger="Edit Profile",
+trigger_attrs={"class": "btn-outline"},
+dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+footer=footer
+) %}
+<form class="flex-col gap-4">
+{% from "select.njk" import select %}
+{{ select(
+  trigger_attrs={"class": "w-[180px]"},
+  is_combobox=true,
+  items=[
+    {
+      type: "group",
+      label: "Fruits",
+      items: [
+        { type: "item", value: "apple", label: "Apple" },
+        { type: "item", value: "banana", label: "Banana" },
+        { type: "item", value: "blueberry", label: "Blueberry" },
+        { type: "item", value: "pineapple", label: "Grapes" },
+        { type: "item", value: "pineapple", label: "Pineapple" }
+      ]
+    }
+  ]
+) }}
+</form>
+{% endcall %}
\ No newline at end of file
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index 886dd31..098f84d 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -1038,7 +1038,7 @@
     @apply relative;
 
     &:before {
-      @apply absolute content-[attr(data-tooltip)] bg-primary text-primary-foreground z-50 truncate max-w-xs w-fit rounded-md px-3 py-1.5 text-xs invisible opacity-0 scale-95 transition-all pointer-events-none;
+      @apply absolute content-[attr(data-tooltip)] bg-primary text-primary-foreground z-[60] truncate max-w-xs w-fit rounded-md px-3 py-1.5 text-xs invisible opacity-0 scale-95 transition-all pointer-events-none;
     }
     &:hover:before {
       @apply visible opacity-100 scale-100;
diff --git a/src/jinja/dialog.html.jinja b/src/jinja/dialog.html.jinja
index acdbc18..26b8552 100644
--- a/src/jinja/dialog.html.jinja
+++ b/src/jinja/dialog.html.jinja
@@ -48,12 +48,12 @@
   class="dialog {{ dialog_attrs.class }}"
   aria-labelledby="{{ id }}-title"
   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
-  {% if close_on_overlay_click %}onclick="this.close()"{% endif %}
+  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
   {% for key, value in dialog_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  <article {% if close_on_overlay_click %}onclick="event.stopPropagation()"{% endif %}>
+  <article>
     {% if title or description %}
       <header
         {% for key, value in header_attrs %}
diff --git a/src/js/select.js b/src/js/select.js
index cf0be0b..952600b 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -51,6 +51,12 @@
         input.value = option.dataset.value;
         listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
         option.setAttribute('aria-selected', 'true');
+        
+        const event = new CustomEvent('change', {
+          detail: { value: option.dataset.value },
+          bubbles: true
+        });
+        selectComponent.dispatchEvent(event);
       }
     };
 
@@ -88,14 +94,6 @@
       }
       
       closePopover();
-      
-      if (newValue !== oldValue) {
-        const event = new CustomEvent('change', {
-          detail: { value: newValue },
-          bubbles: true
-        });
-        selectComponent.dispatchEvent(event);
-      }
     };
 
     const selectByValue = (value) => {
diff --git a/src/nunjucks/dialog.njk b/src/nunjucks/dialog.njk
index a9537cb..7c6bf5f 100644
--- a/src/nunjucks/dialog.njk
+++ b/src/nunjucks/dialog.njk
@@ -48,12 +48,12 @@
   class="dialog {{ dialog_attrs.class }}"
   aria-labelledby="{{ id }}-title"
   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
-  {% if close_on_overlay_click %}onclick="this.close()"{% endif %}
+  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
   {% for key, value in dialog_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  <article {% if close_on_overlay_click %}onclick="event.stopPropagation()"{% endif %}>
+  <article>
     {% if title or description %}
       <header
         {% for key, value in header_attrs %}