Fixing docs

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">

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) }}
+{{ code_preview("select-scrollable", code | prettyHtml) }}
+<script>
+  const select = document.querySelector('#select-with-icons');
+  select.addEventListener('basecoat:initialized', () => {
+    select.selectByValue('pie');
+  });
+</script>

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

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

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

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

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);

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);

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);

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);

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);

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

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

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

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

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