Bumping to 0.2.4

docs/src/_data/site.js

@@ -6,6 +6,5 @@ export default {
     name: "Ronan Berder",
     x: "@hunvreus"
   },
-  url: process.env.ELEVENTY_ENV === 'development' ? "http://localhost:8080" : "https://basecoatui.com",
-  version: "0.2"
+  url: process.env.ELEVENTY_ENV === 'development' ? "http://localhost:8080" : "https://basecoatui.com"
 };

docs/src/components/combobox.njk

@@ -56,7 +56,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/select.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">

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/dropdown-menu.njk

@@ -86,7 +86,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/dropdown-menu.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/dropdown-menu.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">

docs/src/components/popover.njk

@@ -69,7 +69,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/popover.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/popover.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">

docs/src/components/select.njk

@@ -88,7 +88,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/select.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">
@@ -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>

docs/src/components/sidebar.njk

@@ -32,7 +32,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/sidebar.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/sidebar.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">

docs/src/components/tabs.njk

@@ -85,7 +85,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/select.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">

docs/src/components/toast.njk

@@ -67,7 +67,7 @@ toc:
   <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
 </section>
 
-{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/toast.min.js" defer></script>{% endset %}
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/toast.min.js" defer></script>{% endset %}
 {{ code_block(code_script | prettyHtml, "html") }}
 
 <div class="flex flex-wrap gap-2 my-6">

docs/src/installation.njk

@@ -39,8 +39,8 @@ toc:
   <p>Add the following to the <code>&lt;head&gt;</code> of your HTML file:</p>
 </section>
 
-{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/basecoat.cdn.min.css">
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/all.min.js" defer></script>{% endset %}
+{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/basecoat.cdn.min.css">
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/all.min.js" defer></script>{% endset %}
 {{ code_block(code, "html") }}
 
 <h3 id="install-cdn-all"><a href="#install-cdn-all">Install specific components</a></h3>
@@ -49,8 +49,8 @@ toc:
   <p>While the JavaScript file for all components is small (around 3kB gzipped), you can cherry-pick the components you need as instructed in the component's page (<a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/sidebar">Sidebar</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/toast">Toast</a>). For example, to add the <a href="/components/dropdown-menu">Dropdown Menu</a> component, add the following to the <code>&lt;head&gt;</code> of your HTML file:</p>
 </section>
 
-{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/basecoat.cdn.min.css">
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ site.version }}/dist/js/dropdown-menu.min.js" defer></script>{% endset %}
+{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/basecoat.cdn.min.css">
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/dropdown-menu.min.js" defer></script>{% endset %}
 {{ code_block(code, "html") }}
 
 <h2 id="install-npm"><a href="#install-npm">Install using NPM</a></h2>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",

packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",

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