Fixing fonts

docs/src/components/dialog.njk

@@ -111,6 +111,15 @@ document.addEventListener('alpine:init', () => {
 ] %}
 {{ tabs(id="combobox", tabsets=tabsets) }}
 
+<section class="prose">
+  <p>The component will dispatch <code>dialog:opened</code> and <code>dialog:closed</code> events when the dialog is opened or closed. You can also dispatch <code>dialog:open</code> and <code>dialog:close</code> events to open or close the dialog programmatically. You will need the element to have an <code>id</code> to be able to target it (e.g. <code>&lt;div id="my-dialog" class="dialog"&gt;</code>):</p>
+</section>
+
+{% set code_dispatch %}<button type="button" x-init @click="$dispatch('dialog:open', { id: 'my-dialog' })">
+  Open #my-dialog
+</button>{% endset %}
+{{ code_block(code_dispatch | prettyHtml, "html") }}
+
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">

docs/src/components/select.njk

@@ -128,6 +128,10 @@ document.addEventListener('alpine:init', () => {
 ] %}
 {{ tabs(id="select", tabsets=tabsets) }}
 
+<section class="prose">
+  <p>The component will dispatch a <code>select:change</code> event when a value is selected, along with the value and label of the selected option in the <code>detail</code> object.</p>
+</section>
+
 <h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
 
 <div class="prose">