From 7b0200bca061b4436284ac6e38d4f69fba1782f9 Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Thu, 19 Jun 2025 15:21:12 +0800
Subject: [PATCH] Fixing docs

---
 docs/src/components/dialog.njk     |  2 +-
 docs/src/components/select.njk     | 11 +++++++++--
 src/jinja/dialog.html.jinja        |  4 ++--
 src/jinja/dropdown-menu.html.jinja |  3 ++-
 src/jinja/popover.html.jinja       |  5 +++--
 src/jinja/select.html.jinja        |  3 ++-
 src/js/dropdown-menu.js            |  1 +
 src/js/popover.js                  |  1 +
 src/js/select.js                   | 16 ++++++++++++++++
 src/js/sidebar.js                  |  1 +
 src/js/tabs.js                     |  1 +
 src/js/toast.js                    |  1 +
 src/nunjucks/dialog.njk            |  4 ++--
 src/nunjucks/dropdown-menu.njk     |  3 ++-
 src/nunjucks/popover.njk           |  5 +++--
 src/nunjucks/select.njk            |  3 ++-
 16 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index e932fed..485ac25 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -157,7 +157,7 @@ toc:
   trigger="Scrollable Content",
   trigger_attrs={"class": "btn-outline"},
   dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
-  dialog_attrs={"class": "overflow-y-auto scrollbar"},
+  body_attrs={"class": "overflow-y-auto scrollbar"},
   footer=footer
 ) %}
 <div class="space-y-4 text-sm">
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index 7591c6e..e0e2ff8 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -186,7 +186,7 @@ toc:
         { 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: "grapes", label: "Grapes" },
         { type: "item", value: "pineapple", label: "Pineapple" }
       ]
     }
@@ -226,6 +226,7 @@ toc:
 
 {% set code %}
 {% call select(
+  id="select-with-icons",
   trigger_attrs={'class': 'w-[180px]'}
 ) %}
 <div type="button" role="option" data-value="bar">
@@ -249,4 +250,10 @@ toc:
 {% endcall %}
 {% endset %}
 
-{{ code_preview("select-scrollable", code | prettyHtml) }}
\ No newline at end of file
+{{ code_preview("select-scrollable", code | prettyHtml) }}
+<script>
+  const select = document.querySelector('#select-with-icons');
+  select.addEventListener('basecoat:initialized', () => {
+    select.selectByValue('pie');
+  });
+</script>
\ No newline at end of file
diff --git a/src/jinja/dialog.html.jinja b/src/jinja/dialog.html.jinja
index 0400054..acdbc18 100644
--- a/src/jinja/dialog.html.jinja
+++ b/src/jinja/dialog.html.jinja
@@ -45,12 +45,12 @@
 {% endif %}
 <dialog
   id="{{ id }}"
-  class="dialog"
+  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 %}
   {% for key, value in dialog_attrs.items() %}
-    {{ key }}="{{ value }}"
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
   <article {% if close_on_overlay_click %}onclick="event.stopPropagation()"{% endif %}>
diff --git a/src/jinja/dropdown-menu.html.jinja b/src/jinja/dropdown-menu.html.jinja
index ca39d36..b75fd78 100644
--- a/src/jinja/dropdown-menu.html.jinja
+++ b/src/jinja/dropdown-menu.html.jinja
@@ -20,6 +20,7 @@
 {% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
 
 <div
+  id="{{ id }}"
   class="dropdown-menu {{ main_attrs.class }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
@@ -38,7 +39,7 @@
     {{ trigger | safe }}
   </button>
   <div
-    id="{{ id }}"
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
     {% for key, value in popover_attrs.items() %}
diff --git a/src/jinja/popover.html.jinja b/src/jinja/popover.html.jinja
index e3bc22c..7d46211 100644
--- a/src/jinja/popover.html.jinja
+++ b/src/jinja/popover.html.jinja
@@ -17,6 +17,7 @@
 {% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
 
 <div
+  id="{{ id }}"
   class="popover {{ main_attrs.class }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
@@ -26,7 +27,7 @@
     id="{{ id }}-trigger"
     type="button"
     aria-expanded="false"
-    aria-controls="{{ id }}"
+    aria-controls="{{ id }}-popover"
     {% for key, value in trigger_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
@@ -34,7 +35,7 @@
     {{ trigger | safe }}
   </button>
   <div
-    id="{{ id }}"
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
     {% for key, value in popover_attrs.items() %}
diff --git a/src/jinja/select.html.jinja b/src/jinja/select.html.jinja
index 7459800..c1f54a6 100644
--- a/src/jinja/select.html.jinja
+++ b/src/jinja/select.html.jinja
@@ -55,6 +55,7 @@
 {% set default_option = selected_option.item or first_option.item or None %}
 
 <div
+  id="{{ id }}"
   class="select {{ main_attrs.class }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
@@ -79,7 +80,7 @@
     {% endif %}
   </button>
   <div
-    id="{{ id }}"
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
     {% for key, value in popover_attrs.items() %}
diff --git a/src/js/dropdown-menu.js b/src/js/dropdown-menu.js
index af5d784..c692368 100644
--- a/src/js/dropdown-menu.js
+++ b/src/js/dropdown-menu.js
@@ -137,6 +137,7 @@
     });
 
     dropdownMenuComponent.dataset.dropdownMenuInitialized = true;
+    dropdownMenuComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };
 
   document.querySelectorAll('.dropdown-menu:not([data-dropdown-menu-initialized])').forEach(initDropdownMenu);
diff --git a/src/js/popover.js b/src/js/popover.js
index 73f9740..b1220b9 100644
--- a/src/js/popover.js
+++ b/src/js/popover.js
@@ -64,6 +64,7 @@
     });
 
     popoverComponent.dataset.popoverInitialized = true;
+    popoverComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };
 
   document.querySelectorAll('.popover:not([data-popover-initialized])').forEach(initPopover);
diff --git a/src/js/select.js b/src/js/select.js
index aeb9907..dcc2427 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -75,6 +75,19 @@
       selectComponent.dispatchEvent(event);
     };
 
+    const selectByValue = (value) => {
+      const option = options.find(opt => opt.dataset.value === value);
+      if (option) {
+        updateValue(option);
+        
+        const event = new CustomEvent('change', {
+          detail: { value: option.dataset.value },
+          bubbles: true
+        });
+        selectComponent.dispatchEvent(event);
+      }
+    };
+
     if (filter) {
       const filterOptions = () => {
         const searchTerm = filter.value.trim().toLowerCase();
@@ -241,7 +254,10 @@
     });
 
     popover.setAttribute('aria-hidden', 'true');
+    
+    selectComponent.selectByValue = selectByValue;
     selectComponent.dataset.selectInitialized = true;
+    selectComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };
 
   document.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
diff --git a/src/js/sidebar.js b/src/js/sidebar.js
index a7fb24c..b11076b 100644
--- a/src/js/sidebar.js
+++ b/src/js/sidebar.js
@@ -95,6 +95,7 @@
     updateState();
     updateCurrentPageLinks();
     sidebarComponent.dataset.sidebarInitialized = true;
+    sidebarComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };
 
   document.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
diff --git a/src/js/tabs.js b/src/js/tabs.js
index 52eccc0..8844958 100644
--- a/src/js/tabs.js
+++ b/src/js/tabs.js
@@ -54,6 +54,7 @@
     });
     
     tabsComponent.dataset.tabsInitialized = true;
+    tabsComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };
 
   document.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
diff --git a/src/js/toast.js b/src/js/toast.js
index bb26612..3cbd5d8 100644
--- a/src/js/toast.js
+++ b/src/js/toast.js
@@ -25,6 +25,7 @@
 
     toaster.querySelectorAll('.toast:not([data-toast-initialized])').forEach(initToast);
     toaster.dataset.toasterInitialized = 'true';
+    toaster.dispatchEvent(new CustomEvent('basecoat:initialized'));
   }
 
   function initToast(element) {
diff --git a/src/nunjucks/dialog.njk b/src/nunjucks/dialog.njk
index 31cacac..a9537cb 100644
--- a/src/nunjucks/dialog.njk
+++ b/src/nunjucks/dialog.njk
@@ -45,12 +45,12 @@
 {% endif %}
 <dialog
   id="{{ id }}"
-  class="dialog"
+  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 %}
   {% for key, value in dialog_attrs %}
-    {{ key }}="{{ value }}"
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
   <article {% if close_on_overlay_click %}onclick="event.stopPropagation()"{% endif %}>
diff --git a/src/nunjucks/dropdown-menu.njk b/src/nunjucks/dropdown-menu.njk
index b351463..06c84b0 100644
--- a/src/nunjucks/dropdown-menu.njk
+++ b/src/nunjucks/dropdown-menu.njk
@@ -20,6 +20,7 @@
 {% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
 
 <div
+  id="{{ id }}"
   class="dropdown-menu {{ main_attrs.class }}"
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
@@ -38,7 +39,7 @@
     {{ trigger | safe }}
   </button>
   <div
-    id="{{ id }}"
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
     {% for key, value in popover_attrs %}
diff --git a/src/nunjucks/popover.njk b/src/nunjucks/popover.njk
index 78f2070..1569c11 100644
--- a/src/nunjucks/popover.njk
+++ b/src/nunjucks/popover.njk
@@ -17,6 +17,7 @@
 {% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
 
 <div
+  id="{{ id }}"
   class="popover {{ main_attrs.class }}"
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
@@ -26,7 +27,7 @@
     id="{{ id }}-trigger"
     type="button"
     aria-expanded="false"
-    aria-controls="{{ id }}"
+    aria-controls="{{ id }}-popover"
     {% for key, value in trigger_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
@@ -34,7 +35,7 @@
     {{ trigger | safe }}
   </button>
   <div
-    id="{{ id }}"
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
     {% for key, value in popover_attrs %}
diff --git a/src/nunjucks/select.njk b/src/nunjucks/select.njk
index 6051e3c..d78f2ad 100644
--- a/src/nunjucks/select.njk
+++ b/src/nunjucks/select.njk
@@ -55,6 +55,7 @@
 {% set default_option = selected_option[0] or first_option[0] or None %}
 
 <div
+  id="{{ id }}"
   class="select {{ main_attrs.class }}"
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
@@ -79,7 +80,7 @@
     {% endif %}
   </button>
   <div
-    id="{{ id }}"
+    id="{{ id }}-popover"
     data-popover
     aria-hidden="true"
     {% for key, value in popover_attrs %}