Fixing minor bugs and starting work on carousel

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;

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 %}

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) => {

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 %}